VitePress 多语言主要靠 locales 配置 + 分语言目录实现。比如我们分成两个目录en和zh,他们的内容都是相同的,只不过是中英文的两个版本,都有相同的目录和自己的config.js,config.js主要是一些导航,侧边栏导航、底部等themeConfig中配置的内容,其中关于导航路径问题:root默认的不需要加前缀,不是默认的需加上前缀/en,否则发布上线时会出现404问题,如下所示
en目录config.js配置
{
text: "Frontend Nav",
items: [
{ text: "Frontend Hub", link: "/en/site/page" },
{ text: "HTML/CSS", link: "/en/site/html-css" },
{ text: "Frameworks", link: "/en/site/framework" },
],
},
zh目录config.js配置 (不需要加前缀)
{
text: "前端导航",
items: [
{ text: "前端综合", link: "/site/page" },
{ text: "HTML/CSS", link: "/site/html-css" },
{ text: "框架组件", link: "/site/framework" },
],
},
接下来重点就是配置.vitepress/下公用的config.js, 核心配置就是locales, 默认是中文, 经过自己的测试,在本机dev运行过程中发现一定要配置rewrites, 否则页面会有404问题,代码如下:
import llmstxt from "vitepress-plugin-llms";
import zhConfig from "../zh/config";
import enConfig from "../en/config";
export default {
title: "前端吧",
description: "关注web前端开发为主的博客网站和前端网址大全",
outDir: "../dist",
base: "/vitePress-project/",
head: [["link", { rel: "icon", href: "/favicon.ico" }]],
lastUpdated: true,
vite: {
plugins: [llmstxt()],
},
rewrites: {
"zh/:rest*": ":rest*", // 因为默认是中文
},
locales: {
root: { label: "简体中文", lang: "zh-Hans", dir: "ltr", ...zhConfig },
en: { label: "English", lang: "en-US", dir: "ltr", ...enConfig },
},
themeConfig: {
logo: "/logo.png",
siteTitle: false,
// 右侧边栏配置,默认值是"In hac pagina"
outlineTitle: "本页目录",
// 编辑链接
editLink: {
pattern: "https://github.com/msyuan/vitePress-project",
text: "在 github 上编辑此页",
},
// 站点页脚配置
footer: {
// message: "Released under the MIT License",
copyright: "Copyright © 2023-present Lao Yuan",
},
// 社交和项目链接地址配置
socialLinks: [
{ icon: "github", link: "https://github.com/msyuan/vitePress-project" },
],
// 搜索
algolia: {
apiKey: "your_api_key",
indexName: "index_name",
},
//本地搜索
search: {
provider: "local",
},
// returnToTopLabel: "返回顶部", 未生效,所以自己手动写了一些返回顶部的组件
lastUpdatedText: "最后更新",
// 默认是 next page
docFooter: {
prev: "上一篇",
next: "下一篇",
},
},
};
github项目地址:github.com/msyuan/vite…
在线预览效果:msyuan.github.io/vitePress-p…
在此简单小记一下