Weblate-Frontend

Das Frontend wird derzeit mit Bootstrap, jQuery und einigen Bibliotheken von Drittanbietern erstellt.

Unterstützte Browser

Weblate unterstützt die neuesten, stabilen Versionen aller gängigen Browser und Plattformen.

Alternative Browser, welche die neueste Version von WebKit, Blink oder Gecko verwenden, ob direkt oder über die Web View API der Plattform, werden nicht explizit unterstützt. Weblate sollte jedoch (in den meisten Fällen) auch in diesen Browsern korrekt angezeigt werden und funktionieren.

Ältere Browser könnten funktionieren, aber einige Funktionen sind möglicherweise eingeschränkt.

Verwaltung von Abhängigkeiten

Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This section provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.

Voraussetzungen

Bevor Sie mit der Installation fortfahren, sollten sie sicherstellen, dass die folgenden Voraussetzungen erfüllt sind:

  • Nodejs version 14 or higher.

  • The yarn package manager installed on your system.

  • cd client ausführen.

  • yarn install ausführen.

Installation

Um eine Bibliothek zu installieren, führen Sie zunächst den folgenden Befehl aus:

yarn add <lib-name>

Importing the Library

Dann gibt es zwei Möglichkeiten, die Bibliothek zu importieren:

  1. Wenn es sich um eine projektweite Bibliothek handelt (sie wird auf allen/den meisten Seiten verwendet/benötigt):

    • Die Bibliothek in src/main.js importieren.

    • And declare it in the global scope (if needed).

  2. Wenn es sich um eine seitenspezifische Bibliothek handelt (sie wird auf einer bestimmten Seite oder Vorlage verwendet):

    • Eine neue Datei mit dem Namen src/<lib-name>.js erstellen.

    • Import the library in it. Then inject it into the window object to be globally accessible.

    • Einen Eintrag in webpack.config.js: <lib-name>: "src/<lib-name>.js" hinzufügen.

    • Add library name in excludePrefixes array in mainLicenseTransform in webpack.config.js.

    • Add license file name in additionalFiles in LicensePlugin in plugins array in webpack.config.js.

    • Create a <lib-name>LicenseTransfrom function for the license file introduced in the previous steps and use it.

    Hinweis: <lib-name> durch den tatsächlichen Namen der Drittanbieter-Bibliothek ersetzen.

Building the Library

Build the libraries used by the project, by running the following command:

yarn build

Including the Library

Jetzt ist die Bibliothek erstellt und einsatzbereit. Um sie einzubinden, führen Sie folgende Schritte aus:

  1. Wenn die Bibliothek in src/main.js importiert wurde, sind keine weiteren Schritte erforderlich (da sie bereits in base.html enthalten ist).

  2. If the library was imported in its specific file src/<lib-name>.js, in weblate/templates use the include tags to link to the built static JavaScript file:

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

Programmierstil

Weblate nutzt Biome für Formatierung und Analyse des JavaScript- und CSS-Codes.

Lokalisierung

Sollten Sie einen für den Benutzer sichtbaren Text im Frontend-Code benötigen, sollte dieser lokalisierbar sein. In den meisten Fällen genügt es, den Text in die Funktion gettext einzuschließen, aber es sind auch komplexere Funktionen verfügbar:

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'

Siehe auch

Übersetzungsthema in der Django-Dokumentation

Symbole

Weblate verwendet derzeit Material-Design-Symbole. Falls Sie auf der Suche nach neuen Symbolen sind, schauen Sie unter Material Design Icons oder Material Design Resources.

Zusätzlich gibt es scripts/optimize-svg, um die Größe der SVG zu reduzieren, da die meisten Symbole in das HTML eingebettet sind, um die Gestaltung der Pfade zu ermöglichen.