Оболонка Weblate¶

Інтерфейс наразі побудовано з використанням Bootstrap, jQuery та кількох сторонніх бібліотек.

Підтримувані браузери¶

У Weblate передбачено підтримку найсвіжіших стабільних випусків усіх основних браузерів та програмних платформ.

Підтримки альтернативних браузерів, які використовують найсвіжішу версію WebKit, Blink або Gecko безпосередньо або за допомогою програмного інтерфейсу перегляду даних інтернету платформи, явним чином не передбачено. Втім, Weblate має (у більшості випадків) показувати дані і працювати належним чином і у цих браузерах.

Застарілі браузери можуть працювати, але працездатність деяких можливостей у них може бути обмежено.

Керування залежностями¶

Встановлення бібліотек сторонніх розробників і керування ними в «клієнті» проекту Django може бути дещо складним. У цьому розділі наведено покрокові інструкції щодо встановлення та керування сторонніми бібліотеками, які використовуються на «клієнтській стороні» Weblate за допомогою «Webpack».

Передумови¶

Перш ніж приступити до встановлення, переконайтеся, що у вас є наступні передумови:

Nodejs версії 14 або вище.
У вашій системі встановлено менеджер пакетів yarn.
Запустити cd client.
Запустіть yarn install.

Установлення¶

Щоб інсталювати бібліотеку, спочатку виконайте таку команду:

yarn add <lib-name>

Імпортування бібліотеки¶

Існує два способи імпортувати бібліотеку:

Якщо це бібліотека всього проєкту (використовується/потрібна на всіх/більшості сторінок):
- Імпортуйте бібліотеку в src/main.js.
- І оголосити його в глобальній області видимості (якщо потрібно).
Якщо це сторінка-специфічна бібліотека (бібліотека використовується в конкретній сторінці або шаблоні):
- Створіть новий файл з назвою src/<lib-name>.js.
- Імпортуйте бібліотеку у ньому. Далі вставте його до об’єкта window для загального доступу.
- Додайте запис до webpack.config.js: <lib-name>: «src/<lib-name>.js».
- Додайте назву бібліотеки до масиву excludePrefixes у mainLicenseTransform у webpack.config.js.
- Додайте назву файла ліцензування до additionalFiles у LicensePlugin у масиві plugins у webpack.config.js.
- Створіть функцію <назва-бібліотеки>LicenseTransfrom для файла ліцензії, який впроваджено на попередніх кроках, і скористайтеся нею.
Примітка: Замініть <lib-name> на справжню назву сторонньої бібліотеки.

Збирання бібліотеки¶

Зберіть бібліотеки, що використовуються проєктом, запустивши таку команду:

yarn build

Включення бібліотеки¶

Тепер бібліотека зібрана і готова до використання. Щоб включити її, виконайте такі кроки:

Якщо бібліотеку було імпортовано в rc/main.js, подальших дій не потрібно (оскільки вона вже включена в base.html).
Якщо бібліотека була імпортована в окремому файлі src/<lib-name>.js, в weblate/templates використовуйте теги include для посилання на зібраний статичний файл JavaScript:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

Стиль програмного коду¶

Weblate використовує Biome для форматування та оптимізації коду JavaScript та CSS.

Локалізація¶

Якщо вам потрібен видимий користувачеві текст у коді інтерфейсу, він має бути локалізованим. У більшості випадків все, що вам потрібно, це обернути текст у функцію gettext, але є більш доступний складні функції :

document.write(gettext('this is to be translated'));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext('literal for the singular case',
        'literal for the plural case', object_count);

fmts = ngettext('There is %s object. Remaining: %s',
        'There are %s objects. Remaining: %s', 11);
s = interpolate(fmts, [11, 20]);
// s is 'There are 11 objects. Remaining: 20'

Дивись також

Тема перекладу у документації Django

Піктограми¶

Поточна версія Weblate використовує піктограми material design. Якщо вам потрібна якась нова піктограма, скористайтеся Material Design Icons або Material Design Resources.

Крім того, можна скористатися scripts/optimize-svg для зменшення розміру SVG, оскільки більшість піктограм вбудовуються до HTML для уможливлення застосування стилю до контурів.