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 document provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.

Prerequisites

Before proceeding with an installation, make sure you have the following prerequisites:

  • Node.js.

  • Yarn package manager installed on your system.

  • Run cd client.

  • Run yarn install

1- Installation

To install a library, 1st run the following command:

yarn add lib

2- Importing the Library

Then, there are two ways to import the library:

  1. If it is a project-wide library (it is used/needed in all/most pages):

    • Import the library in src/main.js.

  2. If it is page-specific library (library is used in a specific page or template):

    • Create a new file named src/<lib-name>.js.

    • Import the library in it.

    • Add an entry in webpack.config.js: <lib-name>: "src/<lib-name>.js".

    Note: Replace <lib-name> with the actual name of the 3rd party library.

3- Building the Library

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

yarn build

4- Including the Library

Now the library is built and ready for use. To include it follow these steps:

  1. If the library was imported in src/main.js, no further steps are required (as it is already included in base.html).

  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 relies on Biome for formatting and linting the JavaScript and CSS code.

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.