Docs / Static HTML

Traduire un site HTML statique, automatisé

Traduire un site HTML statique : la copie reçoit des marqueurs data-i18n, un petit i18n.js échange dans chaque langue, et des pages traduites optionnelles par langue avec hreflang pour le SEO.

Comment ça marche

Le texte reste sur la page et reçoit un marqueur data-i18n ; un i18n.js généré échange dans la langue du visiteur. Les phrases autour des éléments en ligne restent entières.

Définissez "htmlPages": true pour écrire également chaque page traduite par langue (es/index.html) avec des liens hreflang, afin que les moteurs de recherche indexent chaque langue.

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.

index.html · avant

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

index.html · après

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

Ce que l'installation ajoute

La première exécution configure un i18n.js généré si le projet ne l'a pas encore :

i18n.js, lié à chaque page, avec toutes les langues embarquées pour les pages ouvertes depuis le disque
Un menu de langues optionnel <select data-i18n-switcher>

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.