Documenti / Static HTML

Traduzione di un sito web statico HTML, automatizzata

Traduzione di un sito HTML statico: il contenuto riceve marcatori data-i18n, un piccolo file i18n.js sostituisce il testo per ogni lingua e pagine tradotte opzionali per lingua con hreflang per l'ottimizzazione SEO.

Come funziona

Il testo rimane nella pagina e riceve un marchio data-i18n; un i18n.js generato sostituisce il testo nella lingua dell'utente. Le frasi intorno agli elementi inline rimangono complete.

Imposta "htmlPages": true per generare anche ogni pagina tradotta per lingua (es/index.html) con collegamenti hreflang, in modo che i motori di ricerca indichino tutte le lingue.

Prima e dopo

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

index.html · prima

<h1>Send money anywhere</h1>
<p>Transfers arrive in <strong>minutes</strong>, not days.</p>
<input placeholder="Your email address" />

index.html · dopo

<h1 data-i18n="home.send_money_anywhere">Send money anywhere</h1>
<p data-i18n="home.transfers_arrive_in_minutes_not">Transfers arrive in <strong>minutes</strong>, not days.</p>
<input placeholder="Your email address" data-i18n-placeholder="home.your_email_address" />

locales/en.json

{
  "home": {
    "send_money_anywhere": "Send money anywhere",
    "transfers_arrive_in_minutes_not": "Transfers arrive in <strong>minutes</strong>, not days.",
    "your_email_address": "Your email address"
  }
}

Cosa aggiunge la configurazione

La prima esecuzione imposta un file i18n.js generato se il progetto non lo ha ancora:

i18n.js, linkato da ogni pagina, con tutte le lingue raggruppate per le pagine aperte da disco
Un menu delle lingue <select data-i18n-switcher> opzionale

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.