この記事を英語で読みたい場合は、ここにアクセスしてください
私は最近、ダッシュボード スタイルのプロジェクトを作成するために 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 がアーカイブされているか、もうメンテナンスされていないように見えることです。問題がたくさんあり、最後のコミットは 1 年以上前です。
他のライブラリ (astro-i18n の佳作) を試した後、Paraglide を見つけました。これは私のプロジェクトにとって大きな変革となりました。
私がパラグライダーを選んだ理由:
注: Paraglide は JS プロジェクトでも使用でき、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 で設定し、文字列ファイルを翻訳するだけで、新しい言語を追加できるようになりました。
しかし、解決すべき問題がまだ 2 つあります:
第一言語のリダイレクトの問題を解決するために、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 のメッセージ関数の 2 番目のパラメーターを使用して、これらのメッセージも翻訳できます。
<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 中国語 Web サイトの他の関連記事を参照してください。