112 lines
3.0 KiB
Markdown
112 lines
3.0 KiB
Markdown
---
|
||
title: 多国语言配置
|
||
---
|
||
|
||
# {{ $frontmatter.title }}
|
||
|
||
vitepress 1.x 版本采用 0.x 版本的多国语言配置打包 NavBar 会出现错乱问题，暂时放弃研究
|
||
|
||
目前可将 `.vitepress/crowdin-docs/` 目录下 `zh-CN` 或 `en-US` 中的md直接文件复制取出并覆盖docs目录下的md文件
|
||
|
||
:::danger
|
||
适配于 vitepress 1.x.x 版本的功能正在制作，下面是 0.x.x 版本的国际化方案
|
||
:::
|
||
|
||
## Vitepress 0.22.x 多国语言配置
|
||
|
||
你也可以配置多国语言，以首页为例，先在配置文件里配置下 locales，然后创建对应的语言文件夹与文件
|
||
|
||
## 改配置文件
|
||
|
||
需要在 config.ts 中配置 locales，注意 themeConfig 属性里也要配，两个 locales 内容是不一样的
|
||
|
||
themeConfig 中的 locales 配置是为了展示下拉菜单的展示内容
|
||
|
||
根Config 中的 locales 配置是为了展示头部标题内容，description属性可有可无
|
||
|
||
```js
|
||
// .vitepress/config.ts
|
||
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||
// ...
|
||
themeConfig: {
|
||
// ...
|
||
locales: {
|
||
'/zh-CN/': {
|
||
label: '简体中文',
|
||
selectText: '多国语言'
|
||
},
|
||
'/en-US/': {
|
||
label: 'English',
|
||
selectText: 'Languages'
|
||
}
|
||
}
|
||
},
|
||
locales: {
|
||
'/zh-CN/': {
|
||
lang: 'zh-CN',
|
||
title: 'Vuetom 主题',
|
||
description: '为 Vitepress 提供的一款主题'
|
||
},
|
||
'/en-US/': {
|
||
lang: 'en-US',
|
||
title: 'Vuetom Theme',
|
||
description: 'Theme For Vitepress'
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
**locales** 中的属性介绍
|
||
|
||
<b>lang</b>: 会直接设置给 `<html>` 标签
|
||
|
||
<b>title</b>: 不同语言时网站的标题，会替换之前定义的 title
|
||
|
||
<b>description</b>: 不同语言时网站的描述
|
||
|
||
<b>label</b>: 语言选择时展示出来的文本内容（例如：中文或English）
|
||
|
||
<b>selectText</b>: 语言选择时下拉菜单的文本（例如：多国语言或者Languages）
|
||
|
||
## 改首页
|
||
|
||
在 .vitepress 同级目录新建 `zh-CN` 和 `en-US` 文件夹，然后在这个文件夹中分别创建一个 `index.md` 文件
|
||
|
||
**zh-CN/index.md** 中写入 **中文首页** 要展示的内容
|
||
|
||
**en-US/index.md** 中写入 **英文首页** 要展示的内容
|
||
|
||
原来与 .vitepress 同级的 `index.md` 文件中可以改为转发至 `zh-CN/index` 或者 `en-US/index`
|
||
|
||
例如下方的代码，会直接将 `/` 转发到 `/zh-CN/` 这样就会直接前往中文首页了
|
||
|
||
```markdown
|
||
---
|
||
title: 'Vuetom Theme'
|
||
lang: en-US
|
||
page: true
|
||
---
|
||
|
||
<script setup>
|
||
|
||
if (typeof window !== 'undefined') {
|
||
const preferredLang = 'zh-CN'
|
||
window.location.pathname = `/${preferredLang}/`
|
||
}
|
||
|
||
</script>
|
||
```
|
||
|
||
::: warning
|
||
其实原理就是路径前加了一个语言标识，那么就在页面文件外加个语言文件夹就好了<br>
|
||
需要处理的就是书写导航栏和菜单栏时记得要在 link 属性前加上语言标识
|
||
:::
|
||
|
||
下面试试访问一下：
|
||
|
||
访问 localhost:3000/zh-CN/ 会前往中文首页
|
||
|
||
访问 localhost:3000/en-US/ 会前往英文首页
|
||
|
||
访问 localhost:3000 会前往 localhost:3000/zh-CN/
|