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

Das Installieren und Verwalten von Drittanbieter-Bibliotheken im Client eines Django-Projekts kann ein wenig knifflig sein. Dieser Abschnitt bietet eine Schritt-für-Schritt-Anleitung zum Installieren und Verwalten von Drittanbieter-Bibliotheken, die clientseitig von Weblate mit Webpack verwendet werden.

Voraussetzungen

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

  • Nodejs Version 14 oder höher.

  • Der yarn-Paketmanager ist auf Ihrem System installiert.

  • 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>

Importieren der Bibliothek

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.

    • Und es im globalen Bereich deklarieren (falls nötig).

  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.

    • Die Bibliothek darin importieren. Diese dann in das window-Objekt injizieren, damit ein globaler Zugriff möglich ist.

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

    • Bibliotheksnamen im excludePrefixes-Array in mainLicenseTransform in webpack.config.js hinzufügen.

    • Lizenzdateinamen in additionalFiles in LicensePlugin im plugins-Array in webpack.config.js hinzufügen.

    • Eine <lib-name>LicenseTransfrom-Funktion für die Lizenzdatei erstellen, die in den vorherigen Schritten eingeführt wurde, und diese verwenden.

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

Erstellen der Bibliothek

Erstellen Sie die vom Projekt verwendeten Bibliotheken, indem Sie den folgenden Befehl ausführen:

yarn build

Einbinden der Bibliothek

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. Wenn die Bibliothek in ihrer spezifischen Datei src/<lib-name>.js importiert wurde, verwenden Sie in weblate/templates die Include-Tags, um sie mit der erstellten statischen JavaScript-Datei zu verknüpfen:

{% 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.