EJS - Lingo.dev CLI

Что такое EJS?

EJS (Embedded JavaScript) — это простой язык шаблонов, который позволяет генерировать HTML-разметку с помощью обычного JavaScript. Обычно используется в приложениях Node.js для серверного рендеринга.

Что такое Lingo.dev CLI?

Lingo.dev CLI — это бесплатный open-source CLI для перевода приложений и контента с помощью ИИ. Он создан, чтобы заменить традиционные системы управления переводами и легко интегрируется в существующие пайплайны.

Подробнее см. в разделе Обзор.

О данном руководстве

В этом гайде рассказывается, как переводить EJS-шаблоны с помощью Lingo.dev CLI.

Вы узнаете, как:

Создать проект с нуля
Настроить пайплайн перевода
Генерировать переводы с помощью ИИ

Необходимые условия

Для использования Lingo.dev CLI убедитесь, что установлен Node.js v18+:

❯ node -v
v22.17.0

Шаг 1. Создайте проект

В директории вашего проекта создайте файл i18n.json:

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

Этот файл определяет поведение пайплайна перевода: какие языки использовать и где на файловой системе находится локализуемый контент.

Подробнее о доступных свойствах см. в разделе i18n.json.

Шаг 2. Настройте исходную локаль

Исходная локаль — это оригинальный язык и регион, на которых был написан ваш контент. Чтобы настроить исходную локаль, укажите свойство locale.source в файле i18n.json:

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

Исходная локаль должна быть указана в формате BCP 47 language tag.

Полный список поддерживаемых кодов локалей для Lingo.dev CLI см. в разделе Поддерживаемые коды локалей.

Шаг 3. Настройте целевые локали

Целевые локали — это языки и регионы, на которые вы хотите перевести свой контент. Чтобы настроить целевые локали, укажите свойство locale.targets в файле i18n.json:

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

Шаг 4. Создайте исходный контент

Если вы ещё не сделали этого, создайте один или несколько файлов шаблонов EJS, которые содержат переводимый контент. Эти файлы должны находиться по пути, который включает исходную локаль (например, как имя каталога en/ или как часть имени файла messages.en.ejs).

В шаблонах EJS переводимым контентом являются:

Текст внутри HTML-элементов
Значения атрибутов (alt-текст, заголовки, подписи, плейсхолдеры, значения кнопок)
Текст внутри JavaScript alert() или других строковых литералов

Теги шаблонов EJS (<%= %>, <%- %>, <% %>) и имена переменных сохраняются при переводе.

Например:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>Welcome back!</h1>
    <p>Hello, <%= user.name %>! You have <%= messageCount %> new messages.</p>
    <form action="/login" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" placeholder="Enter username">
    </form>
</body>
</html>

Шаг 5. Создайте bucket

В файле i18n.json добавьте объект "ejs" в объект buckets:

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

В объекте "ejs" определите массив из одного или нескольких паттернов include:
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "ejs": {
      "include": ["./[locale]/example.ejs"]
    }
  }
}
```
Эти паттерны определяют, какие файлы переводить.

Сами паттерны:
- должны содержать [locale] как плейсхолдер для выбранной локали
- могут указывать на пути к файлам (например, "[locale]/config.ejs")
- могут использовать звёздочки как плейсхолдеры (например, "[locale]/*.ejs")
Рекурсивные glob-паттерны (например, **/*.ejs) не поддерживаются.

Шаг 6. Настройте LLM

Lingo.dev CLI использует большие языковые модели (LLM) для перевода контента с помощью ИИ. Чтобы использовать одну из этих моделей, вам нужен API-ключ от поддерживаемого провайдера.

Чтобы быстро начать работу, рекомендуем использовать Lingo.dev Engine — нашу собственную платформу, которая предоставляет 10 000 токенов бесплатного использования каждый месяц:

Зарегистрируйтесь в Lingo.dev.
Выполните следующую команду:
```
npx lingo.dev@latest login
```
Откроется ваш браузер по умолчанию и появится запрос на аутентификацию.
Следуйте инструкциям.

Шаг 7. Генерация переводов

В каталоге, где находится файл i18n.json, выполните следующую команду:

npx lingo.dev@latest run

Эта команда:

Считывает файл i18n.json.
Находит файлы, которые нужно перевести.
Извлекает переводимый контент из файлов.
Использует настроенную LLM для перевода извлечённого контента.
Записывает переведённый контент обратно в файловую систему.

При первой генерации переводов создаётся файл i18n.lock. Этот файл отслеживает, какой контент уже переведён, чтобы избежать лишних повторных переводов при следующих запусках.

Пример

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