Astro i18n, automatisiert

Funktionsweise

Text und Ausdrücke in .astro-Dateien werden zu {t('key')}, wobei t die Sprache aus der URL liest (/es/about). Jede Seite erhält eine Kopie pro Sprache, sodass jede Sprache eine echte, indexierbare Seite ist; dynamische Routen behalten ihre getStaticPaths und Props.

React-, Vue- und Svelte-Inseln werden im selben Durchlauf lokalisiert, jede mit ihrer eigenen Bibliothek, entsprechend der Sprache der Seite.

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.

---
import Layout from '../../layouts/Layout.astro';
const product = { name: 'Jasmine tea', stock: 12 };
---
<Layout title="Our teas">
  <h1>{product.name}, picked this spring</h1>
  <p>{product.stock > 0 ? 'In stock' : 'Sold out'}</p>
</Layout>

---
import Layout from '../../layouts/Layout.astro';
import { getLangFromUrl, useTranslations } from '../i18n';
const product = { name: 'Jasmine tea', stock: 12 };
const t = useTranslations(getLangFromUrl(Astro.url));
---
<Layout title={t('tea.our_teas')}>
  <h1>{t('tea.picked_this_spring', { name: product.name })}</h1>
  <p>{product.stock > 0 ? t('tea.in_stock') : t('tea.sold_out')}</p>
</Layout>

{
  "tea": {
    "our_teas": "Our teas",
    "picked_this_spring": "{{name}}, picked this spring",
    "in_stock": "In stock",
    "sold_out": "Sold out"
  }
}

Was das Setup hinzufügt

Der erste Durchlauf richtet ein generiertes src/i18n-Modul (Inseln: ihre eigenen Bibliotheken) ein, falls das Projekt es noch nicht hat:

• src/i18n mit t, getLangFromUrl und localizePath
• Eine Kopie jeder Seite unter src/pages/<lang>/, dynamische Routen eingeschlossen
• <html lang dir> wird aus der URL in Layouts gesetzt

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.