Dokumentation / Qwik

Qwik i18n, automatisiert

Lokalisieren Sie eine Qwik-App: Komponenten erhalten useTranslation(), das die Sprache aus der URL mit Qwik City liest, und jede Route erhält eine Kopie pro Sprache.

Funktionsweise

JSX in component$ erhält const { t } = useTranslation(). Die Sprache ist das erste Segment der URL (Qwik Citys useLocation), und jede Route, auch dynamische, erhält eine Kopie pro Sprache.

Ein Satz um einen Link bleibt eine Nachricht, gerendert durch rich() mit den ursprünglichen Elementen.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

src/routes/index.tsx · vorher

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <h1>Welcome to the shop</h1>
      <p>Read the <a href="/faq">FAQ</a> before ordering.</p>
    </>
  );
});

src/routes/index.tsx · nachher

import { component$ } from '@builder.io/qwik';
import { useTranslation, rich } from '../i18n';

export default component$(() => {
  const { t } = useTranslation();
  return (
    <>
      <h1>{t('home.welcome_to_the_shop')}</h1>
      <p>{rich(t('home.read_the_faq_before_ordering'), { a: (c) => <a href="/faq">{c}</a> })}</p>
    </>
  );
});

locales/en.json

{
  "home": {
    "welcome_to_the_shop": "Welcome to the shop",
    "read_the_faq_before_ordering": "Read the <a>FAQ</a> before ordering."
  }
}

Was das Setup hinzufügt

Der erste Durchlauf richtet ein generiertes src/i18n-Modul ein, falls das Projekt es noch nicht hat:

src/i18n.ts mit useTranslation(), localizePath() und gebündelten Lokalen
Eine Kopie jeder Route unter src/routes/<lang>/

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.