Astro i18n Aut 使用教程

Astro i18n Aut 使用教程

astro-i18n-autThe i18n integration for Astro 🧑‍🚀项目地址:https://gitcode.com/gh_mirrors/as/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 进行多语言网站的开发。希望这个教程对你有所帮助!

astro-i18n-autThe i18n integration for Astro 🧑‍🚀项目地址:https://gitcode.com/gh_mirrors/as/astro-i18n-aut

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柯玫艺Harriet

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值