EJS

KI-Übersetzung für EJS-Templates mit Lingo.dev CLI

Was ist EJS?

EJS (Embedded JavaScript) ist eine einfache Templating-Sprache, mit der Sie HTML-Markup mit einfachem JavaScript generieren können. Sie wird häufig in Node.js-Anwendungen für serverseitiges Rendering verwendet.

Was ist Lingo.dev CLI?

Lingo.dev CLI ist eine kostenlose, Open-Source-CLI zum Übersetzen von Apps und Inhalten mit KI. Sie wurde entwickelt, um herkömmliche Translation-Management-Software zu ersetzen und sich gleichzeitig in bestehende Pipelines zu integrieren.

Um mehr zu erfahren, siehe Überblick.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie man EJS-Templates 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 die lokalisierbaren Inhalte im Dateisystem existieren.

Um mehr über die verfügbaren Eigenschaften zu erfahren, siehe i18n.json.

Schritt 2. Quell-Locale konfigurieren

Die Quell-Locale ist die ursprüngliche Sprache und Region, in der Ihr Inhalt verfasst wurde. Um die Quell-Locale 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 Quell-Locale muss als BCP 47 Sprach-Tag angegeben werden.

Für die vollständige Liste der Locale-Codes, die Lingo.dev CLI unterstützt, siehe Unterstützte Locale-Codes.

Schritt 3. Konfigurieren der Zielsprachen

Die Zielsprachen sind die Sprachen und Regionen, in die Sie Ihre Inhalte übersetzen möchten. Um die Zielsprachen 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. Erstellen des Quellinhalts

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

Für EJS-Templates umfassen übersetzbare Inhalte:

  • Textinhalte innerhalb von HTML-Elementen
  • Attributwerte (Alt-Text, Titel, Labels, Platzhalter, Button-Werte)
  • Text innerhalb von JavaScript alert() oder anderen String-Literalen

EJS-Template-Tags (<%= %>, <%- %>, <% %>) und Variablennamen werden während der Übersetzung beibehalten.

Zum Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>Willkommen zurück!</h1>
    <p>Hallo, <%= user.name %>! Sie haben <%= messageCount %> neue Nachrichten.</p>
    <form action="/login" method="post">
        <label for="username">Benutzername:</label>
        <input type="text" id="username" placeholder="Benutzernamen eingeben">
    </form>
</body>
</html>

Schritt 5. Bucket erstellen

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

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

  2. Definieren Sie im "ejs"-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": {
    "ejs": {
      "include": ["./[locale]/example.ejs"]
    }
  }
}

    Diese Muster definieren, welche Dateien übersetzt werden sollen.

    Die Muster selbst:

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

    Rekursive Glob-Muster (z.B. **/*.ejs) 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 loszulegen, empfehlen wir die Verwendung von Lingo.dev Engine — unserer eigenen, gehosteten Plattform, die 10.000 Token kostenlose monatliche Nutzung bietet:

  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 bereits übersetzt wurden, und verhindert unnötige Neuübersetzungen bei nachfolgenden Ausführungen.

Beispiel

en/example.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>Welcome back!</h1>
        <p>Hello, <%= user.name %>! You have <%= messageCount %> new messages.</p>
    <% } else { %>
        <h1>Please log in</h1>
        <form action="/login" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" placeholder="Enter username">
            <button type="submit">Sign In</button>
        </form>
    <% } %>
</body>
</html>

es/example.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>¡Bienvenido de nuevo!</h1>
        <p>Hola, <%= user.name %>! Tienes <%= messageCount %> nuevos mensajes.</p>
    <% } else { %>
        <h1>Por favor, inicia sesión</h1>
        <form action="/login" method="post">
            <label for="username">Nombre de usuario:</label>
            <input type="text" id="username" placeholder="Enter username">
            <button type="submit">Iniciar sesión</button>
        </form>
    <% } %>
</body>
</html>

i18n.json

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

i18n.lock

version: 1
checksums:
  21b99a2aea148b309f95ec2c966d326c:
    text_0: e4d2da607604b3fda41eef5e0dd35faa
    text_1: 69eb28c44f7168b1df0455ad2a62588c
    text_2: bff335b01588a8db802bd193c725ec11
    text_3: 0744639a7ac440afe0d792ea79c54512
    text_4: b4cc462fb3a00d2f60deefe548c10a33
    text_5: d0fd310aef9cf3c5827f1db4b0c098a1
    text_6: 85bb1f6fb66b5ab65a9c61469183236e
    text_7: bdbc827b3d224e03394dfd56304500f2
    text_8: 5e8497af456decf6cf716c0a23f1dbc2
    text_9: d572e25ed81420669e65c03925da1001
    text_10: 2cf6537fb69cdd2eb030e55bf4223b93
    text_11: ec7b8f314fe9bc6591006707484ede61
    text_12: c2460fb2a7887fdf2d68db2b553a4338
    text_13: 3abe623951250bd24a9d7799415761ab
    text_14: 988be328b82702586f2cd541858710fe
    text_15: b2328773b0ef0699fd5791055c5cf9e2
    text_16: 92acabd12cd9b63c825294c54fcbc806