HTML und JavaScript mit Weblate CDN übersetzen¶

Starting with Weblate 4.2 it is possible to export JavaScript and HTML localization to a CDN using JavaScript-Lokalisierungs-CDN add-on. To publish translation files without the JavaScript loader, use Translation files CDN.

Bemerkung

This feature is configured on Hosted Weblate. It requires additional configuration on your installation, see LOCALIZE_CDN_URL and LOCALIZE_CDN_PATH. See also Lokalisierungs-CDN.

Upon installation into your component the JavaScript localization add-on will push committed translations (see Lazy Commits) to the CDN and these can be used in your web pages to localize them.

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

To localize an HTML document, you need to load the weblate.js script:

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

Publishing translation files¶

The Translation files 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.