VuePress多语言支持

来自泡泡学习笔记
BrainBs讨论 | 贡献2023年8月12日 (六) 15:34的版本 (创建页面,内容为“== 站点多语言配置 == 要启用 VuePress 的多语言支持,首先需要使用如下的文件目录结构: <pre>docs ├─ README.md ├─ foo.md ├─ nested │  └─ README.md └─ zh ├─ README.md ├─ foo.md └─ nested    └─ README.md</pre> 然后,在你的配置文件中设置 <code>locales</code> 选项: <pre lang="ts">export default { locales: { // 键名是该语言所属的子路径 // 作…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳到导航 跳到搜索

站点多语言配置

要启用 VuePress 的多语言支持,首先需要使用如下的文件目录结构:

docs
├─ README.md
├─ foo.md
├─ nested
│  └─ README.md
└─ zh
   ├─ README.md
   ├─ foo.md
   └─ nested
      └─ README.md

然后,在你的配置文件中设置 locales 选项:

export default {
  locales: {
    // 键名是该语言所属的子路径
    // 作为特例,默认语言可以使用 '/' 作为其路径。
    '/': {
      lang: 'en-US',
      title: 'VuePress',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'VuePress',
      description: 'Vue 驱动的静态网站生成器',
    },
  },
}

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


主题多语言配置

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

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

import { defaultTheme } from 'vuepress'

export default {
  theme: defaultTheme({
    locales: {
      '/': {
        selectLanguageName: 'English',
      },
      '/zh/': {
        selectLanguageName: '简体中文',
      },
    },
  }),
}