Weblate felhasználói felület¶

A Weblate felhasználói felülete jelenleg a Bootstrap, a jQuery és néhány harmadik féltől származó könyvtár felhasználásával épül fel.

Támogatott böngészők¶

A Weblate támogatja az összes jelentős böngésző és platform legfrissebb, stabil kiadásait.

Az alternatív böngészők — amelyek a legfrissebb WebKit, Blink vagy Gecko motort használják, akár közvetlenül, akár a platform webes megjelenítő API-ján keresztül — nem tartoznak a hivatalosan támogatott körbe. Ennek ellenére a Weblate általában ezekben is helyesen jelenik meg és működik.

A régebbi böngészők is működhetnek, de bizonyos funkciók korlátozottak lehetnek.

Függőségek kezelése¶

Harmadik féltől származó (3rd party) könyvtárak telepítése és kezelése a Django-projekt client részében némi körültekintést igényel. Ez a szakasz lépésenkénti útmutatást ad arra, hogyan lehet telepíteni és kezelni a Weblate kliensoldalán használt könyvtárakat a Webpack segítségével.

Előfeltételek¶

A telepítés megkezdése előtt győződjön meg arról, hogy a következő előfeltételek teljesülnek:

A Nodejs legalább 14-es verziója telepítve van.
A yarn csomagkezelő elérhető a rendszeren.
Futtassa a következő parancsot: cd client.
Ezután futtassa: yarn install.

Telepítés¶

A könyvtár telepítéséhez először futtassa az alábbi parancsot:

yarn add <lib-name>

A könyvtár importálása¶

Ezután két lehetőség van a könyvtár importálására:

Ha projektszintű könyvtárról van szó (azaz a legtöbb vagy minden oldalon szükség van rá):
- Importálja a könyvtárat a src/main.js fájlba.
- És ha szükséges, deklarálja a globális névtérben.
Ha az adott könyvtár csak egy konkrét oldalhoz vagy sablonhoz szükséges:
- Hozzon létre egy új fájlt src/<lib-name>.js néven.
- Importálja a könyvtárat, majd tegye elérhetővé globálisan a window objektumon keresztül.
- Adjon hozzá egy bejegyzést a webpack.config.js fájlban: <lib-name>: "src/<lib-name>.js".
- Vegye fel a könyvtár nevét az excludePrefixes tömbbe a mainLicenseTransform részben a webpack.config.js fájlban.
- Adja hozzá a licenc fájl nevét az additionalFiles részhez a LicensePlugin plugins tömbjében a webpack.config.js fájlban.
- Hozzon létre egy <lib-name>LicenseTransform nevű függvényt a fent hivatkozott licence fájlhoz, és használja azt.
Megjegyzés: A <lib-name> helyére a tényleges harmadik féltől származó könyvtár neve kerüljön.

Könyvtár felépítése¶

A projekt által használt könyvtárakat az alábbi paranccsal lehet felépíteni:

yarn build

Könyvtár használata¶

Miután a könyvtár le lett fordítva, az alábbi módon lehet beilleszteni:

Ha a könyvtárat a src/main.js fájlban importálta, nincs további teendő, mivel az már be van töltve a base.html sablonba.
Ha a könyvtár külön fájlban szerepel (src/<lib-name>.js), akkor a weblate/templates könyvtárban az include tag használatával kell hivatkozni az előállított statikus JavaScript fájlra:

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

Kódstílus¶

A Weblate a Biome eszközt használja a JavaScript és CSS kód formázásához és ellenőrzéséhez.

Lokalizáció¶

Amennyiben a felhasználó által látható szöveget használ a frontend kódban, azt lokalizálhatóvá kell tenni. A legtöbb esetben elegendő a szöveget gettext függvénybe ágyazni, de további fejlettebb lehetőségek is rendelkezésre állnak:

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'

Lásd még

Fordítási téma a Django dokumentációban

Ikonok¶

A Weblate jelenleg a Material Design Icons készletet használja, ha új szimbólumra van szüksége, ott érdemes keresnie.

Emellett a scripts/optimize-svg szkript segítségével csökkenthető az SVG fájlok mérete, mivel a legtöbb ikon közvetlenül a HTML-be van ágyazva, hogy az útvonalak (<path> elemek) egyedileg alakíthatók legyenek.