Astro i18n Aut 使用教程
项目介绍
Astro i18n Aut 是一个为 Astro 框架提供的国际化(i18n)集成工具。它支持默认语言设置,避免模板文件的重复,并且是适配器和 UI 框架无关的。此外,它还兼容 @astrojs/sitemap,使得多语言网站的构建更加便捷。
项目快速启动
安装
首先,通过 npm 安装 astro-i18n-aut
:
npm install astro-i18n-aut
配置
在你的 Astro 配置文件中进行如下配置:
import { defineConfig } from "astro/config";
import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
import sitemap from "@astrojs/sitemap";
const defaultLocale = "en";
const locales = {
en: "en-US", // 默认语言必须在 locales 中
es: "es-ES",
fr: "fr-CA"
};
export default defineConfig({
site: "https://example.com/",
trailingSlash: "always",
build: {
format: "directory"
},
integrations: [
i18n({ locales, defaultLocale }),
sitemap({
i18n: { locales, defaultLocale },
filter: filterSitemapByDefaultLocale({ defaultLocale })
})
]
});
忽略文件
在你的 .gitignore
文件中添加以下内容:
astro_tmp_pages_*
应用案例和最佳实践
多语言页面渲染
配置完成后,每个 Astro 页面将会根据你设置的其他语言进行额外的渲染。例如,src/pages/about.astro
将会渲染为:
/about/
/es/about/
/fr/about/
如果启用了 redirectDefaultLocale
(默认开启),重定向将会是:
/en/about/
=>/about/
注意事项
需要注意的是,getStaticPaths()
函数只会运行一次,这意味着你不能有翻译后的 URL,如 /es/acerca-de/
对应 /about/
。但这也确保了与 @astrojs/sitemap 的兼容性。
典型生态项目
Astro i18n Aut 与以下项目兼容并协同工作:
- @astrojs/sitemap: 用于生成多语言网站的站点地图。
- Astro Content Collections: 用于管理多语言内容。
通过这些集成,你可以构建一个完整的多语言网站,提供更好的用户体验。
通过以上步骤,你可以快速启动并使用 Astro i18n Aut 进行多语言网站的开发。希望这个教程对你有所帮助!