国 际化
docs/
├─ es/
│ ├─ foo.md
├─ fr/
│ ├─ foo.md
├─ foo.md
docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'
export default defineConfig({
// 共 享 属性 和 其他顶层内容 ...
locales: {
root: {
label: 'English',
lang: 'en'
},
fr: {
label: 'French',
lang: 'fr', // 可 选,将 作 为 `lang` 属性 添加 到 `html` 标签中
link: '/fr/guide' // 默 认 /fr/ -- 显示在 导航栏翻译菜单上,可 以是外部 的
// 其余 locale 特定 属性 ...
}
}
})
interface LocaleSpecificConfig<ThemeConfig = any> {
lang?: string
dir?: string
title?: string
titleTemplate?: string | boolean
description?: string
head?: HeadConfig[] // 将 与 现有的 头部条目 合 并,重 复的元 标签将 自 动删除
themeConfig?: ThemeConfig // 会 进行浅 层合并,常 见内容 可 放 在 顶层的 themeConfig 属性 中
}
DefaultTheme.Config
themeConfig.algolia
themeConfig.carbonAds
。
docs/.vitepress/config/index.ts
。index.ts
为本地 化 设置子 目 录
docs/
├─ en/
│ ├─ foo.md
├─ es/
│ ├─ foo.md
├─ fr/
├─ foo.md
/
/en/
。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'
import Layout from './Layout.vue'
export default {
extends: DefaultTheme,
Layout
}
<!-- docs/.vitepress/theme/Layout.vue -->
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress'
import { watchEffect } from 'vue'
const { lang } = useData()
watchEffect(() => {
if (inBrowser) {
document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
}
})
</script>
<template>
<DefaultTheme.Layout />
</template>
RTL 支持 (实验性 功 能 )
dir: 'rtl'
并且:where([dir="ltr"])
:where([dir="rtl"])