--- title: 多语言 author: pengzhanbo createTime: 2024/03/02 10:07:15 permalink: /config/locales/ --- ## 设置语言 重要 你需要为每个语言设置 `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/': { // 中文配置 // ... }, }, }), }) ```