HTML

KI-Übersetzung für HTML-Dateien mit Lingo.dev CLI

Was ist HTML?

HTML (HyperText Markup Language) ist die Standardauszeichnungssprache für die Erstellung von Webseiten und Webanwendungen. Sie verwendet Tags, um Inhalte zu strukturieren und Elemente wie Überschriften, Absätze, Links, Bilder und Formulare zu definieren.

Was ist Lingo.dev CLI?

Lingo.dev CLI ist eine kostenlose, quelloffene CLI zur Übersetzung von Anwendungen und Inhalten mit KI. Sie wurde entwickelt, um herkömmliche Übersetzungsmanagementsoftware zu ersetzen und sich gleichzeitig in bestehende Pipelines zu integrieren.

Weitere Informationen finden Sie unter Überblick.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie man HTML-Dateien mit Lingo.dev CLI übersetzt.

Sie lernen, wie man:

  • Ein Projekt von Grund auf erstellt
  • Eine Übersetzungspipeline konfiguriert
  • Übersetzungen mit KI generiert

Voraussetzungen

Um Lingo.dev CLI zu verwenden, stellen Sie sicher, dass Node.js v18+ installiert ist:

❯ node -v
v22.17.0

Schritt 1. Projekt einrichten

Erstellen Sie in Ihrem Projektverzeichnis eine i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Diese Datei definiert das Verhalten der Übersetzungspipeline, einschließlich der Sprachen, zwischen denen übersetzt werden soll, und wo sich die lokalisierbaren Inhalte im Dateisystem befinden.

Weitere Informationen zu den verfügbaren Eigenschaften finden Sie unter i18n.json.

Schritt 2. Quellsprache konfigurieren

Die Quellsprache ist die ursprüngliche Sprache und Region, in der Ihre Inhalte verfasst wurden. Um die Quellsprache zu konfigurieren, setzen Sie die Eigenschaft locale.source in der i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Die Quellsprache muss als BCP 47 Sprach-Tag angegeben werden.

Eine vollständige Liste der von Lingo.dev CLI unterstützten Sprachcodes finden Sie unter Unterstützte Sprachcodes.

Schritt 3. Ziel-Locales konfigurieren

Die Ziel-Locales sind die Sprachen und Regionen, in die Sie Ihre Inhalte übersetzen möchten. Um die Ziel-Locales zu konfigurieren, setzen Sie die locale.targets-Eigenschaft in der i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Schritt 4. Quellinhalt erstellen

Falls Sie es noch nicht getan haben, erstellen Sie eine oder mehrere HTML-Dateien, die den zu übersetzenden Inhalt enthalten. Diese Dateien müssen sich in einem Pfad befinden, der irgendwo die Quell-Locale enthält (z.B. als Verzeichnisname wie en/ oder als Teil des Dateinamens wie messages.en.html).

Für HTML-Dateien umfassen übersetzbare Inhalte:

  • Textinhalte innerhalb von HTML-Elementen
  • Attributwerte einschließlich:
    • alt-Attribute (Bildbeschreibungen)
    • title-Attribute (Tooltips)
    • placeholder-Attribute (Eingabehinweise)
    • value-Attribute (Schaltflächen- und Eingabewerte)
    • Meta-Tag content-Attribute
  • Das lang-Attribut wird automatisch aktualisiert, um der Ziel-Locale zu entsprechen

Script-Tags, Style-Tags und nicht übersetzbare Attribute bleiben erhalten.

Zum Beispiel:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
  </body>
</html>

