心流笔记

主题

Wilson2025-03-07 07:30:08指南指南
1208
5.8m

国际化 ​

Teek 已经兼容 Vitepress 的 国际化 功能。

国际化下的 Vitepress 配置 ​

假设国际化环境下，配置文件目录如下：

sh
.vitepress
├─ locales
│  ├─ zh.ts       # 中文配置
│  ├─ shared.ts   # 共享配置
│  ├─ en.ts       # 英文配置
│  ├─ xx.ts       # 其他语言配置
├─ config.ts

.vitepress/config.ts 内容如下：

ts
// .vitepress/config.ts
import { defineConfig } from "vitepress";
import shared from "./locales/shared";
import zh from "./locales/zh";
import en from "./locales/en";

export default defineConfig({
  ...shared,
  locales: {
    root: { label: "简体中文", ...zh },
    en: { label: "English", ...en },
  },
});

Vitepress 默认会对 shared.ts 和当前语言的配置文件进行合并，且配置同名时，以当前语言配置为主，如 zh.ts 和 en.ts 会覆盖 shared.ts 中的同名配置。

利用这个机制，你可以在 shared.ts 中定义一些通用的配置，然后 zh.ts 和 en.ts 里配置不同语言的配置，如：

ts
import { defineConfig } from "vitepress";

export default defineConfig({
  title: "Hd Security",
  cleanUrls: false,
  lastUpdated: true,

  head: [
    ["link", { rel: "icon", type: "image/svg+xml", href: "/teek-logo-mini.svg" }],
    ["link", { rel: "icon", type: "image/png", href: "/teek-logo-mini.png" }],
    ["meta", { property: "og:type", content: "website" }],
    ["meta", { property: "og:locale", content: "zh-CN" }],
    ["meta", { property: "og:title", content: "Teek | Vitepress Theme" }],
    ["meta", { name: "author", content: "Teek" }],
    [
      "meta",
      {
        name: "viewport",
        content: "width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no",
      },
    ],
    ["link", { rel: "icon", href: "/favicon.ico", type: "image/png" }],
    ["link", { rel: "stylesheet", href: "//at.alicdn.com/t/font_2989306_w303erbip9.css" }], // 阿里在线矢量库
  ],

  markdown: {
    lineNumbers: true,
  },

  // https://vitepress.dev/reference/default-theme-config
  themeConfig: {
    logo: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png",
    search: {
      provider: "local",
    },
  },
});
ts
import { defineConfig } from "vitepress";

const description = ["Teek 使用文档", "Vitepress 主题"].toString();

export default defineConfig({
  lang: "zh-CN",
  description: description,
  head: [
    ["meta", { name: "description", description }],
    ["meta", { name: "keywords", description }],
  ],
  markdown: {
    container: {
      tipLabel: "提示",
      warningLabel: "警告",
      dangerLabel: "危险",
      infoLabel: "信息",
      detailsLabel: "详细信息",
    },
  },
  themeConfig: {
    darkModeSwitchLabel: "主题",
    sidebarMenuLabel: "菜单",
    returnToTopLabel: "返回顶部",
    lastUpdatedText: "上次更新时间",
    outline: {
      level: [2, 4],
      label: "本页导航",
    },
    docFooter: {
      prev: "上一页",
      next: "下一页",
    },
    nav: [
      { text: "首页", link: "/" },
      { text: "指南", link: "/guide/intro" },
      { text: "配置", link: "/reference/config" },
      { text: "开发", link: "/develop/intro" },
      { text: "归档", link: "/archives" },
    ],
    editLink: {
      text: "在 GitHub 上编辑此页",
      pattern: "https://github.com/Kele-Bingtang/vitepress-theme-teek/edit/master/docs/:path",
    },
  },
});
ts
import { defineConfig } from "vitepress";

const description = ["Teek Documentation", "Vitepress Theme"].toString();

