Weblate-frontend

Frontend är för närvarande byggt med Bootstrap, jQuery och några tredjepartsbibliotek.

Webbläsare som stöds

Weblate stöder de senaste stabila versionerna av alla större webbläsare och plattformar.

Alternativa webbläsare som använder den senaste versionen av WebKit, Blink eller Gecko, antingen direkt eller via plattformens webbvy-API, stöds inte uttryckligen. Weblate bör dock (i de flesta fall) visas och fungera korrekt även i dessa webbläsare.

Äldre webbläsare kan fungera, men vissa funktioner kan vara begränsade.

Beroendehantering

Att installera och hantera tredjepartsbibliotek i klienten för ett Django-projekt kan vara lite knepigt. Det här avsnittet innehåller en steg-för-steg-guide om hur man installerar och hanterar tredjepartsbibliotek som används av klientsidan i Weblate med hjälp av Webpack.

Förutsättningar

Innan du fortsätter med installationen, se till att du uppfyller följande krav:

  • Nodejs version 14 eller högre.

  • Pakethanteraren yarn är installerad på ditt system.

  • Kör cd client.

  • Kör yarn install.

Installation

För att installera ett bibliotek, kör först följande kommando:

yarn add <lib-name>

Importera biblioteket

Sedan finns det två sätt att importera biblioteket:

  1. Om det är ett projektomfattande bibliotek (det används/behövs på alla/de flesta sidor):

    • Importera biblioteket i src/main.js.

    • Och deklarera det i det globala området (om det behövs).

  2. Om det är en sidspecifik bibliotek (biblioteket används på en specifik sida eller mall):

    • Skapa en ny fil med namnet src/<lib-name>.js.

    • Importera biblioteket i det. Injicera det sedan i objektet window så att det blir globalt tillgängligt.

    • Lägg till en post i webpack.config.js: <lib-name>: "src/<lib-name>.js".

    • Lägg till biblioteksnamnet i arrayen excludePrefixes i mainLicenseTransform i webpack.config.js.

    • Lägg till licensfilens namn i additionalFiles i LicensePlugin i plugins-matrisen i webpack.config.js.

    • Skapa en funktion <lib-name>LicenseTransform för licensfilen som introducerades i föregående steg och använd den.

    Obs: Ersätt <lib-name> med det faktiska namnet på tredjepartsbiblioteket.

Bygga biblioteket

Bygg biblioteken som används av projektet genom att köra följande kommando:

yarn build

Inklusive biblioteket

Nu är biblioteket byggt och klart att användas. För att inkludera det, följ dessa steg:

  1. Om biblioteket importerades i src/main.js krävs inga ytterligare åtgärder (eftersom det redan ingår i base.html).

  2. Om biblioteket importerades i sin specifika fil src/<lib-name>.js, använd inkluderingsetiketterna i weblate/templates för att länka till den byggda statiska JavaScript-filen:

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

Kodningsstil

Weblate använder Biome för formatering och linting av JavaScript- och CSS-kod.

Översättning

Om du behöver någon text som är synlig för användaren i frontend-koden, bör den vara lokaliserbar. I de flesta fall behöver du bara omsluta texten med funktionen gettext, men det finns även mer komplexa funktioner tillgängliga:

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'

Se även

Översättningstema i Django-dokumentationen

Ikoner

Weblate använder för närvarande Material Design Icons. Om du letar efter nya symboler kan du kolla där.

Dessutom finns scripts/optimize-svg för att minska storleken på SVG-filen, eftersom de flesta ikonerna är inbäddade i HTML-koden för att möjliggöra formatering av banorna.