zudo-doc

Type to search...

to open search from anywhere

国際化(i18n)

作成2026年3月22日Takeshi Takatsudo

ドキュメントに多言語サポートを追加する

zudo-docはAstroの組み込みi18nルーティングを使用して複数の言語をサポートしています。

仕組み

  • 英語(デフォルト): /docs/... — コンテンツはsrc/content/docs/に格納
  • 日本語: /ja/docs/... — コンテンツはsrc/content/docs-ja/に格納

サイトヘッダーの言語切り替えで、ユーザーは利用可能な言語を切り替えることができます。

設定ベースのロケール構成

ロケールはsrc/config/settings.tsで設定します:

export const settings = {
  // ...
  locales: {
    ja: { label: "JA", dir: "src/content/docs-ja" },
  },
};

各ロケールエントリに対して、zudo-docは自動的に:

  • Astroコンテンツコレクション(docs-{code})を作成
  • Astroのi18nルーティングにロケールを登録
  • 適切なページルートを生成
  • 言語切り替えにロケールを追加

つまり、新しいロケールの追加には設定エントリとコンテンツディレクトリのみが必要です — コレクションやルートの手動セットアップは不要です。

ディレクトリ構造

ローカライズされたドキュメントは英語のディレクトリ構造をミラーします:

src/content/
├── docs/
│   ├── getting-started/
│   │   ├── introduction.mdx
│   │   └── installation.mdx
│   └── guides/
│       └── configuration.mdx
└── docs-ja/
    ├── getting-started/
    │   ├── introduction.mdx
    │   └── installation.mdx
    └── guides/
        └── configuration.mdx

言語切り替え

言語切り替えはヘッダーの右端に表示されます。現在の言語コード(ENまたはJA)と、別の言語に切り替えるためのリンクが表示されます。切り替えは/ja/プレフィックスの追加または削除により、代替URLを自動的に計算します。

UI翻訳キー

zudo-docは組み込みUI文字列に翻訳キーシステムを使用しています。キーは名前空間ごとに整理されています:

  • nav.* — ヘッダーナビゲーションラベル(例:nav.gettingStartednav.guides
  • toc.* — 目次のラベル
  • search.* — 検索ダイアログのテキスト
  • code.* — コードブロックのUI(コピーボタンなど)
  • doc.* — ドキュメントレベルのUI(編集リンク、メタデータラベルなど)

これらのキーにより、コンテンツだけでなくUI全体をすべての設定済み言語でローカライズできます。

Astro設定

i18nルーティングはastro.config.tsで設定されます:

i18n: {
  defaultLocale: "en",
  locales: ["en", ...Object.keys(settings.locales)],
  routing: {
    prefixDefaultLocale: false,
  },
},

prefixDefaultLocale: falseにより、英語ページは言語プレフィックスなし(/docs/...)で配信され、日本語ページは/ja/プレフィックス付き(/ja/docs/...)で配信されます。

📝 Note

astro.config.tslocales配列はsettings.localesから自動的に導出されるため、ロケールの管理は一箇所のみで行えます。

新しい言語の追加

新しい言語(例:韓国語)を追加するには:

  1. settings.tsにロケールを追加:
    locales: {
      ja: { label: "JA", dir: "src/content/docs-ja" },
      ko: { label: "KO", dir: "src/content/docs-ko" },
    },
  2. コンテンツディレクトリを作成:src/content/docs-ko/
  3. 英語のディレクトリ構造をミラーして翻訳ファイルを配置
  4. src/pages/ko/docs/[...slug].astroに新しいページルートを追加(既存のロケールルートからコピー)
  5. 新しいロケール用のUI翻訳を追加

💡 Tip

ステップ1が最も重要です — settings.tsにロケールを追加すると、コンテンツコレクションの作成とi18nルーティングの登録が自動的に行われます。残りのステップはコンテンツとページルートを提供します。

Revision History

AI Assistant

Ask a question about the documentation.