export default defineConfig({
  lang: "en-US",
  description: description,
  head: [
    ["meta", { name: "description", description }],
    ["meta", { name: "keywords", description }],
  ],
  markdown: {
    container: {
      tipLabel: "Tip",
      warningLabel: "Warning",
      dangerLabel: "Danger",
      infoLabel: "Info",
      detailsLabel: "Details",
    },
  },
  themeConfig: {
    ...teekConfig.themeConfig,
    darkModeSwitchLabel: "Theme",
    sidebarMenuLabel: "Menu",
    returnToTopLabel: "To Top",
    lastUpdatedText: "LastUpdated",
    outline: {
      level: [2, 4],
      label: "Page Navigation",
    },
    docFooter: {
      prev: "prev",
      next: "next",
    },
    nav: [
      { text: "index", link: "/en" },
      { text: "guide", link: "/guide/intro" },
      { text: "reference", link: "/reference/config" },
      { text: "develop", link: "/develop/intro" },
      { text: "archives", link: "/en/archives" },
    ],
    editLink: {
      text: "Edit this page on GitHub",
      pattern: "https://github.com/Kele-Bingtang/vitepress-theme-teek/edit/master/docs/:path",
    },
  },
});

国际化下的 Teek 配置 ​

在非国际化配置文件里下，您可以直接在 Vitepress 的配置里使用 extends 来继承 Teek 的配置，但是在国际化配置文件下，extends 配置会失效。

Teek 的默认语言是中文，因此 Teek 里的很多标签都是中文，如果希望在国际化下根据不同的语言显示不同的标签，需要将 Teek 配置的 themeConfig 添加到 Vitepress 的 themeConfig 里。

ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  // ...
});

export default defineConfig({
  extends: teekConfig,
  // ...
});
ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  // ...
});

export default defineConfig({
  themeConfig: {
    ...teekConfig.themeConfig,
    // ...
  },
});
ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  // ...
});

export default defineConfig({
  themeConfig: {
    ...teekConfig.themeConfig,
    // ...
  },
});

举个例子，您可以在英文环境下，将 Teek 的部分标签改为英文：

ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  article: {
    titleTip: {
      author: "作者",
      createTime: "创建时间",
      updateTime: "更新时间",
      category: "分类",
      tag: "标签",
      wordCount: "文章字数",
      readingTime: "预计阅读时间",
      pageView: "浏览量",
    },
  },
});

export default defineConfig({
  themeConfig: {
    ...teekConfig.themeConfig,
    // ...
  },
});
ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  article: {
    titleTip: {
      author: "Author",
      createTime: "Create Time",
      updateTime: "Update Time",
      category: "Category",
      tag: "Tag",
      wordCount: "Word Count",
      readingTime: "Reading Time",
      pageView: "Page View",
    },
  },
});

export default defineConfig({
  themeConfig: {
    ...teekConfig.themeConfig,
    // ...
  },
});

Teek 默认是中文，因此本次例子中 zh.ts 里的配置可以不需要配置，这里是为了突出对比而添加的。

给 root 语言添加目录 ​

这里对一个特殊场景进行说明。

Vitepress 支持的国际化文档目录如下：

sh
docs/
├─ es/
│  ├─ foo.md
├─ fr/
│  ├─ foo.md
├─ foo.md

根目录下的 foo.md 是 root 语言（默认语言）的文档，当 Markdown 文件多起来时，根目录下文件显得很拥挤，那么可以将这些文档放到一个目录下，假设默认语言是 zh，则：

sh
docs/
├─ es/
│  ├─ foo.md
├─ fr/
│  ├─ foo.md
├─ zh/
│  ├─ foo.md

但是 Vitepress 无法感知到 root 语言（默认语言）的文档已经放到 zh 目录下，它依然只扫描根目录的 Markdown 文件作为默认语言的文档，因此需要使用 Vitepress 提供的 rewrites 进行重定向，同时 Teek 也无法感知文档进行了移动，因此需要配置 vitePlugins.sidebarOption.localeRootDir

ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置
const teekConfig = defineTeekConfig({
  vitePlugins: {
    sidebarOption: {
      localeRootDir: "zh",
    },
  },
});

// Vitepress 配置
export default defineConfig({
  rewrites: {
    "zh/:rest*": ":rest*",
  },
});
最近更新