Перевод 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 локализации JavaScript предоставляет несколько вариантов конфигурации.

Порог перевода

Переводы, достигшие данного порога будут включатьcя в CDN.

Селектор CSS

Задаёт, какие строки из HTML-документов являются переводимыми, смотреть раздел Извлечение строк для Weblate CDN и Локализация HTML с помощью Weblate CDN.

Имя языковой куки

Name of cookie which contains user selected language. Used in the JavaScript snippet for Локализация HTML с помощью Weblate CDN.

Извлечение строк из HTML-файлов

Список файлов в репозитории или URL-адреса, в которых Weblate будет искать переводимые строки, смотреть раздел Извлечение строк для Weblate CDN.

Извлечение строк для Weblate CDN

The translation strings have to be present in Weblate. You can either manage these manually, use API to create them or list files or URLs using Extract strings from HTML files and Weblate will extract them automatically. The files have to present in the repository or contain remote URLs which will be download and parsed regularly by Weblate. Remote URLs are restricted by ALLOWED_ASSET_DOMAINS, including any redirect targets.

При значении параметра Селектор 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>

In case you don’t want to modify existing code, you can also use * as a selector to process all elements.

Примечание

Сейчас извлекается только текст элементов. Это дополнение не поддерживает локализацию атрибутов элементов или элементов с дочерними элементами.

Локализация 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));

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