如果想閱讀這篇英文文章,請點這裡
我最近開始學習 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,它改變了我的專案。
我選滑翔傘是因為:
注意:您也可以在 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) => { // 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()}/`, ''); --- <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中文網其他相關文章!