Переклад 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));
У цьому випадку слід реалізувати справжню логіку локалізації.