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";
---

{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 - 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()}/`, '');
---

• Ir para Português
• Go to English

此外，我們也可以使用 Paraglide 訊息函數中的第二個參數來翻譯這些訊息：

• {m.goToLanguage(undefined, { languageTag: 'pt-br' })}
• {m.goToLanguage(undefined, { languageTag: 'en' })}

注意事項

我不認為我的解決方案是最好的，特別是因為我仍在學習 Astro，所以可能還有其他解決方案。如果您知道，請發表評論，我會嘗試一下:)

感謝您閱讀這篇文章！如果您有任何疑問，請評論，我很樂意回覆。