Internationalization
Site Level i18n Config
To leverage multi-language support in VuePress, you first need to use the following file structure:
docs
├─ README.md
├─ foo.md
├─ nested
│ └─ README.md
└─ zh
├─ README.md
├─ foo.md
└─ nested
└─ README.md
Then, specify the locales option in .vuepress/config.js:
module.exports = {
locales: {
// The key is the path for the locale to be nested under.
// As a special case, the default locale can use '/' as its path.
'/': {
lang: 'en-US', // this will be set as the lang attribute on <html>
title: 'VuePress',
description: 'Vue-powered Static Site Generator'
},
'/zh/': {
lang: 'zh-CN',
title: 'VuePress',
description: 'Vue 驱动的静态网站生成器'
}
}
}
If a locale does not have title or description VuePress will fallback to the root level values. You can omit the root level title and description as long as they are provided in each locale.
Default Theme i18n Config
The default theme also has built-in i18n support via themeConfig.locales, using the same { path: config } format. Each locale can have its own nav and sidebar config, in addition to a few other text values used across the site:
module.exports = {
locales: { /* ... */ },
themeConfig: {
locales: {
'/': {
// text for the language dropdown
selectText: 'Languages',
// label for this locale in the language dropdown
label: 'English',
// text for the edit-on-github link
editLinkText: 'Edit this page on GitHub',
// config for Service Worker
serviceWorker: {
updatePopup: {
message: "New content is available.",
buttonText: "Refresh"
}
},
// algolia docsearch options for current locale
algolia: {},
nav: [
{ text: 'Nested', link: '/nested/' }
],
sidebar: {
'/': [/* ... */],
'/nested/': [/* ... */]
}
},
'/zh/': {
selectText: '选择语言',
label: '简体中文',
editLinkText: '在 GitHub 上编辑此页',
serviceWorker: {
updatePopup: {
message: "发现新内容可用.",
buttonText: "刷新"
}
},
nav: [
{ text: '嵌套', link: '/zh/nested/' }
],
algolia: {},
sidebar: {
'/zh/': [/* ... */],
'/zh/nested/': [/* ... */]
}
}
}
}
}