VitePress如何进行多语言配置?

0 阅读2分钟

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" },
    ],
  },

image.png

接下来重点就是配置.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…

在此简单小记一下