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

在主题内实现 ==国际化== 只需要进行一些简单的配置。

举一个例子，创建一个 默认语言为 **中文**，并包含 **英语** 和 **法语** 的项目。

## 目录

首先，需要创建类似于下面的目录结构：

::: file-tree

- docs
  - en
    - foo.md
    - README.md  \# 英文首页
  - fr
    - foo.md
    - README.md  \# 法文首页
  - foo.md
  - README.md  \# 中文首页
:::

其中，`docs/en/` 用于保存 **英文** 文档，`docs/fr/` 保存 **法文** 文档，而 **中文** 则直接保存在 `docs/` 下。

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

## vuepress 配置

接下来，在 `.vuepress/config.js` 中配置：

```js
import { defineUserConfig } from 'vuepress'

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

`locales` 中的 `key` 对应着 `docs` 目录下的语言路径，同时，`key` 也将作为 不同语言的页面访问链接的前缀。

## 主题配置

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

`locales` 支持 所有主题配置项。

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

export default defineUserConfig({
  lang: 'zh-CN',
  locales: {
    '/': { lang: 'zh-CN', title: '博客' }, // 默认语言 为 简体中文
    '/en/': { lang: 'en-US', title: 'Blog' }, // 英文
    '/fr/': { lang: 'fr-FR', title: 'Le blog' }, // 法语
  },
  theme: plumeTheme({
    // 主题内的多语言配置
    locales: {
      '/': {
        // 当前语言显示在导航栏多语言下拉菜单的文本
        selectLanguageName: '简体中文',
        navbar: [
          { text: '首页', link: '/' },
          { text: '博客', link: '/blog/' },
        ]
      },
      '/en/': {
        selectLanguageName: 'English',
        navbar: [
          { text: 'Home', link: '/en/' },
          { text: 'Blog', link: '/en/blog/' },
        ]
      },
      '/fr/': {
        selectLanguageName: 'Français',
        navbar: [
          { text: 'Accueil', link: '/fr/' },
          { text: 'Le Blog', link: '/fr/blog/' },
        ]
      }
    }
  })
})
```

更多 `locales` 配置请查看 [主题配置 > Locales 配置](../config/主题配置.md#locale-配置)