Intermediatei18n25 分钟2026年4月18日

静态网站 i18n —— 5 种语言

不用 CMS 的斜杠路由本地化:字典、动态 [locale] 路径、hreflang,以及五种语言保持同步。

架构

/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/ 中写一次文章,在翻译出现之前以每种语言渲染它们。

救你一命的类型技巧

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

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