Translating HTML and JavaScript using Weblate CDN

Starting with Weblate 4.2 it is posible to export localization to a CDN using CDN локализации JavaScript’а addon.

Примечание

This feature is configured on Hosted Weblate. It requires additional configuration on your installation, see LOCALIZE_CDN_URL and LOCALIZE_CDN_PATH.

Upon installation into your component it will push committed translations (see Lazy commits) to the CDN and these can be used in your web pages to localize them.

Creating component

First, you need to create a monolingual component which will hold your strings, see Adding translation projects and components 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).

Configuring Weblate CDN addon

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 String extraction for Weblate CDN and HTML localization using Weblate CDN.

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

Name of cookie which contains user selected language. Used in the JavaScript snippet for HTML localization using 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 String extraction for Weblate CDN.

String extraction for Weblate CDN

Строки перевода должны присутствовать в Weblate. Вы можете управлять ими вручную, использовать API для их создания или перечислять файлы или URL-адреса, используя :guilabel: Извлечь строки из файлов HTML, и Weblate извлечет их автоматически. Файлы должны присутствовать в репозитории или содержать удаленные URL-адреса, которые будут регулярно загружаться и анализироваться Weblate.

В конфигурации по умолчанию для CSS selector извлекаются элементы с 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 localization using Weblate CDN

To localize a HTML document, you need to load the weblate.js script:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

Upon loading, this will automatically find all matching translatable elements (based on CSS selector configuration) and replace their text with a translation.

The user language is detected from the configured cookie and falls back to user preferred languages configured in the browser.

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

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

The individual translations are exposed as bilingual JSON files under the CDN. To fetch one you can use following code:

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.