Documenti / Astro

Astro i18n, automatizzato

Localizza un sito Astro: le pagine .astro ottengono t() dalla lingua dell'URL, ogni pagina statica riceve una copia per lingua per i motori di ricerca, e le isole React, Vue o Svelte seguono.

Come funziona

Testi ed espressioni nei file .astro diventano {t('key')}, con t che legge la lingua dall'URL (/es/about). Ogni pagina riceve una copia per lingua, quindi ogni lingua è una pagina reale, indicizzabile; le rotte dinamiche mantengono i loro getStaticPaths e le props.

Le isole React, Vue e Svelte vengono localizzate nello stesso ciclo di esecuzione, ognuna con la propria libreria, seguendo la lingua della pagina.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

src/pages/products/tea.astro · prima

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

src/pages/products/tea.astro · dopo

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

locales/en.json

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

Cosa aggiunge la configurazione

La prima esecuzione imposta un modulo generato src/i18n (isole: le loro librerie proprie) se il progetto non lo ha ancora:

src/i18n con t, getLangFromUrl e localizePath
Una copia di ogni pagina sotto src/pages/<lang>/, incluse le rotte dinamiche
<html lang dir> impostato dall'URL nelle layout

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.