Перевод HTML и JavaScript с помощью сети доставки содержимого 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-файл в качестве формата файла (на самом деле на этом этапе можно выбрать любой одноязычный формат).
Настройка надстройки Weblate CDN
В надстройка для CDN локолизации есть несколько опций, которые можно настроить.
- Порог перевода
Переводы, достигшие данного порога будут включатьcя в CDN.
- Селектор CSS
Задаёт, какие строки из HTML-документов являются переводимыми, смотреть раздел Извлечение строк для Weblate CDN и Локализация HTML с помощью Weblate CDN.
- Имя языковой куки
Имя cookie с именем выбранного языка. Используется в отрывках JavaScript для локализации HTML.
- Извлечение строк из HTML-файлов
Список файлов в репозитории или URL’ов, в которых Weblate будет искать переводимые строки, смотреть раздел Извлечение строк для Weblate CDN.
Извлечение строк для Weblate CDN
Строки перевода должны присутствовать в Weblate. Вы можете заводить их вручную, использовать для их создания API или перечислить файлы или URL-адреса в параметре Извлечение строк из HTML-файлов и Weblate извлечёт их автоматически. Файлы должны присутствовать в репозитории или содержать удалённые URL-адреса, которые 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 с помощью Weblate CDN
Для локализации HTML-документа вам необходимо загрузить скрипт weblate.js
:
<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>
При загрузке автоматически будут найдены все соответствующие переводимые элементы (на основе настройки из параметра Селектор CSS) и их текст будет заменён переводом.
Язык пользователя определяется из настроенной куки, а при её отсутствии используется один из предпочтительных языков браузера пользователя.
Можно использовать параметр Имя языковой куки для интеграции с другими приложениями (например, выберите django_language
при использовании Django).
Локализация JavaScript
Переводы на отдельные языки представляются в виде двуязычных файлов JSON в сети доставки содержимого. Чтобы их получить, вы можете использовать следующий код:
fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
.then(response => response.json())
.then(data => console.log(data));
В этом случае придётся собственно реализовать саму логику локализации.