autorenew

Astro i18n Starter

ページの追加

Astro i18n Starter で多言語のページを作成する方法はいくつか存在します。

言語ごとにファイルを分けたい場合

pages の下に言語ごとにフォルダを作成し、Astro形式やMarkdown形式でファイルを追加します。

src/pages
├── en/
│   └── page-1.astro
│   └── page-2.mdx
└── ja/
     └── page-1.astro
     └── page-2.mdx

以下のページが生成されます

ひとつのファイルで管理したい場合

ページ内の文章量があまり多くない場合は、Astroの動的ルーティング機能を使用して、ひとつのファイルから動的に各言語のページを生成できます。

src/pages
└── [lang]/
    └── page-1.astro
    └── page-2.astro

ファイルの中で LOCALES オブジェクトをインポートし、Astroの getStaticPaths() 関数により動的ルートを生成します。

---
import { LOCALES } from "@/i18n";

export const getStaticPaths = () =>
  Object.keys(LOCALES).map((lang) => ({
    params: { lang },
  }));
---

以下のページが生成されます

Content Collection を利用したい場合

ブログやニュース等のページをMarkdownファイルで管理したい場合は、Astroのコンテンツコレクション機能を利用できます。

Directory

src/
├── content/
│   ├── config.ts
│   ├── blog/en/
│   │   └── first-post.md
│   │   └── second-post.md
│   └── blog/ja/
│        └── first-post.md
│        └── second-post.md
└── pages/[lang]/blog/
     └── index.astro
     └── [...slug].astro

pages/[lang]/blog/[…slug].astro

---
import Layout from "@/layouts/Article.astro";
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");

  return posts.map((post) => {
    const [lang, ...slug] = post.slug.split("/");
    return { params: { lang, slug: slug.join("/") || undefined }, props: post };
  });
}
---

詳しくはAstroのドキュメントをご確認ください。

Content Collections | Docs