Astro Build による国際化への動的なルートの作成 (i)-jsチュートリアル-php.cn

Astro Build による国際化への動的なルートの作成 (i)

WBOY

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

オリジナル

1124 人が閲覧しました

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 を使用します。

試みと失敗

まず、私は 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-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()}/`, '');
---

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

ログイン後にコピー