EJS - Lingo.dev CLI

Что такое EJS?

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

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

Lingo.dev 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.

Для полного списка кодов локалей, поддерживаемых 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-элементов
Значения атрибутов (альтернативный текст, заголовки, метки, заполнители, значения кнопок)
Текст внутри JavaScript-функций, таких как alert(), или других строковых литералов

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

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>Добро пожаловать обратно!</h1>
    <p>Привет, <%= user.name %>! У вас <%= messageCount %> новых сообщений.</p>
    <form action="/login" method="post">
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" placeholder="Введите имя пользователя">
    </form>
</body>
</html>

Шаг 5. Создание корзины

В файле 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")
Рекурсивные шаблоны с глобами (например, **/*.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>

ru/example.ejs

<!DOCTYPE html>
<html lang="ru">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>С возвращением!</h1>
        <p>Привет, <%= user.name %>! У вас <%= messageCount %> новых сообщений.</p>
    <% } else { %>
        <h1>Пожалуйста, войдите</h1>
        <form action="/login" method="post">
            <label for="username">Имя пользователя:</label>
            <input type="text" id="username" placeholder="Введите имя пользователя">
            <button type="submit">Войти</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