多语言支持

站点多语言配置

要启用 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

然后，在你的 配置文件 中设置 locales 选项：

  1. module.exports = {
  2.   locales: {
  3.     // 键名是该语言所属的子路径
  4.     // 作为特例，默认语言可以使用 '/' 作为其路径。
  5.     '/': {
  6.       lang: 'en-US',
  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. }

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

::: tip 配置参考： locales :::

主题多语言配置

VuePress 没有限制主题如何提供多语言支持，因此每个主题可能会有不同的多语言配置方式，而且部分主题可能不会提供多语言支持。建议你查看主题本身的文档来获取更详细的指引。

如果你使用的是默认主题，那么它提供多语言支持的方式和上述是一致的：

  1. const { defaultTheme } = require('vuepress')
  3. module.exports = {
  4.   theme: defaultTheme({
  5.     locales: {
  6.       '/': {
  7.         selectLanguageName: 'English',
  8.       },
  9.       '/zh/': {
  10.         selectLanguageName: '简体中文',
  11.       },
  12.     },
  13.   }),
  14. }

::: tip 配置参考： 默认主题 > locales :::