# 静态网站 i18n —— 5 种语言

> 不用 CMS 的斜杠路由本地化：字典、动态 [locale] 路径、hreflang，以及五种语言保持同步。
>
> 2026-04-18 — y7.hk

## 架构

```
/en/blog/hello    ← 默认语言，仍带前缀（比特例更干净）
/ru/blog/hello
/zh/blog/hello
/ja/blog/hello
/de/blog/hello
```

三个活动部件：

1. **字典** —— 每种语言一个 JSON，结构相同，类型为 `Record<Locale, typeof en>`，这样键漂移时 TypeScript 会立刻报错。
2. **动态路由** —— `src/pages/[locale]/...`，`getStaticPaths()` 返回所有语言。
3. **内容回退** —— 在 `en/` 中写一次文章，在翻译出现之前以每种语言渲染它们。

## 救你一命的类型技巧

```ts
export type Locale = "en" | "ru" | "zh" | "ja" | "de";
const dictionaries: Record<Locale, typeof en> = { en, ru, zh, ja, de };
```

`typeof en` 就是 schema。往 `en.json` 加一个键，构建就会失败，直到其余四个字典补齐。

## 别忘了 head

每种语言的 `` 加 `x-default`、每页 canonical、以及由 `Astro.url` 推导的路径。搜索引擎奖励的是无聊的管道工程。