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 的内容集合功能。

目录结构

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

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

---
import { getCollection } from "astro:content";

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

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

详情请参阅 Astro 文档。

Content Collections | Docs