Переклад HTML і JavaScript за допомогою CDN Weblate

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

Примітка

Цю можливість налаштовано на 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).

Налаштовування додатка CDN Weblate

Для додатка CDN локалізації JavaScript передбачено декілька параметрів налаштовування.

Порогове значення перекладу

Переклади із рівнем, який перевищує це порогове значення, буде включено до CDN.

Вибір CSS

Configures which strings from the HTML documents are translatable, see Видобування рядків для CDN Weblate and Локалізація HTML за допомогою CDN Weblate.

Назва куки мови

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

Видобути рядки з файлів HTML

List of files in the repository or URLs where Weblate will look for translatable strings and offer them for a translation, see Видобування рядків для CDN Weblate.

Видобування рядків для CDN Weblate

Рядки перекладу мають бути на Weblate. Ви можете досягти цього або вручну за допомогою створення записів з програмного інтерфейсу, або вказавши адреси за допомогою поля Видобути рядки з файлів HTML (Weblate виконає видобування рядків автоматично). Файли мають зберігатися у сховищі коду або містити віддалені адреси, дані з яких може бути отримано і оброблено 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 за допомогою CDN Weblate

Щоб локалізувати документ 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

Доступ до окремих перекладів у CDN надається у форматі двомовних файлів JSON. Отримати файл можна за допомогою такого коду:

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

У цьому випадку слід реалізувати справжню логіку локалізації.