HTML und JavaScript mit Weblate CDN übersetzen#

Ab Weblate 4.2 ist es möglich, die Übersetzung in ein CDN zu exportieren, indem man die Erweiterung JavaScript-Lokalisierungs-CDN verwendet.

Bemerkung

Diese Funktion ist auf Hosted Weblate konfiguriert. Sie erfordert eine zusätzliche Konfiguration in Ihrer Installation, siehe LOCALIZE_CDN_URL und LOCALIZE_CDN_PATH.

Nach der Installation in Ihrer Komponente werden committete Übersetzungen (siehe Lazy Commits) in das CDN gepusht und können in Ihren Webseiten verwendet werden, um diese zu lokalisieren.

Erstellen einer Komponente#

Zuerst müssen Sie eine einsprachige Komponente erstellen, die Ihre Zeichenketten enthält, siehe Übersetzungsprojekte und Komponenten hinzufügen für allgemeine Anweisungen dazu.

Falls Sie ein bestehendes Repository haben, mit dem Sie beginnen können (zum Beispiel dasjenige, das HTML-Dateien enthält), erstellen Sie eine leere JSON-Datei im Repository für die Ausgangssprache (siehe Ausgangssprache), zum Beispiel locales/en.json. Der Inhalt sollte {} sein, um ein leeres Objekt anzugeben. Danach kann das Repository in Weblate importiert werden und Sie können mit der Konfiguration einer Erweiterung beginnen.

Hinweis

Falls Sie bereits Übersetzungen haben, können Sie diese in die JSON-Sprachdateien einfügen, die dann in Weblate verwendet werden.

Wer kein bestehendes Repository verwenden möchte (oder keines hat), wählt beim Erstellen der Komponente Bei Null anfangen und JSON-Datei als Dateiformat (an dieser Stelle kann ein beliebiges einsprachiges Format gewählt werden).

Konfigurieren der Weblate-CDN-Erweiterung#

Die Erweiterung JavaScript-Lokalisierungs-CDN bietet nur wenige Konfigurationsmöglichkeiten.

Übersetzungsschwelle: Übersetzungen, die diesen Schwellenwert überschreiten, werden in das CDN aufgenommen.
CSS-Selektor: Legt fest, welche Zeichenketten aus den HTML-Dokumenten übersetzbar sind, siehe Zeichenkettenextraktion für Weblate CDN und HTML-Übersetzung mit Weblate CDN.
Name des Sprachcookies: Name des Cookies, der die vom Benutzer ausgewählte Sprache enthält. Wird im JavaScript-Snippet für HTML-Übersetzung mit Weblate CDN verwendet.
Zeichenketten aus HTML-Dateien extrahieren: Liste der Dateien im Repository oder URLs, in denen Weblate nach übersetzbaren Zeichenketten sucht und sie für eine Übersetzung anbietet, siehe Zeichenkettenextraktion für Weblate CDN.

Zeichenkettenextraktion für Weblate CDN#

Die Übersetzungszeichenketten müssen in Weblate vorhanden sein. Sie können diese entweder manuell verwalten, über die API erstellen oder Dateien oder URLs mit Zeichenketten aus HTML-Dateien extrahieren auflisten und Weblate diese automatisch extrahieren lassen. Die Dateien müssen im Repository vorhanden sein oder Remote-URLs enthalten, die von Weblate regelmäßig heruntergeladen und analysiert werden.

Die Standardkonfiguration für CSS-Selektor extrahiert Elemente mit der CSS-Klasse l10n, zum Beispiel würde es zwei Zeichenketten aus den folgenden Ausschnitten extrahieren:

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

Falls Sie den bestehenden Code nicht ändern wollen, können Sie auch * als Selektor verwenden, um alle Elemente zu verarbeiten.

Bemerkung

Momentan wird nur der Text der Elemente extrahiert. Diese Erweiterung unterstützt nicht die Lokalisierung von Elementattributen oder Elemente mit untergeordneten Elementen.

HTML-Übersetzung mit Weblate CDN#

Um ein HTML-Dokument zu lokalisieren, müssen Sie das Skript weblate.js laden:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

Beim Laden werden automatisch alle übereinstimmenden übersetzbaren Elemente gefunden (basierend auf der CSS-Selektor-Konfiguration) und deren Text durch eine Übersetzung ersetzt.

Die Benutzersprache wird anhand des konfigurierten Cookies erkannt und greift auf die vom Benutzer bevorzugten, im Browser konfigurierten Sprachen zurück.

Der Name des Sprachcookies kann für die Integration mit anderen Anwendungen nützlich sein (z. B. wird django_language ausgewählt wenn Django verwendet wird).

JavaScript-Übersetzung#

Die einzelnen Übersetzungen werden als zweisprachige JSON-Dateien im CDN bereitgestellt. Um eine davon abzurufen, können Sie folgenden Code verwenden:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

In diesem Fall muss die eigentliche Lokalisierungslogik implementiert werden.