vitepress国际化
时间: 2024-12-28 14:19:53 浏览: 170
### VitePress 国际化配置和多语言支持
为了在 VitePress 中实现国际化,可以通过修改 `config.ts` 文件来设置多语言支持。以下是具体的配置方法:
#### 配置文件调整
编辑 `.vitepress/config.ts` 文件,在其中定义多个语言版本的路径以及对应的本地化信息。
```typescript
import { defineConfig } from 'vitepress'
export default defineConfig({
locales: {
root: { label: 'English', lang: 'en-US' },
zh: { label: '中文', lang: 'zh-CN' }
},
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide/' },
{ text: 'Config', link: '/config/' }
],
sidebar: {
'/': [
{
text: 'Introduction',
items: [{ text: 'What is VitePress?', link: '/' }]
}
]
}
}
})
```
上述代码片段展示了如何通过 `locales` 属性指定不同语言环境及其标签[^1]。
对于每种语言的内容页面,则按照如下结构放置于相应目录下:
- `/guide/index.md`: 英文版指南首页
- `/zh/guide/index.md`: 中文版指南首页
这样当访问者浏览站点时可以选择切换不同的语言版本查看对应的语言内容[^4]。
另外值得注意的是,如果要让导航栏也支持多国语显示,可以在 `themeConfig.nav` 或其他地方利用 `$withBase()` 函数配合当前 locale 来动态加载合适的文案资源[^3]。
阅读全文
相关推荐


