Schritt 5. Bucket erstellen

  1. Fügen Sie in der i18n.json-Datei ein "html"-Objekt zum buckets-Objekt hinzu:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {}
  }
}

  2. Definieren Sie im "html"-Objekt ein Array mit einem oder mehreren include-Mustern:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

    Diese Muster definieren, welche Dateien übersetzt werden sollen.

    Die Muster selbst:

    • müssen [locale] als Platzhalter für die konfigurierte Locale enthalten
    • können auf Dateipfade verweisen (z.B. "[locale]/config.html")
    • können Sternchen als Platzhalter verwenden (z.B. "[locale]/*.html")

    Rekursive Glob-Muster (z.B. **/*.html) werden nicht unterstützt.

Schritt 6. Konfigurieren eines LLM

Lingo.dev CLI verwendet große Sprachmodelle (LLMs), um Inhalte mit KI zu übersetzen. Um eines dieser Modelle zu nutzen, benötigen Sie einen API-Schlüssel von einem unterstützten Anbieter.

Um so schnell wie möglich loslegen zu können, empfehlen wir die Verwendung von Lingo.dev Engine — unserer eigenen, gehosteten Plattform, die 10.000 Token kostenlose, monatliche Nutzung anbietet:

  1. Registrieren Sie sich für ein Lingo.dev-Konto.

  2. Führen Sie den folgenden Befehl aus:

    npx lingo.dev@latest login

    Dies öffnet Ihren Standard-Browser und fordert Sie zur Authentifizierung auf.

  3. Folgen Sie den Anweisungen.

Schritt 7. Generieren der Übersetzungen

Führen Sie im Verzeichnis, das die Datei i18n.json enthält, den folgenden Befehl aus:

npx lingo.dev@latest run

Dieser Befehl:

  1. Liest die i18n.json-Datei.
  2. Findet die Dateien, die übersetzt werden müssen.
  3. Extrahiert den übersetzbaren Inhalt aus den Dateien.
  4. Verwendet das konfigurierte LLM, um den extrahierten Inhalt zu übersetzen.
  5. Schreibt den übersetzten Inhalt zurück in das Dateisystem.

Bei der ersten Generierung von Übersetzungen wird eine i18n.lock-Datei erstellt. Diese Datei verfolgt, welche Inhalte übersetzt wurden, und verhindert unnötige Neuübersetzungen bei nachfolgenden Ausführungen.

Beispiel

en/example.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
    <input type="text" placeholder="Enter text here" />
    <a href="#" title="Click for more">Learn more</a>
  </body>
</html>

es/example.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>MyApp - Hola Mundo</title>
    <meta name="description" content="Una aplicación de demostración simple" />
  </head>
  <body>
    <h1>Bienvenido a MyApp</h1>
    <p>¡Hola, mundo! Esta es una demostración simple con <strong>texto en negrita</strong>.</p>
    <img src="example.jpg" alt="Imagen de ejemplo" />
    <input type="text" placeholder="Ingresa texto aquí" />
    <a href="#" title="Haz clic para más">Saber más</a>
  </body>
</html>

i18n.json

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

i18n.lock

version: 1
checksums:
  ab95e8c959a889717f02a05af5c5b1e6:
    head/0/0: 7d39787547365ee4194f29f3f54e5c05
    head/1#content: 49f8864eb0e53903f04532bf33e1e4fa
    head/2#content: c2a1da93efb7e744d100df705e5fcbfd
    head/3#content: d94b318cb327f61f1aea44a6cb1fdcad
    body/0/0: d1c3a9f35e377554a4ccaa467ca26614
    body/1/0: e19afd1952881bdf10063f9478980147
    body/1/1/0: 7cd9256312384858ecba6c29d3c2e550
    body/1/2: ce8b9bb44f031705708a70e068bb73c8
    body/1/3/0: 037d114f19b882f08994712b8d9c1e37
    body/1/4: f05f450fffcb17520c441ab9789f40ce
    body/2/0/0/0: 57d373bcffe2d376cbf9919da30ca30b
    body/3#alt: 68f95fca639f8bf72a4796b6734b02d5
    body/4#alt: cb7d920c3bbcade1c8e0307093f58573
    body/5#placeholder: a05ce3b4578f55e41bd2ad4964f966b4
    body/6#placeholder: a4554ed67c02872e302b0042724f859d
    body/7#title: c903c6985a40ce02d65c90229de35a4e
    body/7/0: e598091d132f890c37a6d4ed94f6d794
    body/8#title: d656021ba5f485fa1a82f8aac6ecc5de
    body/8/0: 1c6856488bd34ad87fcacce2d8e66a0b
    body/9/0: 862964e6cd73cdffdcac622406c6bac9