此页内容

约 276 字小于 1 分钟

2023-06-16

vuepress locales

vuepress 中使用 多语言,首先需要进行以下配置:

import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  // 声明默认的语言
  lang: 'en-US',
  // 多语言下支持的各种语言 locales
  locales: {
    // 配置 不同 path 下的语言
    '/': { lang: 'en-US', title: 'Blog' }, // default
    '/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
  }
})

查看 此文档 获取更多配置信息。

接下来,配置当前主题的 多语言配置项:

theme locales

在本主题中,同样使用 locales 配置项进行多语言配置。

locales 支持 所有主题配置项。

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'

export default defineUserConfig({
  lang: 'en-US',
  locales: {
    '/': { lang: 'en-US', title: 'Blog' }, // default
    '/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
  },
  theme: plumeTheme({
    locales: {
      '/': {
        selectLanguageName: 'English',
        navbar: [
          { text: 'Home', link: '/' },
          { text: 'Blog', link: '/blog/' },
        ]
      },
      '/zh/': {
        selectLanguageName: "简体中文",
        navbar: [
          { text: '首页', link: '/zh/' },
          { text: '博客', link: '/zh/blog/' },
        ]
      }
    }
  })
})

编写文章

sourceDir 下,新建 zh 目录,用于保存多语言文章。

 .{sourceDir}
  - 1.frontend
    - 1.html
    - 2.css
    - 3.javascript
  - 2.backend
  - ops
  - zh
    - 1.前端
      - 1.html
      - 2.css
      - 3.javascript
    - 2.后端
    - 运维