Переклад HTML і JavaScript за допомогою CDN Weblate

Починаючи з версії Weblate 4.2 можна експортувати локалізацію до CDN за допомогою додатка CDN локалізації JavaScript.

Примітка

Цю можливість налаштовано на Hosted Weblate. Вона потребує додаткового налаштовування у вашому екземплярі, див. LOCALIZE_CDN_URL і LOCALIZE_CDN_PATH.

Після встановлення до вашого складника він записуватиме внесені переклади (див. «Ліниві» внески) до CDN. Цим можна скористатися для локалізації ваших вебсторінок.

Створення складника

Спочатку вам слід створити одномовний складник, який міститиме усі рядки, див. розділ Додавання проєктів і складників перекладу, де наведено загальні настанови щодо цього.

Якщо у вас на початку вже є сховище коду (наприклад, сховище, яке містить усі файли HTML), створіть у сховищі порожній файл JSON для початкової мови (див. Джерельна мова), наприклад locales/en.json. Вмістом цього файла має бути пара дужок {}, яка позначає порожній об’єкт. Щойно файл буде створено, сховище можна буде імпортувати до Weblate, після чого ви зможете розпочати налаштовування додатка.

Підказка

Якщо у вас вже є наявні переклади, ви можете зберегти їх до мовних файлів JSON, і ці дані буде використано у Weblate.

Якщо ви не хочете користуватися наявним сховищем (або не маєте такого), виберіть Почати спочатку при створенні складника і виберіть формат файла файл JSON (на цьому кроці можна вибрати будь-який одномовний формат).

Налаштовування додатка CDN Weblate

Для додатка CDN локалізації JavaScript передбачено декілька параметрів налаштовування.

Порогове значення перекладу

Переклади із рівнем, який перевищує це порогове значення, буде включено до CDN.

Вибір CSS

Налаштовує, які рядки з документів HTML є придатними до перекладу, див. Видобування рядків для CDN Weblate і Локалізація HTML за допомогою CDN Weblate.

Назва куки мови

Назва куки, яка містить вибрану користувачем мову. Використовується у фрагменті JavaScript для Локалізація HTML за допомогою CDN Weblate.

Видобути рядки з файлів HTML

Список файлів у сховищі або адрес, де Weblate шукатиме придатні до перекладу рядки і пропонуватиме їх для перекладу, див. Видобування рядків для CDN Weblate.

Видобування рядків для CDN Weblate

Рядки перекладу мають бути на Weblate. Ви можете досягти цього або вручну за допомогою створення записів з програмного інтерфейсу, або вказавши адреси за допомогою поля Видобути рядки з файлів HTML (Weblate виконає видобування рядків автоматично). Файли мають зберігатися у сховищі коду або містити віддалені адреси, дані з яких може бути отримано і оброблено Weblate на регулярній основі.

За типових налаштувань Селектор CSS видобуває елементи із класом CSS l10n. Наприклад, буде видобуто два рядки з таких фрагментів коду:

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

Якщо ви не хочете модифікувати наявний код, ви можете також скористатися * як селектором для обробки таких елементів.

Примітка

У поточній версії видобуватиметься лише текст елементів. У цьому додатку не передбачено підтримки локалізації атрибутів елементів або елементів із дочірніми записами.

Локалізація HTML за допомогою CDN Weblate

Щоб локалізувати документ HTML, вам слід завантажити скрипт weblate.js:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

Після завантаження він автоматично знайде усі відповідні придатні до перекладу елементи (на основі налаштувань селектора CSS) і замінить їх текст на переклад.

Мова користувача визначається за налаштованою кукою і резервним варіантом — бажаною мовою користувача, яку налаштовано у браузері.

Назва куки мови може бути корисною для інтеграції з іншими застосунками (наприклад, можна вибрати django_language, якщо використовується Django).

Локалізація JavaScript

Доступ до окремих перекладів у CDN надається у форматі двомовних файлів JSON. Отримати файл можна за допомогою такого коду:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

У цьому випадку слід реалізувати справжню логіку локалізації.