Оболонка Weblate¶
Поточну версію оболонки побудовано з використанням Bootstrap, jQuery і декількох сторонніх бібліотек.
Підтримувані браузери¶
У Weblate передбачено підтримку найсвіжіших стабільних випусків усіх основних браузерів та програмних платформ.
Підтримки альтернативних браузерів, які використовують найсвіжішу версію WebKit, Blink або Gecko безпосередньо або за допомогою програмного інтерфейсу перегляду даних інтернету платформи, явним чином не передбачено. Втім, Weblate має (у більшості випадків) показувати дані і працювати належним чином і у цих браузерах.
Застарілі браузери можуть працювати, але працездатність деяких можливостей у них може бути обмежено.
Керування залежностями¶
Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This document provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.
Prerequisites¶
Before proceeding with an installation, make sure you have the following prerequisites:
Node.js.
Yarn package manager installed on your system.
Run
cd client
.Run
yarn install
1- Installation¶
To install a library, 1st run the following command:
yarn add lib
2- Importing the Library¶
Then, there are two ways to import the library:
- If it is a project-wide library (it is used/needed in all/most pages):
Import the library in
src/main.js
.
- If it is page-specific library (library is used in a specific page or template):
Create a new file named
src/<lib-name>.js
.Import the library in it.
Add an entry in
webpack.config.js
:<lib-name>: "src/<lib-name>.js"
.
Note: Replace
<lib-name>
with the actual name of the 3rd party library.
3- Building the Library¶
Build the libraries used by the project, run the following command:
yarn build
4- Including the Library¶
Now the library is built and ready for use. To include it follow these steps:
If the library was imported in
src/main.js
, no further steps are required (as it is already included inbase.html
).If the library was imported in its specific file
src/<lib-name>.js
, inweblate/templates`
use the include tags to link to the built static JavaScript file:
{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>
Стиль програмного коду¶
Weblate relies on Biome for formatting and linting the JavaScript and CSS code.
Локалізація¶
Якщо вам потрібен будь-який видимий користувачеві текст у коді бібліотеки, цей текст потрібно локалізувати. У більшості випадків вам достатньо огорнути ваш текст у функцію 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'
Дивись також
Піктограми¶
Поточна версія Weblate використовує піктограми material design. Якщо вам потрібна якась нова піктограма, скористайтеся Material Design Icons або Material Design Resources.
Крім того, можна скористатися scripts/optimize-svg
для зменшення розміру SVG, оскільки більшість піктограм вбудовуються до HTML для уможливлення застосування стилю до контурів.