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，它改变了我的项目。
我选择滑翔伞是因为：
注意：您也可以在 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 可以自动从路线参数中获取语言：
现在，我只需在 astro.config.ts 中设置新语言并翻译我的字符串文件即可添加新语言。
但是我还有两个问题需要解决：
为了解决第一个问题语言重定向，我使用了 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中文网其他相关文章！
