多语言支持
站点多语言配置
要启用 VuePress 的多语言支持，首先需要使用如下的文件结构：
docs
├─ README.md
├─ foo.md
├─ nested
│ └─ README.md
└─ zh
├─ README.md
├─ foo.md
└─ nested
└─ README.md
然后，在 .vuepress/config.js 中提供 locales 选项：
module.exports = {
locales: {
// 键名是该语言所属的子路径
// 作为特例，默认语言可以使用 '/' 作为其路径。
'/': {
lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
title: 'VuePress',
description: 'Vue-powered Static Site Generator'
},
'/zh/': {
lang: 'zh-CN',
title: 'VuePress',
description: 'Vue 驱动的静态网站生成器'
}
}
}
如果一个语言没有声明 title 或者 description，VuePress 将会尝试使用配置顶层的对应值。如果每个语言都声明了 title 和 description，则顶层的这两个值可以被省略。
默认主题多语言配置
默认主题也内置了多语言支持，可以通过 themeConfig.locales 来配置。该选项接受同样的 { path: config } 格式的值。每个语言除了可以配置一些站点中用到的文字之外，还可以拥有自己的 导航栏 和 侧边栏 配置：
module.exports = {
locales: { /* ... */ },
themeConfig: {
locales: {
'/': {
selectText: 'Languages',
label: 'English',
editLinkText: 'Edit this page on GitHub',
serviceWorker: {
updatePopup: {
message: "New content is available.",
buttonText: "Refresh"
}
},
algolia: {},
nav: [
{ text: 'Nested', link: '/nested/' }
],
sidebar: {
'/': [/* ... */],
'/nested/': [/* ... */]
}
},
'/zh/': {
// 多语言下拉菜单的标题
selectText: '选择语言',
// 该语言在下拉菜单中的标签
label: '简体中文',
// 编辑链接文字
editLinkText: '在 GitHub 上编辑此页',
// Service Worker 的配置
serviceWorker: {
updatePopup: {
message: "发现新内容可用.",
buttonText: "刷新"
}
},
// 当前 locale 的 algolia docsearch 选项
algolia: {},
nav: [
{ text: '嵌套', link: '/zh/nested/' }
],
sidebar: {
'/zh/': [/* ... */],
'/zh/nested/': [/* ... */]
}
}
}
}
}