• 多语言支持
    • 站点多语言配置
    • 默认主题多语言配置

    多语言支持

    站点多语言配置

    要启用 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.         serviceWorker: {
    10.           updatePopup: {
    11.             message: "New content is available.",
    12.             buttonText: "Refresh"
    13.           }
    14.         },
    15.         algolia: {},
    16.         nav: [
    17.           { text: 'Nested', link: '/nested/' }
    18.         ],
    19.         sidebar: {
    20.           '/': [/* ... */],
    21.           '/nested/': [/* ... */]
    22.         }
    23.       },
    24.       '/zh/': {
    25.         // 多语言下拉菜单的标题
    26.         selectText: '选择语言',
    27.         // 该语言在下拉菜单中的标签
    28.         label: '简体中文',
    29.         // 编辑链接文字
    30.         editLinkText: '在 GitHub 上编辑此页',
    31.         // Service Worker 的配置
    32.         serviceWorker: {
    33.           updatePopup: {
    34.             message: "发现新内容可用.",
    35.             buttonText: "刷新"
    36.           }
    37.         },
    38.         // 当前 locale 的 algolia docsearch 选项
    39.         algolia: {},
    40.         nav: [
    41.           { text: '嵌套', link: '/zh/nested/' }
    42.         ],
    43.         sidebar: {
    44.           '/zh/': [/* ... */],
    45.           '/zh/nested/': [/* ... */]
    46.         }
    47.       }
    48.     }
    49.   }
    50. }