多语言
571字约2分钟
2024-03-02
设置语言 重要
你需要为每个语言设置 lang
选项。即使你只在使用单个语言,你也必须在 .vuepress/config.{js,ts}
中设置 lang
。
为什么要这样做?
要提供正确的语言环境文本,主题需要知道根文件夹以及每个多语言文件夹正在使用哪种语言。
单语言
import { defineUserConfig } from 'vuepress'
export default defineUserConfig({
// 设置正在使用的语言
lang: 'zh-CN',
})
多语言
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)
提示
如果您希望支持更多语言,欢迎通过 PR 在 主题仓库的 /theme/src/node/locales
目录中按照相同的方式添加语言。
为每个语言设置主题选项
与站点配置和 @vuepress/theme-default
的主题配置相同,vuepress-theme-plume
也支持你在主题选项中设置 locale 选项,并为每种语言设置不同的配置。
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/': {
// 中文配置
// ...
},
},
}),
})
使用主题配置文件:
.vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
locales: {
'/': {
lang: 'en-US',
},
'/zh/': {
lang: 'zh-CN',
},
},
theme: plumeTheme(),
})
.vuepress/plume.config.ts
import { defineThemeConfig } from 'vuepress-theme-plume'
export default defineThemeConfig({
// 通用配置
// ...
locales: {
'/': {
// 英文配置
// ...
},
'/zh/': {
// 中文配置
// ...
},
},
})