国际化

这部分内容请参考官方文档

要使用内置的 i18n 功能，需要创建一个目录结构，如下所示：

目录结构

docs/
├─ en/
│  ├─ foo.md
├─ fr/
│  ├─ foo.md
├─ foo.md

配置

import { defineConfig } from 'vitepress';

export default defineConfig({
    locales: {
        root: {
            label: '汉语',
            lang: 'zh-CN',
            link: '/', // 默认是根目录 "/"，可以省略， --显示在导航栏翻译菜单上，可以是外部的
        },
        en: {
            label: 'English',
            lang: 'en', // 可选，将作为`lang`属性添加到`html`标签上
            link: '/en/doc', // 默认是 "/en/"，可以省略， --显示在导航栏翻译菜单上，可以是外部的
        },
        fr: {
            label: 'French',
            lang: 'fr', // 可选，将作为`lang`属性添加到`html`标签上
            link: '/fr/doc', // 默认是 "/fr/"，可以省略， --显示在导航栏翻译菜单上，可以是外部的
        },
    },
});

可以为每个区域设置（包括根目录）覆盖以下属性：

interface LocaleSpecificConfig<ThemeConfig = any> {
    lang?: string;
    dir?: string;
    title?: string;
    titleTemplate?: string | boolean;
    description?: string;
    head?: HeadConfig[]; // 将与现有的头条目合并，重复的Meta标记将自动删除
    themeConfig?: ThemeConfig; // 将被浅合并，常见的东西可以放在顶级的 themeConfig 条目中
}

自定义默认主题的占位符文本，详见 DefaultTheme.Config 界面。不要在本地化级别覆盖 themeConfig.algolia 或 themeConfig.carbonAds。请参阅 Algolia 文档以使用多语言搜索。

专业提示：

配置文件也可以存储在 docs/.vitepress/config/index.ts。它可以帮助您通过为每个区域设置创建配置文件来组织内容，然后从 index.ts 合并和导出它们。

为每个区域设置单独的目录

以下是一个完美的精细结构：

结构

docs/
├─ zh/
│  ├─ foo.md
├─ en/
│  ├─ foo.md
├─ fr/
   ├─ foo.md

配置

import { defineConfig } from 'vitepress';

export default defineConfig({
    locales: {
        root: {
            label: '汉语',
            lang: 'zh-CN',
            link: '/zh/', // 默认是根目录 "/" --显示在导航栏翻译菜单上，可以是外部的
        },
        en: {
            label: 'English',
            lang: 'en', // 可选，将作为`lang`属性添加到`html`标签上
            link: '/en/doc', // 默认是 "/en/" --显示在导航栏翻译菜单上，可以是外部的
        },
        fr: {
            label: 'French',
            lang: 'fr', // 可选，将作为`lang`属性添加到`html`标签上
            link: '/fr/doc', // 默认是 "/fr/" --显示在导航栏翻译菜单上，可以是外部的
        },
    },
});

但是，VitePress 默认不会将/重定向到/en/。您需要为此配置服务器。例如，在 Netlify 上，您可以添加一个像这样的 docs/public/_redirects 文件：

/*  /es/:splat  302  Language=es
/*  /fr/:splat  302  Language=fr
/*  /en/:splat  302

专业提示：

如果使用上述方法，您可以使用 nf_lang cookie 来持久化用户的语言选择。一个非常基本的方法是在自定义主题的设置函数中注册一个观察者：

// docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme';

export default {
    ...DefaultTheme,
    setup() {
        const { lang } = useData();
        watchEffect(() => {
            if (inBrowser) {
                document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2024 00:00:00 UTC; path=/`;
            }
        });
    },
};

RTL 支持（实验）

具体请阅读官方文档