vuepress-theme-plume/docs/notes/theme/guide/国际化.md

title, author, icon, createTime, permalink, tags

title	author	icon	createTime	permalink	tags
国际化	pengzhanbo	material-symbols-light:language	2024/03/05 10:01:26	/guide/international/	指南 i18n

目录

要使用内置的 i18n (国际化) 功能，需要创建类似于下面的目录结构：

::: file-tree

• docs
  • en
    • foo.md
  • fr
    • foo.md
  • foo.md :::

::: important 在不同的语言目录下，请尽量保持文件名和目录名的一致。这有助于在 切换语言时，主题能够正确的导航到 文章 的不同的语言版本。 :::

vuepress 配置

在 .vuepress/config.js 中配置：

import { defineUserConfig } from 'vuepress'

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

主题配置

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

locales 支持 所有主题配置项。

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

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/' },
        ]
      }
    }
  })
})