Dokumentacja hooka useIntlayer

Hook useIntlayer pozwala pobierać zlokalizowaną treść słownika na podstawie klucza w aplikacjach Astro.

Może być wywoływany w dwóch różnych kontekstach za pomocą tej samej ścieżki importu:

1. Serwer / Frontmatter: Wewnątrz plików .astro automatycznie ustala treść na podstawie lokalizacji zapytania zapisanej w Astro.locals.intlayer.
2. Przeglądarka / Skrypt klienta <script>: Wewnątrz skryptów klienta lub komponentów frameworków UI korzysta z implementacji magazynu po stronie klienta (vanilla-intlayer).

Użycie

W sekcji frontmatter komponentu Astro

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

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

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

W blokach <script> klienta

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

Parametry

useIntlayer(key, localeOrSelector?)

1. key: Unikalny klucz słownika (zgodnie z definicją w plikach deklaracji .content.ts).
2. localeOrSelector (opcjonalny): Konkretna lokalizacja lub obiekt selektora ({ item }, { variant }, opcjonalnie z locale). Gdy zostanie podany, nadpisuje lokalizację wykrytą z kontekstu zapytania lub magazynu klienta.

Opis

Hook wykonuje następujące zadania:

1. Ustalanie lokalizacji:
   • Na serwerze odczytuje aktywną lokalizację z Astro.locals.intlayer za pośrednictwem zakresu AsyncLocalStorage zainicjowanego przez astro-intlayer/middleware.
   • W przeglądarce odczytuje aktywną lokalizację z magazynu klienta.
2. Pobieranie słownika: Wstrzykuje zawartość słownika pasującą do określonego klucza.
3. Przetwarzanie tłumaczeń: Rozwiązuje tłumaczenia (t()), wyliczenia, warunki i markdown na gotową do wyświetlenia treść.

Powiązana dokumentacja