|
|
# 多言語対応 {#internationalization}
|
|
|
|
|
|
組み込みの i18n 機能を使うには、次のようなディレクトリ構成を作成します。
|
|
|
|
|
|
```
|
|
|
docs/
|
|
|
├─ es/
|
|
|
│ ├─ foo.md
|
|
|
├─ fr/
|
|
|
│ ├─ foo.md
|
|
|
├─ foo.md
|
|
|
```
|
|
|
|
|
|
次に `docs/.vitepress/config.ts` で設定します。
|
|
|
|
|
|
```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 を含む）ごとに、次のプロパティを上書きできます。
|
|
|
|
|
|
```ts
|
|
|
interface LocaleSpecificConfig<ThemeConfig = any> {
|
|
|
lang?: string
|
|
|
dir?: string
|
|
|
title?: string
|
|
|
titleTemplate?: string | boolean
|
|
|
description?: string
|
|
|
head?: HeadConfig[] // 既存の head とマージ。重複する meta タグは自動的に除去
|
|
|
themeConfig?: ThemeConfig // シャローにマージ。共通項目はトップレベルの themeConfig に置けます
|
|
|
}
|
|
|
```
|
|
|
|
|
|
デフォルトテーマのプレースホルダ文言のカスタマイズについては [`DefaultTheme.Config`](https://github.com/vuejs/vitepress/blob/main/types/default-theme.d.ts) を参照してください。`themeConfig.algolia` や `themeConfig.carbonAds` をロケール単位で上書きしないでください。多言語検索の利用は [Algolia ドキュメント](../reference/default-theme-search#i18n) を参照。
|
|
|
|
|
|
**プロ向けヒント:** 設定ファイルは `docs/.vitepress/config/index.ts` に置くこともできます。ロケールごとに設定ファイルを作成して、`index.ts` でマージ・エクスポートすると整理しやすくなります。
|
|
|
|
|
|
## ロケールごとにディレクトリを分ける {#separate-directory-for-each-locale}
|
|
|
|
|
|
次のような構成でも問題ありません。
|
|
|
|
|
|
```
|
|
|
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` クッキーでユーザーの言語選択を保持できます。
|
|
|
|
|
|
```ts [docs/.vitepress/theme/index.ts]
|
|
|
import DefaultTheme from 'vitepress/theme'
|
|
|
import Layout from './Layout.vue'
|
|
|
|
|
|
export default {
|
|
|
extends: DefaultTheme,
|
|
|
Layout
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```vue [docs/.vitepress/theme/Layout.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-support-experimental}
|
|
|
|
|
|
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"])` を接頭辞として使うよう設定してください。
|
