HTML und JavaScript mit Weblate CDN übersetzen¶

Ab Weblate 4.2 ist es möglich, JavaScript- und HTML-Lokalisierung mit der JavaScript-Lokalisierungs-CDN-Erweiterung in ein CDN zu exportieren. Um Übersetzungsdateien ohne den JavaScript-Loader zu veröffentlichen, verwenden Sie Übersetzungsdateien-CDN.

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. Siehe auch Lokalisierungs-CDN.

Nach der Installation in Ihrer Komponente pusht die JavaScript-Lokalisierungserweiterung die Commits (siehe Lazy Commits) in das CDN und diese können in Ihren Webseiten verwendet werden, um sie zu lokalisieren.

Komponente erstellen¶

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

Weblate-CDN-Erweiterung konfigurieren¶

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-Ausschnitt 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. Remote-URLs werden durch ALLOWED_ASSET_DOMAINS eingeschränkt, einschließlich aller Weiterleitungsziele.

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 möchten, 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.

Übersetzungsdateien veröffentlichen¶

The Übersetzungsdateien-CDN add-on publishes translation files directly to the CDN. It does not generate a JavaScript loader or convert translations into bilingual JSON.

Single-file translations are named using the language code and original file extension, for example cs.json or de.po. Multi-file translations are served below the language code using paths relative to the translation directory. Monolingual components include the source language file, while bilingual components publish only target-language files. See Lokalisierungs-CDN for secure server setup.