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

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

Примечание

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

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

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

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

Если у вас есть существующий репозиторий для начала (например, тот, который содержит файлы HTML), создайте в репозитории пустой файл JSON для исходного языка (см. comComponent-source_language), например locales /en.json. Содержимое должно быть {}, чтобы указать пустой объект. Как только вы это сделаете, репозиторий можно будет импортировать в Weblate и начать с настройки надстройки.

Подсказка

Если у вас уже есть существующий перевод, то вы можете поместить его в JSON-файлы для соответствующих языков, которые будут использоваться в Weblate.

Если вы из тех, кто не хочет делать всё это с существующим репозиторием (или если у вас его нет), то при создании компонента выберите Начать с нуля, а затем JSON-файл в качестве формата файла (на самом деле на этом этапе можно выбрать любой одноязычный формат).

Настройка дополнения Weblate CDN#

Дополнение CDN локализации JavaScript предоставляет несколько вариантов конфигурации.

Порог перевода: Переводы, достигшие данного порога будут включать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));

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