Переклад 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));

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