”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 使用 Astro Build 创建通往国际化的动态路线 (i)

使用 Astro Build 创建通往国际化的动态路线 (i)

发布于2024-08-22
浏览:683

Criando rotas dinâmicas para internacionalização (i) com Astro Build

如果您想阅读这篇英文文章,请前往此处

我最近开始学习 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,它只在客户端渲染。

尝试与失败

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

我尝试的第一个库是 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";
---

{m.hello({ name: "Alan" })}

然而,这并没有解决我的路由问题——我仍在为我想要添加的每种语言克隆我的页面。

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

我的文件夹结构如下所示:

.
└── 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-account ).

语言重定向中间件

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

在src/middleware/index.ts中,我添加了这段代码:

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

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

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

为了让用户在更改语言时保持相同的路线,我添加了这个组件:

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

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

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






注意事项

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

感谢您阅读本文!如果您有任何疑问,请评论,我很乐意为您解答。

版本声明 本文转载于:https://dev.to/alancpazetto/criando-rotas-dinamicas-para-internacionalizacao-i18n-com-astro-build-1o75?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 将图片浮动到底部右侧并环绕文字的技巧
    将图片浮动到底部右侧并环绕文字的技巧
    在Web设计中围绕在Web设计中,有时可以将图像浮动到页面右下角,从而使文本围绕它缠绕。这可以在有效地展示图像的同时创建一个吸引人的视觉效果。 css位置在右下角,使用css float and clear properties: img { 浮点:对; ...
    编程 发布于2025-07-10
  • 大批
    大批
    [2 数组是对象,因此它们在JS中也具有方法。 切片(开始):在新数组中提取部分数组,而无需突变原始数组。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    编程 发布于2025-07-10
  • 如何在Chrome中居中选择框文本?
    如何在Chrome中居中选择框文本?
    选择框的文本对齐:局部chrome-inly-ly-ly-lyly solument 您可能希望将文本中心集中在选择框中,以获取优化的原因或提高可访问性。但是,在CSS中的选择元素中手动添加一个文本 - 对属性可能无法正常工作。初始尝试 state)</option> < op...
    编程 发布于2025-07-10
  • 为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    在CSS 问题:不正确的代码: 全球范围将所有余量重置为零,如提供的代码所建议的,可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如,在提供的示例中,将以下代码添加到CSS中,将解决余量问题: body H1 { 保证金顶:-40px; } 此方法更精确,避免了由全局保证金重置引...
    编程 发布于2025-07-10
  • 如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在“ dd/mm/yyyy hh:mm:mm:ss.ss”格式“ gormat 解决方案: args)抛出异常{ 日历cal = calendar.getInstance(); SimpleDateFormat SDF =新的SimpleDateFormat(“...
    编程 发布于2025-07-10
  • 可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    [2这里: https://webthemez.com/demo/sticky-multi-header-scroll/index.html &lt;/main&gt; &lt;section&gt; { display:grid; grid-template-...
    编程 发布于2025-07-10
  • 如何高效地在一个事务中插入数据到多个MySQL表?
    如何高效地在一个事务中插入数据到多个MySQL表?
    mySQL插入到多个表中,该数据可能会产生意外的结果。虽然似乎有多个查询可以解决问题,但将从用户表的自动信息ID与配置文件表的手动用户ID相关联提出了挑战。使用Transactions和last_insert_id() 插入用户(用户名,密码)值('test','test...
    编程 发布于2025-07-10
  • 人脸检测失败原因及解决方案:Error -215
    人脸检测失败原因及解决方案:Error -215
    错误处理:解决“ error:((-215)!empty()in Function Multultiscale中的“ openCV 要解决此问题,必须确保提供给HAAR CASCADE XML文件的路径有效。在提供的代码片段中,级联分类器装有硬编码路径,这可能对您的系统不准确。相反,OPENCV提...
    编程 发布于2025-07-10
  • Java为何无法创建泛型数组?
    Java为何无法创建泛型数组?
    通用阵列创建错误 arrayList [2]; JAVA报告了“通用数组创建”错误。为什么不允许这样做?答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<myO...
    编程 发布于2025-07-10
  • 表单刷新后如何防止重复提交?
    表单刷新后如何防止重复提交?
    在Web开发中预防重复提交 在表格提交后刷新页面时,遇到重复提交的问题是常见的。要解决这个问题,请考虑以下方法: 想象一下具有这样的代码段,看起来像这样的代码段:)){ //数据库操作... 回声“操作完成”; 死(); } ?> ...
    编程 发布于2025-07-10
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-07-10
  • 如何在Java的全屏独家模式下处理用户输入?
    如何在Java的全屏独家模式下处理用户输入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    编程 发布于2025-07-10
  • 在Python中如何创建动态变量?
    在Python中如何创建动态变量?
    在Python 中,动态创建变量的功能可以是一种强大的工具,尤其是在使用复杂的数据结构或算法时,Dynamic Variable Creation的动态变量创建。 Python提供了几种创造性的方法来实现这一目标。利用dictionaries 一种有效的方法是利用字典。字典允许您动态创建密钥并分...
    编程 发布于2025-07-10
  • 如何在Java字符串中有效替换多个子字符串?
    如何在Java字符串中有效替换多个子字符串?
    在java 中有效地替换多个substring,需要在需要替换一个字符串中的多个substring的情况下,很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    编程 发布于2025-07-10
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    使用http request 上传文件上传到http server,同时也提交其他参数,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-07-10

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3