在 Astro Build 中为 i 创建动态路线语言

Se quiser ler esse artigo em Portugês clique aqui

最近，我开始学习 Astro 创建一个类似仪表板的项目。

我真的很想在这个项目中实现国际化（i18n）——这个想法是每个人都应该能够使用它，无论他们的语言是什么。

问题

Astro 对 i18n 的支持相当好。它的工作原理类似于 Next.js 或任何其他基于文件/文件夹结构进行路由的框架。

所以，如果我们想要一个英语页面和葡萄牙语页面，我们可以这样组织我们的文件：

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

每个页面都有自己的 i18n 字符串 - 很好！

但这就是我的问题开始的地方：我不想克隆我的所有页面；我只想更改这些页面上的字符串。

我需要类似 /[any-language-flag]/all-my-routes 的东西。

你可能会问：“为什么不使用像react-intl这样的东西呢？”我的答案是，我想充分利用 Astro 的引擎，尤其是 SSG/SSR，并避免任何客户端组件。一般来说，这些框架使用React Context，仅在客户端渲染。

尝试与失败

首先，我阅读了关于 i18n 的 Astro 食谱，并查看了一些社区库来解决这个问题。

我测试的第一个库是 astro-i18next，它看起来正是我所需要的！

基于配置文件中的数组，astro-i18next 在构建时生成我的 i18n 页面，因此我只需要编写一次代码，而不必担心克隆页面。

问题是 astro-i18next 似乎已存档或不再维护。问题很多，最后一次提交已经是一年多前了。

解决方案

在尝试其他库（值得赞扬的是 astro-i18n）后，我发现了 Paraglide，它改变了我的项目。

我选择滑翔伞是因为：

• 它是类型安全的，因此我可以将它与 TypeScript 一起使用并受益于自动完成功能。
• 它将 i18n 字符串转换为函数，因此如果字符串键发生更改，我的构建将会失败，从而尽早捕获错误。
• 使用 i18n 函数可以更好地进行树摇动，删除未使用的函数。
• 有一个 VS Code 扩展可以增强开发体验。

注意：您也可以在 JS 项目中使用 Paraglide，并且它还支持 Next.js。

安装和配置后，我使用了这样的消息：

---
import * as m from "../paraglide/messages.js";
---

<h1>{m.hello({ name: "Alan" })}</h1>

但是，这并没有解决我的路由问题 - 我仍在为我想要添加的每种语言克隆我的页面。

为了解决这个问题，我将项目更改为在根路由中使用动态路由，因此我的所有路由现在都以语言标志开头。

我的文件夹结构变成了这样：

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

此更改后，Paraglide 可以自动从路线参数中获取语言：

• http://localhost:4321/en/login
• http://localhost:4321/pt-br/login

现在，我只需在 astro.config.ts 中设置新语言并翻译我的字符串文件即可添加新语言。

但是我还有两个问题需要解决：

1. 当用户第一次访问 http://localhost:4321/ 时没有语言标志。
2. 如果用户更改特定路线上的语言，我需要将它们保持在同一路线上（例如，/en/create-account 应重定向到 /pt-br/create-account 或 /pt-br/criar -conta）。

语言重定向中间件

为了解决第一个问题语言重定向，我使用了 Astro 中间件。

在 src/middleware/index.ts 中，我添加了以下代码：

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

具有当前路线的语言选择器

为了让用户在切换语言时保持相同的路线，我添加了这个组件：

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

<ul>
  <li>
    <a href={`/pt-br/${pathName}`}>Ir para Português</a>
  </li>
  <li>
    <a href={`/en/${pathName}`}>Go to English</a>
  </li>
</ul>

此外，我们也可以使用 Paraglide 消息函数中的第二个参数来翻译这些消息：

<ul>
  <li>
    <a href={`/pt-br/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'pt-br' })}</a>
  </li>
  <li>
    <a href={`/en/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'en' })}</a>
  </li>
</ul>

注意事项

我不认为我的解决方案是最好的，特别是因为我还在学习 Astro，所以可能还有其他解决方案。如果您知道，请评论，我会尝试一下:)

感谢您阅读这篇文章！如果您有任何疑问，请评论，我很乐意回复。

以上是在 Astro Build 中为 i 创建动态路线语言的详细内容。更多信息请关注PHP中文网其他相关文章！