多言語対応

組み込みの i18n 機能を使うには、次のようなディレクトリ構成を作成します。

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

次に docs/.vitepress/config.ts で設定します。

docs/.vitepress/config.ts

import { defineConfig } from 'vitepress'

export default defineConfig({
  // 共有のプロパティやトップレベル設定...

  locales: {
    root: {
      label: 'English',
      lang: 'en'
    },
    fr: {
      label: 'French',
      lang: 'fr', // 省略可。最終的に html タグの `lang` 属性として付与されます
      link: '/fr/guide' // デフォルトは /fr/。ナビバーの言語メニューに表示。外部 URL でも可

      // ロケール固有のその他のプロパティ...
    }
  }
})

各ロケール（root を含む）ごとに、次のプロパティを上書きできます。

interface LocaleSpecificConfig<ThemeConfig = any> {
  lang?: string
  dir?: string
  title?: string
  titleTemplate?: string | boolean
  description?: string
  head?: HeadConfig[] // 既存の head とマージ。重複する meta タグは自動的に除去
  themeConfig?: ThemeConfig // シャローにマージ。共通項目はトップレベルの themeConfig に置けます
}

デフォルトテーマのプレースホルダ文言のカスタマイズについては DefaultTheme.Config を参照してください。themeConfig.algolia や themeConfig.carbonAds をロケール単位で上書きしないでください。多言語検索の利用は Algolia ドキュメントを参照。

プロ向けヒント: 設定ファイルは docs/.vitepress/config/index.ts に置くこともできます。ロケールごとに設定ファイルを作成して、index.ts でマージ・エクスポートすると整理しやすくなります。

ロケールごとにディレクトリを分ける

次のような構成でも問題ありません。

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

ただし、VitePress はデフォルトで / から /en/ へのリダイレクトを行いません。これにはサーバー側の設定が必要です。たとえば Netlify では、docs/public/_redirects に次のようなファイルを追加できます。

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

プロ向けヒント: 上記の方法を使う場合、nf_lang クッキーでユーザーの言語選択を保持できます。

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

vue

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import { useData, inBrowser } 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 サポート（実験的）

RTL をサポートするには、設定で dir: 'rtl' を指定し、https://github.com/MohammadYounes/rtlcss、https://github.com/vkalinichev/postcss-rtl、または https://github.com/elchininet/postcss-rtlcss のような RTLCSS 系の PostCSS プラグインを使用してください。CSS の詳細度の問題を避けるため、PostCSS プラグインでは :where([dir="ltr"]) と :where([dir="rtl"]) を接頭辞として使うよう設定してください。

多言語対応 ​

ロケールごとにディレクトリを分ける ​

RTL サポート（実験的） ​

多言語対応

ロケールごとにディレクトリを分ける

RTL サポート（実験的）