Documentación / Static HTML

Traducir un sitio web HTML estático, automáticamente

Traducir un sitio HTML estático: copia obtiene marcadores data-i18n, un pequeño i18n.js intercambia en cada idioma, y páginas traducidas opcionales por idioma con hreflang para SEO.

Cómo funciona

El texto permanece en la página y recibe un marcador data-i18n; un i18n.js generado intercambia en el idioma del visitante. Las oraciones alrededor de elementos en línea permanecen completas.

Configura "htmlPages": true para también escribir cada página traducida por idioma (es/index.html) con enlaces hreflang, para que los motores de búsqueda indexen cada idioma.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

index.html · antes

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

index.html · despué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"
  }
}

Lo que añade la configuración

La primera ejecución configura un i18n.js generado si el proyecto aún no lo tiene:

i18n.js, vinculado desde cada página, con todos los idiomas empaquetados para páginas abiertas desde el disco
Un menú de idiomas opcional <select data-i18n-switcher>

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.