Dokumentation / Static HTML

Automatisierte Übersetzung einer statischen HTML-Website

Übersetze eine statische HTML-Website: Kopien erhalten data-i18n-Marker, eine kleine i18n.js tauscht die Sprache aus, und optionale übersetzte Seiten pro Sprache mit hreflang für SEO.

Funktionsweise

Der Text bleibt auf der Seite und erhält einen data-i18n-Marker; eine generierte i18n.js tauscht die Sprache des Besuchers aus. Sätze um Inline-Elemente bleiben ganz.

Setze "htmlPages": true, um auch jede Seite pro Sprache (es/index.html) mit hreflang-Links zu schreiben, damit Suchmaschinen jede Sprache indexieren.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

index.html · vorher

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

index.html · nachher

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

Was das Setup hinzufügt

Der erste Durchlauf richtet eine generierte i18n.js ein, falls das Projekt es noch nicht hat:

i18n.js, verknüpft mit jeder Seite, mit jeder Sprache für Seiten, die direkt aus dem Dateisystem geöffnet werden
Ein optionales <select data-i18n-switcher>-Sprachenmenü

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.