多语言支持

站点多语言配置

要启用 VuePress 的多语言支持，首先需要使用如下的文件结构：

  1. docs
  2. ├─ README.md
  3. ├─ foo.md
  4. ├─ nested
  5. │  └─ README.md
  6. └─ zh
  7.    ├─ README.md
  8.    ├─ foo.md
  9.    └─ nested
  10.       └─ README.md

然后，在 .vuepress/config.js 中提供 locales 选项：

  1. module.exports = {
  2.   locales: {
  3.     // 键名是该语言所属的子路径
  4.     // 作为特例，默认语言可以使用 '/' 作为其路径。
  5.     '/': {
  6.       lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
  7.       title: 'VuePress',
  8.       description: 'Vue-powered Static Site Generator'
  9.     },
  10.     '/zh/': {
  11.       lang: 'zh-CN',
  12.       title: 'VuePress',
  13.       description: 'Vue 驱动的静态网站生成器'
  14.     }
  15.   }
  16. }

如果一个语言没有声明 title 或者 description，VuePress 将会尝试使用配置顶层的对应值。如果每个语言都声明了 title 和 description，则顶层的这两个值可以被省略。

默认主题多语言配置

默认主题也内置了多语言支持，可以通过 themeConfig.locales 来配置。该选项接受同样的 { path: config } 格式的值。每个语言除了可以配置一些站点中用到的文字之外，还可以拥有自己的 导航栏 和 侧边栏 配置：

  1. module.exports = {
  2.   locales: { /* ... */ },
  3.   themeConfig: {
  4.     locales: {
  5.       '/': {
  6.         selectText: 'Languages',
  7.         label: 'English',
  8.         editLinkText: 'Edit this page on GitHub',
  9.         algolia: {},
  10.         nav: [
  11.           { text: 'Nested', link: '/nested/' }
  12.         ],
  13.         sidebar: {
  14.           '/': [/* ... */],
  15.           '/nested/': [/* ... */]
  16.         }
  17.       },
  18.       '/zh/': {
  19.         // 多语言下拉菜单的标题
  20.         selectText: '选择语言',
  21.         // 该语言在下拉菜单中的标签
  22.         label: '简体中文',
  23.         // 编辑链接文字
  24.         editLinkText: '在 GitHub 上编辑此页',
  25.         // 当前 locale 的 algolia docsearch 选项
  26.         algolia: {},
  27.         nav: [
  28.           { text: '嵌套', link: '/zh/nested/' }
  29.         ],
  30.         sidebar: {
  31.           '/zh/': [/* ... */],
  32.           '/zh/nested/': [/* ... */]
  33.         }
  34.       }
  35.     }
  36.   }
  37. }