mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
94 lines
2.2 KiB
Markdown
94 lines
2.2 KiB
Markdown
---
|
|
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)
|
|
|
|
## 为每个语言设置主题选项
|
|
|
|
与站点配置和 `@vuepress/theme-default` 的主题配置相同，`vuepress-theme-plume` 也支持你在主题选项中设置 locale 选项，并为每种语言设置不同的配置。
|
|
|
|
```ts
|
|
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/': {
|
|
// 中文配置
|
|
// ...
|
|
},
|
|
},
|
|
}),
|
|
})
|
|
```
|