AstroTable

多言語対応はオプトイン機能です。設定しなければ単一言語サイトとして、ロケールプレフィックスなしのURL(/aboutなど)で動作します。AstroTableはEC以外のサイト(ポートフォリオなど)にも使えることを想定しているため、多言語対応をコアの前提にはしていません。

このサイト自体は、ja(日本語)/ en(英語)の2ロケールを実際にオプトインして使っています。以下は「オプトインした場合」の説明です。

設定

astro.config.mjsにAstro組み込みのi18nルーティングを設定します。

// astro.config.mjs
export default defineConfig({
  i18n: {
    defaultLocale: 'ja',
    locales: ['ja', 'en'],
    routing: { prefixDefaultLocale: true },
  },
});

routing.prefixDefaultLocale: trueにしているため、デフォルトロケール(ja)も含めて全ページがロケールプレフィックス付き(/ja/... /en/...)になります。プレフィックスなしのURLは存在しません。ルート/へのアクセスは、デプロイ環境側のリダイレクト設定で/ja/へ転送します(このサイトではCloudflare(Pages/Workers静的アセット)のpublic/_redirectsを使っています。デプロイのページを参照)。

コンテンツ構成

多言語対応時、コンテンツはロケール名のディレクトリで分かれます。

ディレクトリ構成

  • content/pages/ja/*.md / content/pages/en/*.md — ページ本文
  • content/nav/ja.md / content/nav/en.md — ヘッダーナビゲーション
  • content/footer/ja.md / content/footer/en.md — フッター

ページ本文はロケールごとに完全に別ファイルです。機械翻訳などの自動同期の仕組みは無く、翻訳内容を最新に保つのは運用上の作業になります。

ルーティングの仕組み

コンテンツページ(content/pages/)はsrc/pages/[...slug].astroが、ファイルパス(ja/aboutのような、ロケール込みのid)をそのままURLへマッピングします。ja/indexというファイルは/ja/にルーティングされます。

固定テンプレートのページ(会員ページなど、Content Collections経由ではなく実ファイルとして存在するページ)はsrc/pages/[locale]/...という実ディレクトリ構成になっており、getStaticPaths()でロケールごとの静的パスを生成します。

言語切り替えUI

src/components/LanguageSwitcher.astroが、Astro公式のgetRelativeLocaleUrl()ヘルパーを使って対応ロケール版のURLを生成します。共通レイアウト(Base.astro)がヘッダーナビゲーションの隣に自動で配置します。

import { getRelativeLocaleUrl } from 'astro:i18n';

const LOCALES = ['ja', 'en'] as const; // astro.config.mjsのi18n.localesと同じ値にする

LOCALES定数はastro.config.mjsのi18n.localesと重複した定義です。現状は両方を手動で揃える必要があるため、ロケールを追加・削除する際は両方を更新してください。

新しい翻訳ページを追加する方法

既存ページを別ロケールへ翻訳したい場合は、同じ相対パスで対応するロケールディレクトリにファイルを作成します。たとえばcontent/pages/ja/about.mdを英語化する場合はcontent/pages/en/about.mdを作成し、frontmatter(title/description/pageType)と本文のBlockを翻訳します。ファイル名・ディレクトリ構成をロケール間で一致させておくことで、LanguageSwitcherが生成するURLと実ファイルが対応します。

新しいロケールを追加する場合

  1. astro.config.mjsのi18n.localesに追加する
  2. src/components/LanguageSwitcher.astroのLOCALES定数に追加する
  3. content/pages/<locale>/、content/nav/<locale>.md、content/footer/<locale>.mdを作成する

多言語対応を使わない(削除する)場合

astro.config.mjsからi18n設定を削除し、content/pages/<locale>/のロケールディレクトリをフラットなcontent/pages/*.mdに統合、nav.md/footer.mdもロケール別ファイルではなく単一ファイルに戻します。LanguageSwitcherコンポーネントの呼び出しも共通レイアウトから削除してください。