Переклад 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));
У цьому випадку слід реалізувати справжню логіку локалізації.