EJS

Traducción con IA para plantillas EJS con Lingo.dev CLI

¿Qué es EJS?

EJS (JavaScript Embebido) es un lenguaje de plantillas simple que te permite generar marcado HTML con JavaScript plano. Se utiliza comúnmente en aplicaciones Node.js para renderizado del lado del servidor.

¿Qué es Lingo.dev CLI?

Lingo.dev CLI es una CLI gratuita y de código abierto para traducir aplicaciones y contenido con IA. Está diseñada para reemplazar el software tradicional de gestión de traducciones mientras se integra con los flujos de trabajo existentes.

Para saber más, consulta Descripción general.

Acerca de esta guía

Esta guía explica cómo traducir plantillas EJS con Lingo.dev CLI.

Aprenderás cómo:

  • Crear un proyecto desde cero
  • Configurar un flujo de trabajo de traducción
  • Generar traducciones con IA

Requisitos previos

Para usar Lingo.dev CLI, asegúrate de tener instalado Node.js v18+:

❯ node -v
v22.17.0

Paso 1. Configurar un proyecto

En el directorio de tu proyecto, crea un archivo i18n.json:

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

Este archivo define el comportamiento del flujo de trabajo de traducción, incluyendo entre qué idiomas traducir y dónde existe el contenido localizable en el sistema de archivos.

Para obtener más información sobre las propiedades disponibles, consulta i18n.json.

Paso 2. Configurar el idioma de origen

El idioma de origen es el idioma y región original en que se escribió tu contenido. Para configurar el idioma de origen, establece la propiedad locale.source en el archivo i18n.json:

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

El idioma de origen debe proporcionarse como una etiqueta de idioma BCP 47.

Para la lista completa de códigos de idioma que Lingo.dev CLI soporta, consulta Códigos de idioma soportados.

Paso 3. Configurar los idiomas de destino

Los idiomas de destino son los idiomas y regiones a los que deseas traducir tu contenido. Para configurar los idiomas de destino, establece la propiedad locale.targets en el archivo i18n.json:

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

Paso 4. Crear el contenido de origen

Si aún no lo has hecho, crea uno o más archivos de plantilla EJS que contengan el contenido a traducir. Estos archivos deben estar ubicados en una ruta que incluya el idioma de origen en alguna parte de la ruta (por ejemplo, como un nombre de directorio como en/ o como parte del nombre del archivo como messages.en.ejs).

Para las plantillas EJS, el contenido traducible incluye:

  • Contenido de texto dentro de elementos HTML
  • Valores de atributos (texto alternativo, títulos, etiquetas, marcadores de posición, valores de botones)
  • Texto dentro de alert() de JavaScript u otras cadenas literales

Las etiquetas de plantilla EJS (<%= %>, <%- %>, <% %>) y los nombres de variables se conservan durante la traducción.

Por ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>¡Bienvenido de nuevo!</h1>
    <p>¡Hola, <%= user.name %>! Tienes <%= messageCount %> mensajes nuevos.</p>
    <form action="/login" method="post">
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" placeholder="Introduce nombre de usuario">
    </form>
</body>
</html>

Paso 5. Crear un bucket

  1. En el archivo i18n.json, añade un objeto "ejs" al objeto buckets:

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

  2. En el objeto "ejs", define un array de uno o más patrones include:

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

    Estos patrones definen qué archivos traducir.

    Los patrones en sí:

    • deben contener [locale] como marcador de posición para el idioma configurado
    • pueden apuntar a rutas de archivo (por ejemplo, "[locale]/config.ejs")
    • pueden usar asteriscos como comodines (por ejemplo, "[locale]/*.ejs")

    Los patrones glob recursivos (por ejemplo, **/*.ejs) no son compatibles.

Paso 6. Configurar un LLM

Lingo.dev CLI utiliza modelos de lenguaje de gran tamaño (LLMs) para traducir contenido con IA. Para usar uno de estos modelos, necesitas una clave API de un proveedor compatible.

Para comenzar lo más rápido posible, recomendamos usar Lingo.dev Engine — nuestra propia plataforma alojada que ofrece 10,000 tokens de uso mensual gratuito:

  1. Regístrate para obtener una cuenta de Lingo.dev.

  2. Ejecuta el siguiente comando:

    npx lingo.dev@latest login

    Esto abrirá tu navegador predeterminado y te pedirá que te autentiques.

  3. Sigue las instrucciones.

Paso 7. Generar las traducciones

En el directorio que contiene el archivo i18n.json, ejecuta el siguiente comando:

npx lingo.dev@latest run

Este comando:

  1. Lee el archivo i18n.json.
  2. Encuentra los archivos que necesitan ser traducidos.
  3. Extrae el contenido traducible de los archivos.
  4. Utiliza el LLM configurado para traducir el contenido extraído.
  5. Escribe el contenido traducido de vuelta al sistema de archivos.

La primera vez que se generan traducciones, se crea un archivo i18n.lock. Este archivo realiza un seguimiento del contenido que ha sido traducido, evitando retraducciones innecesarias en ejecuciones posteriores.

Ejemplo

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