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.

Abhängigkeiten verwalten

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:

  • A supported Node.js release.

  • Der yarn-Paketmanager ist auf Ihrem System installiert.

  • cd client ausführen.

  • Run yarn install --check-files.

Installation

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

yarn add <lib-name>

Die Bibliothek importieren

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>LicenseTransform-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.

Die Bibliothek erstellen

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

yarn build

Die Bibliothek einbinden

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 relies on Biome for formatting and linting the JavaScript and CSS code. Django templates are formatted and linted separately by djade and djlint.

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 Icons, falls Sie auf der Suche nach einem neuen Symbol sind, sehen Sie sich das an.

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.