EJS

Traduction IA pour les modèles EJS avec Lingo.dev CLI

Qu'est-ce que EJS ?

EJS (Embedded JavaScript) est un langage de modélisation simple qui vous permet de générer du balisage HTML avec du JavaScript standard. Il est couramment utilisé dans les applications Node.js pour le rendu côté serveur.

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev CLI est une CLI gratuite et open-source pour traduire des applications et du contenu avec l'IA. Elle est conçue pour remplacer les logiciels traditionnels de gestion de traduction tout en s'intégrant aux pipelines existants.

Pour en savoir plus, consultez Vue d'ensemble.

À propos de ce guide

Ce guide explique comment traduire des modèles EJS avec Lingo.dev CLI.

Vous apprendrez comment :

  • Créer un projet à partir de zéro
  • Configurer un pipeline de traduction
  • Générer des traductions avec l'IA

Prérequis

Pour utiliser Lingo.dev CLI, assurez-vous que Node.js v18+ est installé :

❯ node -v
v22.17.0

Étape 1. Configurer un projet

Dans le répertoire de votre projet, créez un fichier i18n.json :

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

Ce fichier définit le comportement du pipeline de traduction, y compris les langues entre lesquelles traduire et où se trouve le contenu localisable dans le système de fichiers.

Pour en savoir plus sur les propriétés disponibles, consultez i18n.json.

Étape 2. Configurer la locale source

La locale source est la langue et la région d'origine dans lesquelles votre contenu a été rédigé. Pour configurer la locale source, définissez la propriété locale.source dans le fichier i18n.json :

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

La locale source doit être fournie sous forme de balise de langue BCP 47.

Pour la liste complète des codes de locale pris en charge par Lingo.dev CLI, consultez Codes de locale pris en charge.

Étape 3. Configurer les locales cibles

Les locales cibles sont les langues et régions vers lesquelles vous souhaitez traduire votre contenu. Pour configurer les locales cibles, définissez la propriété locale.targets dans le fichier i18n.json :

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

Étape 4. Créer le contenu source

Si ce n'est pas déjà fait, créez un ou plusieurs fichiers de modèle EJS contenant le contenu à traduire. Ces fichiers doivent être situés dans un chemin qui inclut la locale source quelque part dans le chemin (par exemple, comme nom de répertoire tel que en/ ou comme partie du nom de fichier comme messages.en.ejs).

Pour les modèles EJS, le contenu traduisible comprend :

  • Le contenu textuel dans les éléments HTML
  • Les valeurs d'attributs (texte alternatif, titres, étiquettes, placeholders, valeurs de boutons)
  • Le texte dans les alert() JavaScript ou autres littéraux de chaîne

Les balises de modèle EJS (<%= %>, <%- %>, <% %>) et les noms de variables sont préservés pendant la traduction.

Par exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>Bon retour !</h1>
    <p>Bonjour, <%= user.name %> ! Vous avez <%= messageCount %> nouveaux messages.</p>
    <form action="/login" method="post">
        <label for="username">Nom d'utilisateur :</label>
        <input type="text" id="username" placeholder="Entrez votre nom d'utilisateur">
    </form>
</body>
</html>

Étape 5. Créer un bucket

  1. Dans le fichier i18n.json, ajoutez un objet "ejs" à l'objet buckets :

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

  2. Dans l'objet "ejs", définissez un tableau d'un ou plusieurs modèles include :

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

    Ces modèles définissent quels fichiers traduire.

    Les modèles eux-mêmes :

    • doivent contenir [locale] comme placeholder pour la locale configurée
    • peuvent pointer vers des chemins de fichiers (par exemple, "[locale]/config.ejs")
    • peuvent utiliser des astérisques comme placeholders génériques (par exemple, "[locale]/*.ejs")

    Les modèles glob récursifs (par exemple, **/*.ejs) ne sont pas pris en charge.

Étape 6. Configurer un LLM

Lingo.dev CLI utilise des grands modèles de langage (LLMs) pour traduire du contenu avec l'IA. Pour utiliser l'un de ces modèles, vous avez besoin d'une clé API d'un fournisseur pris en charge.

Pour démarrer aussi rapidement que possible, nous recommandons d'utiliser Lingo.dev Engine — notre propre plateforme hébergée qui offre 10 000 tokens d'utilisation mensuelle gratuite :

  1. Créez un compte Lingo.dev.

  2. Exécutez la commande suivante :

    npx lingo.dev@latest login

    Cela ouvrira votre navigateur par défaut et vous demandera de vous authentifier.

  3. Suivez les instructions.

Étape 7. Générer les traductions

Dans le répertoire contenant le fichier i18n.json, exécutez la commande suivante :

npx lingo.dev@latest run

Cette commande :

  1. Lit le fichier i18n.json.
  2. Trouve les fichiers qui doivent être traduits.
  3. Extrait le contenu traduisible des fichiers.
  4. Utilise le LLM configuré pour traduire le contenu extrait.
  5. Écrit le contenu traduit dans le système de fichiers.

La première fois que les traductions sont générées, un fichier i18n.lock est créé. Ce fichier garde une trace du contenu qui a été traduit, évitant ainsi des retraductions inutiles lors des exécutions ultérieures.

Exemple

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