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

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

Примечание

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

Upon installation into your component it will push committed translations (see Отложенные коммиты) to the CDN and these can be used in your web pages to localize them.

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

First, you need to create a monolingual component which will hold your strings, see Добавление проектов и компонентов перевода for generic instructions on that.

In case you have existing repository to start with (for example the one containing HTML files), create an empty JSON file in the repository for the source language (see Исходный язык), for example locales/en.json. The content should be {} to indicate an empty object. Once you have that, the repository can be imported into Weblate and you can start with an addon configuration.

Подсказка

In case you have existing translations, you can place them into the language JSON files and those will be used in Weblate.

For those who do not want to use existing repository (or do not have one), choose Start from scratch when creating component and choose JSON file as a file format (it is okay to choose any monolingual format at this point).

Настройка надстройки Weblate CDN

The CDN локализации JavaScript’а addon provides few configuration options.

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

Translations translated above this threshold will be included in the CDN.

Селектор CSS

Configures which strings from the HTML documents are translatable, see Извлечение строк для Weblate CDN and Локализация HTML с помощью Weblate CDN.

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

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

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

List of files in the repository or URLs where Weblate will look for translatable strings and offer them for a translation, see Извлечение строк для 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) и их текст будет заменён переводом.

Язык пользователя определяется из настроенной куки, а при её отсутствии используется один из предпочтительных языков браузера пользователя.

The Language cookie name can be useful for integration with other applications (for example choose django_language when using Django).

Локализация JavaScript

Переводы на отдельные языки представляются в виде двуязычных файлов JSON в сети доставки содержимого. Чтобы их получить, вы можете использовать следующий код:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

The actual localization logic needs to be implemented in this case.