vitepress多语言国际化配置

1.vitepress官方文档地址：https://vitepress.dev/guide/what-is-vitepress

2.国际化配置：

在vitepress中内置i18n功能，当我们在开发文档时可直接使用，需要创建如下目录

docs/

|——zh/ 

|      |——foo.md

|——en/

|      |——foo.md

/*这里zh代表我们的中文文档文件夹，en代表我们英文文档文件夹*/

然后在docs/.vitepress/config.ts

import { defineConfig } from 'vitepress'

export default defineConfig({
  locales: {
    zh: {
      label: '简体中文',
      lang: 'zh'
    },
    en: {
      label: 'English',
      lang: 'en',
      link: '/en/foo' // 跳转到英文文档页面，当然也可以是外部的
    }
  }
})

当然这只是简单的对多语言切换的配置，如果需要在当前页面进行语言切换可以在config.ts设置关闭i18n路由(参考下面theme.ts内部配置)

另外设置如下目录结构

进阶配置

docs/

|——.vitepress

|        |——src

|        |——config.ts

在src文件夹中,我们可以配置一些我们想要的内容和功能，在src文件夹中设置如下目录

src/

|——configs

|       |——en.ts

|       |——zh.ts

|——navs

|       |——en.ts

|       |——zh.ts

|——sidebars

|       |——en.ts

|       |——zh.ts

|——docs.ts

|——head.ts

|——theme.ts

 首先介绍一下每个文件的用途（zh与en为中英文切换的语言内部设置一致，以下不再特别显示）

navs——主页顶部（不要忘记en.ts）

import type { DefaultTheme } from "vitepress";

export default function getNavs() {

  return [

    { text: "主页", link: "/" },

    {

      text: "关于",

      items: [

        {

          text: "团队",

          link: "/zh/examples/about/team",

          activeMatch: "/about/team",

        },

        {

          text: "常见问题",

          link: "/zh/examples/about/problem",

          activeMatch: "/about/problem",

        },

      ],

      activeMatch: "/zh/examples/about/", // // 当前页面处于匹配路径下时, 对应导航菜单将突出显示

    },

  ]

};

sidebars——文档内部左侧目录（不要忘记en.ts）

export const sidebar = [

  {

    text: "简介",

    items: [

      { text: "开始", link: "/zh/examples/introduction/markdown" },

      { text: "功能", link: "/zh/examples/introduction/build" },

      { text: "比较", link: "/zh/examples/api/test" },

    ],

  },

];

 

docs.ts——文档配置

export const docsConfig = {

  title: "我的博客",

  description: "document",

  // lang: 'en',

  lang: "zh",

};

head.ts——标头配置

import type { HeadConfig } from "vitepress";

export const head: HeadConfig[] = [

  [

    "link",

    {

      rel: "icon",

      //开发时识别

      href: "/assets/favicon.ico",

    },

  ],

  ],

];

theme.ts——搜索配置

import type { DefaultTheme } from "vitepress";

export const themeConfig: DefaultTheme.Config = {

  logo: "/img/alemon.jpg",

  // i18n路由

  i18nRouting: false,

  // 搜索配置（二选一）

  search: {

    // 本地离线搜索

    provider: "local",

    // 多语言搜索配置

    options: {

      locales: {

        /* 默认语言 */

        zh: {

          translations: {

            button: {

              buttonText: "搜索",

              buttonAriaLabel: "搜索文档",

            },

            modal: {

              noResultsText: "无法找到相关结果",

              resetButtonTitle: "清除查询结果",

              footer: {

                selectText: "选择",

                navigateText: "切换",

              },

            },

          },

        },

        en: {

          translations: {

            button: {

              buttonText: "Search",

              buttonAriaLabel: "Search for Documents",

            },

            modal: {

              noResultsText: "Unable to find relevant results",

              resetButtonTitle: "Clear Query Results",

              footer: {

                selectText: "select",

                navigateText: "switch",

              },

            },

          },

        },

      },

    },

  },

};

configs——文档内部按钮，最终配置混合（不要忘记en.ts）

import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'

//引入以上配置 是英文界面需要修改zh为en

import getNavs  from "../nav/zh";

import {sidebar} from '../sidebar/zh'

export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {

    themeConfig: {

      lastUpdatedText: '上次更新',

      returnToTopLabel: '返回顶部',

        // 文档页脚文本配置

      docFooter: {

        prev: '上一页',

        next: '下一页'

      },

    //   editLink: {

    //     pattern: '路径地址',

    //     text: '对本页提出修改建议',

    //   },

     logo: "/img/alemon.jpg",

     nav: getNavs(),

     sidebar,

     outline: {

       level: "deep", // 右侧大纲标题层级

       label: "目录", // 右侧大纲标题文本配置

     },

       },

  }

以上配置项设置之后在config.ts中 可引入配置

import { defineConfig } from "vitepress";

import { docsConfig } from "./src/docs";

import { themeConfig } from "./src/theme";

import { head } from "./src/head";

//配置的英文文档设置

import { enConfig } from './src/configs/en'

//配置的中文文档设置

import { zhConfig } from './src/configs/zh'

export default defineConfig({

  /* 文档配置 */

  ...docsConfig,

  /* 标头配置 */

  head,

  /* 主题配置 */

  themeConfig,

  /* 语言配置 */

  locales: {

    zh: { label: '简体中文', lang: 'zh-CN', link: '/index', ...zhConfig },

    en: { label: 'English', lang: 'en-US', link: '/en/', ...enConfig },

  },

});

以上为vitepress多语言切换配置，博主是前端菜鸟有错误可尽管提出 希望前辈们多多指教 感谢支持