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.

Barrierefreiheit

Weblate strebt WCAG 2.2 Level AA für neue und geänderte Bedienfunktionen an, wo dies sinnvoll ist. Verwenden Sie semantisches HTML und Bootstrap-Komponenten, bevor Sie eigenen Interaktionscode hinzufügen.

Beim Ändern des Frontends:

  • Make all interactive controls reachable and usable with a keyboard.

  • Keep focus order logical and preserve visible focus styling.

  • Prefer native buttons, links, inputs, selects, and tables over custom widgets.

  • Associate every form control with a label, help text, and validation errors where applicable.

  • Do not use color, icon shape, or position as the only way to convey state.

  • Announce dynamic status changes that are not otherwise visible to assistive technology.

  • Respect reduced-motion preferences for animation or scrolling behavior.

  • Test changed workflows with keyboard-only navigation and, when practical, a screen reader spot check.

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:

  • Eine unterstützte Node.js-Version.

  • Der yarn-Paketmanager ist auf Ihrem System installiert.

  • cd client ausführen.

  • yarn install --check-files ausführen.

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 verlinken:

{% 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. Django-Vorlagen werden separat von djade und djlint formatiert und analysiert.

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.