useIntlayer フックドキュメント

useIntlayer フックを使用すると、Astro アプリケーションでキーを指定してローカライズされた辞書コンテンツを取得できます。

同じインポートパスを使用して、2つの異なるコンテキストで呼び出すことができます。

1. サーバー / フロントマター: .astro ファイル内では、Astro.locals.intlayer に保存されたリクエストロケールを使用して自動的にコンテンツを解決します。
2. ブラウザ / クライアント <script>: クライアントスクリプトまたは UI フレームワークコンポーネント内では、クライアント側のストア実装（vanilla-intlayer）に解決されます。

使用方法

Astro コンポーネントのフロントマター内

---
import { useIntlayer } from "astro-intlayer";

const content = useIntlayer("home");
---

<main>
  <h1>{content.title}</h1>
  <p>{content.description}</p>
</main>

クライアント <script> ブロック内

---
import { useIntlayer } from "astro-intlayer";

const content = useIntlayer("home");
---

<button id="alert-btn">{content.buttonText}</button>

<script>
  import { useIntlayer } from "astro-intlayer";

  const content = useIntlayer("home");

  document.getElementById("alert-btn")?.addEventListener("click", () => {
    alert(content.buttonText);
  });
</script>

パラメーター

useIntlayer(key, localeOrSelector?)

1. key: 辞書の一意のキー（.content.ts 宣言ファイルで定義されたもの）。
2. localeOrSelector（オプション）: 特定のロケールまたはセレクターオブジェクト（{ item }、{ variant }、必要に応じて locale）。指定された場合、リクエストコンテキストまたはクライアントストアから検出されたロケールを上書きします。

説明

フックは以下の処理を実行します。

1. ロケール解決:
   • サーバー上では、astro-intlayer/middleware によって初期化された AsyncLocalStorage スコープを介して Astro.locals.intlayer からアクティブなロケールを読み取ります。
   • ブラウザ上では、クライアントストレージ/ストアからアクティブなロケールを読み取ります。
2. 辞書の取得: 指定されたキーに一致する辞書コンテンツを注入します。
3. 翻訳処理: 翻訳（t()）、列挙、条件、およびマークダウンをレンダリング可能なコンテンツに解決します。

関連ドキュメント

• intlayer 統合
• useDictionary フック
• useLocale フック