Фронтэнд Weblate

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

Поддерживаемые браузеры

Weblate поддерживает последние стабильные релизы всех основных браузеров и платформ.

Альтернативные браузеры, которые используют последние версии WebKit, Blink, или Gecko (не важно, напрямую ли или опосредованно через API платформы) в явном виде не поддерживаются. Однако Weblate должен (в большинстве случаев) отображаться и функционировать корректно и в них.

Более старые браузеры, хотя и могут всё ещё работать, но некоторый функционал в них может быть ограничен.

Управление зависимостями

Установка и управление сторонними библиотеками в клиенте проекта Django может быть немного сложной. В этом разделе представлено пошаговое руководство по установке и управлению сторонними библиотеками, используемыми клиентской стороной Weblate с помощью Webpack.

Предпосылки

Прежде чем приступить к установке, убедитесь, что у вас есть следующие предварительные требования:

  • Поддерживаемый выпуск Node.js.

  • В вашей системе установлен менеджер пакетов yarn.

  • Выполните cd client.

  • Выполните yarn install --check-files.

Установка

Чтобы установить библиотеку, сначала выполните следующую команду:

yarn add <lib-name>

Импорт библиотеки

Затем есть два способа импортировать библиотеку:

  1. Если это общепроектная библиотека (она используется/нужна на всех/большинстве страниц):

    • Импортируйте библиотеку в src/main.js.

    • И объявите её в глобальной области видимости (при необходимости).

  2. Если это библиотека, специфичная для страницы (библиотека используется на определённой странице или в шаблоне):

    • Создайте новый файл с именем 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.

    • Создайте функцию <lib-name>LicenseTransform для файла лицензии, представленного на предыдущих шагах, и используйте её.

    Примечание: Замените <lib-name> на фактическое имя сторонней библиотеки.

Сборка библиотеки

Соберите библиотеки, используемые проектом, выполнив следующую команду:

yarn build

Включение библиотеки

Теперь библиотека собрана и готова к использованию. Чтобы включить её, выполните следующие шаги:

  1. Если библиотека была импортирована в src/main.js, дальнейшие шаги не требуются (поскольку она уже включена в base.html).

  2. Если библиотека была импортирована в её собственный файл src/<lib-name>.js, в weblate/templates используйте теги include для ссылки на собранный статический файл JavaScript:

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

Оформление кода

Weblate полагается на Biome для форматирования и проверки кода JavaScript и CSS. Шаблоны Django форматируются и проверяются отдельно с помощью djade и djlint.

Перевод

Если вам нужен какой-либо видимый пользователю текст в коде интерфейса, он должен быть локализуемым. В большинстве случаев достаточно обернуть текст в функцию 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 Icons; если вы ищете новый символ, обратитесь туда.

В дополнение к этому есть скрипт scripts/optimize-svg, который уменьшает размер этих SVG-иконок, так как большинство из них встраиваются внутрь HTML, чтобы возможно было задавать стиль контурам.