Astro i18n, automatisé

Comment ça marche

Le texte et les expressions dans les fichiers .astro deviennent {t('key')}, t lisant la langue de l'URL (/es/about). Chaque page obtient une copie par langue, de sorte que chaque langue est une page réelle et indexable ; les routes dynamiques conservent leurs getStaticPaths et props.

Les îles React, Vue et Svelte sont localisées lors de la même exécution, chacune avec sa propre bibliothèque, suivant la langue de la page.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

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

Ce que l'installation ajoute

La première exécution configure un module src/i18n généré (îles : leurs propres bibliothèques) si le projet ne l'a pas encore :

• src/i18n avec t, getLangFromUrl et localizePath
• Une copie de chaque page sous src/pages/<lang>/, routes dynamiques incluses
• <html lang dir> défini depuis l'URL dans les mises en page

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

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

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.