# Astro i18n 技能 ## 目的为针对多个市场/语言的潜在客户生成网站提供国际化模式。实现基于 URL 的路由（`/en/`、`/de/`、`/fr/`）、翻译管理、使用 hreflang 标签进行 SEO 优化以及 RTL 支持。 ## 核心规则 1. **首先是 URL 结构** — `/en/`、`/de/`、`/fr/` 前缀用于 SEO 和用户清晰度 2. **优雅地回退** - 缺少翻译默认为主要语言，并带有控制台警告 3. **hreflang 标签** — 每个页面都需要正确的语言替代 4. **RTL 支持** — 对阿拉伯语/希伯来语使用逻辑 CSS 属性 (margin-inline-start) 5. **保留偏好** — 将用户的语言选择存储在 localStorage/cookie 中 6. **类型安全翻译** — 使用 TypeScript 获取语言代码和翻译键 7. **无硬编码文本** - 所有面向用户的字符串必须来自翻译文件 8. **SEO 元数据** — 翻译每种语言的标题、描述、og:locale 9. **内容对等**——每种语言都应该具有相同的内容结构 10. **Intl API 格式化** — 使用本机 Intl 表示每个区域的日期、数字、货币 ## 实施概述组件|目的|地点 ---|---|--- `语言` 配置 |定义支持的语言环境+元数据 | `src/i18n/config.ts` 翻译文件|带有嵌套键的 JSON | `src/i18n/translations/{lang}.json` `t()` 函数 |带有后备+参数的翻译| `src/i18n/utils.ts` `[lang]/` 路线 |动态 URL 段 | `src/pages/[lang]/` 语言切换器 |下拉组件|布局中的组件 hreflang 标签 | SEO 语言替代 | BaseLayout 中的 `` 中间件|可选的浏览器检测 | `src/middleware.ts` ## 快速入门 ### 最小配置 // src/i18n/config.ts 导出常量语言 = { en: { name: 'English', code: 'en-GB', dir: 'ltr' }, de: { 名称: 'Deutsch', 代码: 'de-DE', 目录: 'ltr' }, 作为常量；导出 const defaultLang = 'en'; 导出类型 Lang = keyof typeof languages; ### 翻译用法 --- 从 '@/i18n/utils' 导入 { t }； const lang = getLangFromUrl(Astro.url); ---

{t(lang, '英雄.标题')}

{t(lang, '英雄.subtitle')}

### 动态路线 --- // src/pages/[lang]/index.astro 导出函数 getStaticPaths() { return Object.keys(languages).map(lang => ({ params: { lang } })); } --- ## 参考文献 **配置和设置：** * [config.md]() \- 语言配置、翻译文件、实用程序 **路由和 URL：** * [routing.md]() \- 动态路由、重定向、中间件 **组件：** * [components.md]() \- 基本布局、语言切换器 **内容和收藏：** * [content-collections.md]() \- 多语言博客文章 **格式：** * [formatters.md]() \- 每个语言环境的数字、日期、货币 **RTL 支持：** * [rtl-support.md]() \- 阿拉伯语/希伯来语布局支持 **搜索引擎优化：** * [seo.md]() \- hreflang、开放图谱、站点地图 ## 禁止 * ❌ 组件中的硬编码文本（使用 `t()` 函数） * ❌ 页面上缺少 hreflang 标签 * ❌ 自动翻译，无需人工审核 * ❌ 相同内容的不同 URL，没有 hreflang 链接 * ❌ 忽略阿拉伯语/希伯来语的劳教要求 * ❌ 查询参数中的区域设置 (`?lang=de`) 而不是路径 (`/de/`) * ❌ 使用左/右 CSS 代替逻辑属性 * ❌ 忘记翻译元描述和标题 ## 完成的定义 * 定义了所有支持的语言环境的语言配置 * 每种语言的翻译 JSON 文件，具有完整的密钥覆盖 * `t()` 实用函数，可回退到默认语言 * 使用 `[lang]/` 动态段的基于 URL 的语言路由 * 所有页面上的 hreflang 标签都指向替代语言 * 导航中的语言切换组件 * 根`/`重定向到默认语言 * 浏览器语言检测（可选，通过中间件） * 如果针对阿拉伯语/希伯来语则实施 RTL 支持 * 使用 Intl API 按语言环境格式化日期/数字/货币 * 包含特定语言条目的内容集合 * 所有面向用户的文本都提取到翻译文件中 * 翻译的 SEO 元标签（标题、描述、og:locale）

Astro国际化

包含技能