Voorzijde van Weblate

De voorkant wordt momenteel gebouwd met Bootstrap, jQuery en enkele bibliotheken van derde partijen.

Ondersteunde browsers

Weblate ondersteunt de laatste, stabiele uitgaven van alle belangrijke browsers en platforms.

Alternatieve browsers die de laatste versies gebruiken van WebKit, Blink of Gecko, ofwel direct of via de API voor de webweergave van het platform, worden niet expliciet ondersteund. Weblate zou echter (in de meeste gevallen) ook met deze browsers correct weer moeten geven en functioneren.

Oudere browsers zouden kunnen werken, maar sommige mogelijkheden zouden beperkt kunnen zijn.

Beheren van afhankelijkheden

Installeren en beheren van bibliotheken van 3rd party in de client van een project van Django kan een beetje moeilijk zijn. Dit gedeelte verschaft een stap-voor-stap gids over hoe bibliotheken van 3e partijen te installeren en beheren die worden gebruikt door de client side van Weblate met Webpack.

Vooraf vereisten

Voor het verrichten van het installeren, zorg ervoor dat u de volgende vooraf vereisten hebt:

  • Nodejs versie 14 of hoger.

  • De yarn pakketbeheerder is geïnstalleerd op uw systeem.

  • Voer cd client uit.

  • Voer yarn install uit.

Installatie

Voer eerst de volgende opdracht uit, voordat een bibliotheek wordt geïnstalleerd:

yarn add <lib-name>

Bibliotheek importeren

Dan zijn er twee manieren om de bibliotheek te importeren:

  1. Als het een projectbrede bibliotheek is (het wordt gebruikt/is nodig in alle/de meeste pagina’s):

    • Importeer de bibliotheek in src/main.js.

    • En declareer het in het globale bereik (indien nodig).

  2. Als het een pagina-specifieke bibliotheek is (bibliotheek die wordt gebruikt op een specifieke pagina of sjabloon):

    • Maak een nieuw bestand, genaamd src/<lib-name>.js.

    • Importeer de bibliotheek daarin. Injecteer het dan in het object window om het globaal toegankelijk te maken.

    • Voeg een item in webpack.config.js in: <lib-name>: "src/<lib-name>.js".

    • Voeg de naam van de bibliotheek in de array excludePrefixes in mainLicenseTransform van webpack.config.js in.

    • Voeg de bestandsnaam voor de licentie in additionalFiles in LicensePlugin van de array plugins in webpack.config.js.

    • Maak een functie <lib-name>LicenseTransfrom voor het licentiebestand, dat in de vorige stappen werd geïntroduceerd, en gebruik die.

    Opmerking: Vervang <lib-name> door de feitelijke naam van de bibliotheek van de 3e partij.

Bibliotheek bouwen

Bouw de door het project te gebruiken bibliotheken, door de volgende opdracht uit te voeren:

yarn build

De bibliotheek opnemen

Nu is de bibliotheek gebouwd en klaar om te gebruiken. Volg deze stappen om hem op te nemen:

  1. Als de bibliotheek werd geïmporteerd in src/main.js, zijn geen verdere stappen nodig (omdat het al is opgenomen in base.html).

  2. Als de bibliotheek werd geïmporteerd in zijn specifieke bestand src/<lib-name>.js, in weblate/templates gebruik de tags include om te koppelen aan het gebouwde statische bestand voor JavaScript:

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

Opmaak codering

Weblate vertrouwt op Biome voor opmaken en linten van de code voor JavaScript en CSS.

Vertaling

Zou u voor de gebruiker benodigde tekst zichtbaar moeten hebben in de code voor de voorkant, zou het te vertalen moeten zijn. In de meeste gevallen is alles wat u hoeft te doen, is uw tekst in te pakken binnen de functie gettext, maar er zijn meer complexe mogelijkheden beschikbaar:

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'

Zie ook

Onderwerp Vertalen in de documentatie van Django

Pictogrammen

Weblate gebruikte momenteel pictogrammen van Material Design. In het geval u zoekt naar een nieuw symbool, bekijk Material Design Icons of Material Design Resources.

Aanvullend is er scripts/optimize-svg om de grootte van de SVG te verkleinen, omdat de meeste pictogrammen zijn ingebed in de HTML om het opmaken van de paden mogelijk te maken.