Astro Build で i 用の動的ルート言語を作成する-jsチュートリアル-php.cn

Astro Build で i 用の動的ルート言語を作成する

PHPz

リリース： 2024-08-18 00:00:32

オリジナル

382 人が閲覧しました

Creating dynamic route language for i in 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 を使用します。

挑戦して失敗する

まず、私は i18n に関する Astro レシピを読み、この問題を解決するためにいくつかのコミュニティライブラリをチェックしました。

私が最初にテストしたライブラリは astro-i18next で、まさに私が必要としていたものに似ていました!

astro-i18next は、構成ファイル内の配列に基づいてビルド時に i18n ページを生成するため、コードを一度作成するだけでよく、ページの複製について心配する必要はありません。

問題は、astro-i18next がアーカイブされているか、もうメンテナンスされていないように見えることです。問題はたくさんありますが、最後のコミットは 1 年以上前です。

解決

他のライブラリ (astro-i18n に敬意を表します) を試した後、Paraglide を見つけました。これは私のプロジェクトにとって大きな変革となりました。

私がパラグライダーを選んだ理由:

タイプセーフなので、TypeScript で使用でき、オートコンプリートの恩恵を受けることができます。
i18n 文字列を関数に変換するため、文字列キーが変更されるとビルドが失敗し、エラーが早期に検出されます。
i18n 関数を使用すると、ツリーシェイキングが改善され、未使用の関数が削除されます。
開発エクスペリエンスを強化する VS Code 拡張機能があります。

注: 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 はルートパラメーターから言語を自動的に取得できるようになります。

http://localhost:4321/en/login
http://localhost:4321/pt-br/login

これで、astro.config.ts で設定し、文字列ファイルを翻訳するだけで、新しい言語を追加できるようになりました。

しかし、解決すべき問題がまだ 2 つあります:

ユーザーが言語フラグなしで http://localhost:4321/ に初めてアクセスしたとき。
ユーザーが特定のルートで言語を変更した場合、同じルートに維持する必要があります (例: /en/create-account は /pt-br/create-account または /pt-br/criar にリダイレクトする必要があります) -コンタ).

言語リダイレクト用ミドルウェア

言語リダイレクトの最初の問題を解決するために、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 メッセージ関数の 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>

ログイン後にコピー