Перевод HTML и JavaScript с помощью сети доставки содержимого Weblate

Начиная с версии Weblate 4.2, локализацию можно экспортировать в CDN с помощью надстройки «CDN локализации JavaScript’а».

Примечание

Эта функциональность уже включена на Hosted Weblate. На вашей установке она требует дополнительной настройки, смотрите описание параметров LOCALIZE_CDN_URL и LOCALIZE_CDN_PATH.

При включении её в вашем компоненте она будет отправлять закоммиченные переводы (см. Отложенные коммиты) в CDN; и их можно будет использовать для локализации прямо на ваших web-страницах.

Создание компонента

Сначала вам нужно будет создать одноязычный компонент, который будет содержать ваши строки; общие инструкции по этому поводу смотрите в главе «Добавление проектов и компонентов перевода».

Если у вас уже есть существующий репозиторий, с которого можно начать (например, тот, в котором хранятся 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));

В этом случае придётся собственно реализовать саму логику локализации.