Astro
将 i1n 与 Astro 集成,用于静态和服务器渲染的多语言网站。
设置
在您的 Astro 项目中运行 i1n init。CLI 会在 locales/ 目录中配置嵌套的 JSON 格式。Astro 项目通常以独立模式使用 i1n SDK。
创建一个实用模块(例如,src/i18n/index.ts),该模块初始化 i1n 并导出一个 useTranslations() 函数。此函数加载适当的区域设置资源并返回类型安全的 t() 函数。
用法
在您的 .astro 页面中,在 frontmatter 中调用 useTranslations(locale) 来获取 t() 函数。使用它在模板中渲染翻译后的字符串。由于 Astro 组件在构建时运行,翻译会静态嵌入到生成的 HTML 中。
按命名空间(例如 common.json、home.json、docs.json)组织翻译,以保持文件易于管理。使用 getLocalePath(locale, path) 为内部导航生成带区域设置前缀的 URL。
静态生成
使用 getStaticPaths() 为所有支持的区域设置生成页面。每个区域设置变体都将构建为单独的 HTML 页面,确保快速加载和最佳 SEO,并带有正确的 hreflang 标签。
在构建步骤中添加 i1n pull,以确保在静态生成之前翻译文件已同步。然后,Astro 的构建过程将自动生成所有区域设置变体。
桥接模式
Astro 项目通常直接使用 i1n SDK,而不是外部 i18n 库。但是,如果您使用框架集成(例如,Astro 内的 React 组件),则可以在这些框架岛中使用 Bridge 模式。
对于 React 岛屿:registerI1n((key, params) => i18next.t(key, params))。对于 Vue 岛屿:registerI1n((key, params) => i18n.global.t(key, params))。Astro shell 和框架岛屿都可以使用它们各自偏好的方法。
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}