vuepress-theme-plume/docs/notes/theme/config/多语言配置.md

---
title: 多语言
author: pengzhanbo
createTime: 2024/03/02 10:07:15
permalink: /config/locales/
---

## 设置语言 <Badge type="danger">重要</Badge>

你需要为每个语言设置 `lang` 选项。即使你只在使用单个语言，你也必须在 `.vuepress/config.{js,ts}` 中设置 `lang`。

::: tip 为什么要这样做?
要提供正确的语言环境文本，主题需要知道根文件夹以及每个多语言文件夹正在使用哪种语言。
:::

::: code-tabs
@tab 单语言

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

export default defineUserConfig({
  // 设置正在使用的语言
  lang: 'zh-CN',
})
```

@tab 多语言

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

export default defineUserConfig({
  locales: {
    '/': {
      // 设置正在使用的语言
      lang: 'zh-CN',
    },
    '/en/': {
      // 设置正在使用的语言
      lang: 'en-US',
    },
  },
})
```

:::

## 多语言配置

`locales` 是一个对象，其键为每个语言的路径前缀，值为该语言的配置，可以包含 `title`, `description`, `lang` 等。

你应当为每个语言设置 `lang` 选项，以便主题和插件能够正确的处理它们。

如果站点和主题配置中的 `locales` 对象只包含 "/" 一个键，则主题不会显示语言切换菜单。当你通过 `locales` 设置多个键，即存在多个语言的时候，我们会在导航栏显示语言切换菜单。

## 语言适配

主题默认适配了以下语言

- 简体中文 (zh-CN)
- 英文(美国) (en-US)

::: tip

如果您希望支持更多语言，欢迎通过
[PR](https://github.com/pengzhanbo/vuepress-theme-plume/pulls?q=sort%3Aupdated-desc+is%3Apr+is%3Aopen) 在 主题仓库的 `/theme/src/node/locales` 目录中按照相同的方式添加语言。

:::

## 为每个语言设置主题选项

与站点配置和 `@vuepress/theme-default` 的主题配置相同，`vuepress-theme-plume` 也支持你在主题选项中设置 locale 选项，并为每种语言设置不同的配置。

```ts :no-line-numbers
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  locales: {
    '/': {
      lang: 'en-US',
    },
    '/zh/': {
      lang: 'zh-CN',
    },
  },

  theme: plumeTheme({
    // 通用配置
    // ...
    locales: {
      '/': {
        // 英文配置
        // ...
      },
      '/zh/': {
        // 中文配置
        // ...
      },
    },
  }),
})
```

**使用主题配置文件：**

::: code-tabs
@tab .vuepress/config.ts

```ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  locales: {
    '/': {
      lang: 'en-US',
    },
    '/zh/': {
      lang: 'zh-CN',
    },
  },

  theme: plumeTheme(),
})
```

@tab .vuepress/plume.config.ts

```ts
import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  // 通用配置
  // ...
  locales: {
    '/': {
      // 英文配置
      // ...
    },
    '/zh/': {
      // 中文配置
      // ...
    },
  },
})
```

:::