AstroのドキュメントテンプレートStarlightを使って、複数言語に対応したので備忘録を残します。
<h2 id="starlight%E3%81%AEi18n%E6%A9%9F%E8%83%BD" data-line="3" class="code-line"><a class="header-anchor-link" href="#starlight%E3%81%AEi18n%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> Starlightのi18n機能</h2>
Starlightには、以下のような国際化（i18n）機能が組み込まれています。
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">複数言語のルーティング</li>
<li data-line="8" class="code-line">フォールバックコンテンツ</li>
<li data-line="9" class="code-line">右横書き（RTL）言語のフルサポート</li>
</ul>
これらの機能により、効率的に多言語サイトを構築できます。
<h2 id="i18n%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95" data-line="13" class="code-line"><a class="header-anchor-link" href="#i18n%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95" aria-hidden="true"></a> i18nの設定方法</h2>
<ol data-line="15" class="code-line">
<li data-line="15" class="code-line"><code>astro.config.mjs</code>ファイルで、サポートする言語を指定します。</li>
</ol>
デフォルトの言語(localesに入っている言語以外に対応するための言語)も設定しましょう。
私の場合は、英語（<code>en</code>）と日本語（<code>ja</code>）をサポートし、デフォルトの言語を日本語に設定しました。
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript code-line" data-line="21"># "astro.config.mjs"
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
 integrations: [
 starlight({
 title: 'My Docs',
 defaultLocale: 'ja',
 locales: {
 en: {
 label: 'English',
 },
 ja: {
 label: '日本語',
 },
 // 他の言語を追加
 },
 }),
 ],
});
</code></pre></div><ol start="2" data-line="45" class="code-line">
<li data-line="45" class="code-line"><code>src/content/docs/</code>に各言語のディレクトリを作成します：</li>
</ol>
<div class="code-block-container"><pre><code class="code-line" data-line="47">
- src/
- content/
- docs/
- en/
- ja/
- ... **他の言語ディレクトリ**

</code></pre></div><ol start="3" data-line="58" class="code-line">
<li data-line="58" class="code-line">各言語ディレクトリに、対応するコンテンツファイル(記事)を配置します。</li>
</ol>
同じページには同じファイル名を使用することで、言語間でページを関連付けられます。
特定の言語をパスにプレフィックスを付けずに提供したい場合、ルートロケールを設定できます。
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript code-line" data-line="64"># "astro.config.mjs"
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
integrations: [
 starlight({
 defaultLocale: 'root',
 locales: {
 root: {
 label: '日本語',
 lang: 'ja',
 },
 en: {
 label: 'English',
 lang: 'en',
 },
 },
 });
],
});
</code></pre></div>この場合、日本語のコンテンツは<code>src/content/docs/</code>直下に配置します。
<div class="code-block-container"><pre><code class="code-line" data-line="90">
- src/
- content/
- docs/
- **index.md** **(日本語のindex.md)**
- en/
- **index.md**

</code></pre></div><h2 id="%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84" data-line="101" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84" aria-hidden="true"></a> フォールバックコンテンツ</h2>
未翻訳のページがある場合、Starlightは自動的にデフォルト言語のコンテンツを表示し、未翻訳である旨を通知します。
これにより、コンテンツを段階的に翻訳していくことが可能になります。
<h2 id="ui%E3%81%AE%E7%BF%BB%E8%A8%B3" data-line="106" class="code-line"><a class="header-anchor-link" href="#ui%E3%81%AE%E7%BF%BB%E8%A8%B3" aria-hidden="true"></a> UIの翻訳</h2>
StarlightのデフォルトのUI文字列も翻訳できます。<code>src/content/i18n/</code>に各言語のJSONファイルを作成し、翻訳を追加します。
<div class="code-block-container"><pre class="language-json"><code class="language-json code-line" data-line="110">{
 "search.label": "検索",
 "tableOfContents.onThisPage": "目次",
 // 他の翻訳キー
}
</code></pre></div>詳しくは、<a href="https://starlight.astro.build/ja/guides/i18n/#starlight%E3%81%AEui%E3%82%92%E7%BF%BB%E8%A8%B3%E3%81%99%E3%82%8B" target="_blank" rel="nofollow noopener noreferrer">Starlightのドキュメント</a>を参照してください。

Astro Starlightを国際化(i18n)機能で複数言語に対応する