Universal-Plugin-Anleitung

Wie es funktioniert

Das Plug-in übersetzt den aktuell gerenderten Webseiteninhalt in die ausgewählte Sprache. Alle Übersetzungen werden in einer Datenbank gespeichert, sodass Sie sie über den Übersetzungseditor im Translation Hub bearbeiten können. 

Translation Hub einrichten: 

1. Translation Hub mit Docker compose einrichten und starten. 

oder 

1. Kubernetes-Umgebung einrichten und vorbereiten. 
2. Bereitstellungs-HELM herunterladen und Werte konfigurieren. 
3. Bereitstellen. 
4. Nach außen zur Verfügung stellen. 

Autorisierungsinformationen von eTranslation oder WEB-T-kompatiblen Übersetzungsanbietern beziehen: 

• Erhalten Sie MT-Anbieter-Zugang. 
• Verwenden Sie diese Zugangsinformationen im Translation Hub. 

Eine Integration erstellen und das JavaScript-Plug-in auf Ihrer Website einbetten: 

1. Erstellen Sie eine Website Translator-Integration im Translation Hub. 
2. Binden Sie den generierten JavaScript-Code in Ihre Website ein. 

Ihre Website übersetzen und die automatisierten Übersetzungen verbessern: 

1. Übersetzen Sie Ihre Website, indem Sie alle Seiten durchgehen und jede Zielsprache aus dem Menü auswählen. 
2. Verwenden Sie den Übersetzungseditor, um übersetzte Texte zu verbessern. Die Korrekturen werden sofort auf Ihrer Website angezeigt. 
3. Wenn neue Inhalte in der Originalsprache hinzugefügt werden, übersetzen Sie die bearbeitete Seite erneut, indem Sie jede Zielsprache aus dem Menü auswählen. 

Wenn der Inhalt einer Seite zum ersten Mal geladen wird, dauert die Übersetzung einige Zeit. Die Übersetzungen werden in einer Datenbank gespeichert und beim nächsten Mal schneller geladen. 

Einrichtung des Translation Hub mit Docker compose

Das Repository „WEB-T Translation Hub standalone“ enthält die Datei Docker compose, die alle zum Starten und zur Nutzung des WEB-T-Universal-Plug-in-Translation Hub erforderlichen Dienste enthält. 

Es enthält die folgenden Dienste: 

• Frontend 
• Webseitenübersetzungsdienst 
• Konfigurationsdienst 
• MT-API-Integrator 
• eTranslation-Anbieter 
• MySQL-Datenbank 
• Redis 
• Traefik-Proxy 

Damit dieser Container lokal gestartet und genutzt werden kann, muss Docker Desktop auf dem Gerät installiert sein. 

Aufgrund des asynchronen Workflows der eTranslation-API funktioniert die Übersetzung mit dem eTranslation-Anbieter erst, wenn eTranslation provider component online veröffentlicht und über HTTPS von der eTranslation-API zugänglich ist. Bei der lokalen Einrichtung können Sie localhost-Tunneling-Lösungen (z. B. ngrok, Pagekite) testen oder Nutzerdefinierter Anbieter nutzen. 

Wie wird es gestartet? 

Öffnen Sie den Terminal in dem Ordner, in dem sich docker-compose.yaml befindet. Führen Sie im Terminal den folgenden Befehl aus: 

Die Prüfung, ob Container und alle Dienste aktiv sind und laufen, kann in Docker Desktop erfolgen 

oder im Terminal mit dem Befehl: 

Wenn der Docker-Aufbau erfolgreich war und alle Dienste aktiv sind und laufen, geben Sie in die Browser-Adresszeile webt-translation-hub.localhost ein oder öffnen Sie http://webt-translation-hub.localhost/ 

Der funktionierende WEB-T Translation Hub sollte gestartet werden. 

Wie nutze ich die Übersetzung mit dem eTranslation-Anbieter lokal? 

Mit ngrok 

Registrieren Sie sich zunächst unter https://ngrok.com/. Nach der Registrierung sehen Sie auf der Hauptseite mehrere Anweisungen, wie ngrok auf verschiedene Weise genutzt werden kann. Sie sollten ngrok gemeinsam mit anderen Containern mit Docker compose ausführen, können es aber auch separat ausführen. 

ngrok mit Docker compose ausführen (https://dashboard.ngrok.com/get-started/setup/docker) 

1. Entfernen Sie in der Datei docker-compose.yaml den Kommentar bei Configuration__PublicUri in etranslation-provider sowie im gesamten ngrok-Dienst. 
2. Ersetzen Sie YOUR-NGROK-AUTH-TOKEN durch Ihr ngrok-Token. 
3. Wenn dies noch nicht getan wurde, generieren Sie in https://dashboard.ngrok.com/cloud-edge/domains eine statische Domäne (im kostenlosen Plan kann eine solche Domäne generiert werden). Das Format der Domäne lautet *.ngrok-free.app 
4. Ersetzen Sie YOUR-NGROK-DOMAIN durch diese generierte Domäne (sowohl im ngrok-Befehl als auch für Configuration__PublicUri) HINWEIS! - bei Configuration__PublicUri ist es wichtig, https:// vor Ihrer generierten Domäne zu ergänzen, z. B. https://random-domain.ngrok-free.app/  

ngrok als separaten Prozess ausführen (https://dashboard.ngrok.com/get-started/setup/windows) 

1. Starten Sie nach der Installation von ngrok unter Windows und nach dem Hinzufügen Ihres Auth-Token diesen Befehl im Windows-Befehl prompt ngrok http http://localhost:5079 (eTranslation-Anbieter wird an Anschluss 5079 wie in docker-compose definiert bereitgestellt) 
2. ngrok generiert eine zufällige öffentliche URL für diesen lokalen Dienst (Format *.ngrok-free.app), kopieren Sie sie. 
3. In docker-compose.yaml etranslation-provider gibt es Configuration__PublicUri, was aktuell auskommentiert ist. Entfernen Sie den Kommentar und fügen Sie die ngrok-URL zwischen den Anführungszeichen ein. 

Anmerkungen 

• Der Wert webt-translation-hub.localhost kann durch jede beliebige Domäne ersetzt werden, sollte lokal mit .localhost enden (mehr über Traefik Routers https://doc.traefik.io/traefik/routing/routers/). Andernfalls unterstützt Traefik alle konfigurierten Domänen und kann zudem TLS bereitstellen (https://doc.traefik.io/traefik/https/overview/). 
• website-translation-service und configuration-service nutzen MySQL und folgenden Verbindungsstring „server=mysql;database=DATABASE_NAME;user=root;password=root“. Nutzer und Kennwort sollten vor dem Start der Produktion geändert werden, da sie lokal einfache, standardmäßige Werte verwenden. 
• mysql-Dienst nutzt MYSQL_ROOT_PASSWORD: root. Es kann auch geändert werden. 
• Wenn Sie einen der Dienste nicht über den gitlab-Link, sondern über das lokale Repository erstellen möchten, können Sie einen der build -> context-Links in einen lokalen Ordnerpfad ändern. Wenn sich beispielsweise das Repository website-translation-service unter C:/Test/Path/website-translation-service befindet, kann der entsprechende build context und dockerfile-Pfad geändert werden in: 

Für eine erweiterte Einrichtung und Konfiguration der Bereitstellung beachten Sie „Erweiterte Einrichtung des Translation Hub“. 

Erweiterte Einrichtung des Translation Hub 

Das Toolkit besteht aus mehreren Microservices; jede Komponente ist als Docker-Container einsetzbar. 

Komponenten: 

• Frontend (Frontend) – Anwendung, die für alle GUI und ihre Operationen verantwortlich ist. Es verwendet Angular, was bedeutet, dass diese Anwendung auf eine einzige Seite beschränkt ist 
• Translation-Hub-API (websiteTranslationService) – Dienst für das Übersetzungsmanagement 
• Konfigurationsdienst (configurationService) – Dienst für Konfigurationen 
• MT-API-Integrator (mtApiIntegrator) – Dienst für MT-Dienste 
• eTranslation-Anbieter (eTranslationProxy) – Dienst für die Implementierung von eTranslation 
• Redis – DB für eTranslation 
• MySQL – DB für APIs 

Minimale Systemanforderungen 

• Mindestens eine 2-Core-x86/x64-CPU (Central Processor Unit) 
• 5 GB RAM (Random Access Memory) oder mehr 
• 30 GB Speicher oder mehr (für DB) 
• Internetzugang 

Unterstützte Softwareversionen 

• Kubernetes-Cluster-Version 1.25 + 
• Helm 3.5+ 
• MySQL-Server 8.0 

Kubernetes-Cluster 

kubectl (Anweisungen) und Helm (Anweisungen) müssen installiert sein. 

WEB-T Translation Hub lokal in einer Entwicklungsumgebung ausführen 

Zu Test- und Entwicklungszwecken ist es eine einfache Möglichkeit zur Inbetriebnahme von Kubernetes, Rancher Desktop zu installieren. Sobald Sie es installiert haben, müssen Sie auch einen Ingress-Controller einrichten. Rancher verwendet Traefik als Standard, deaktivieren Sie es also zuerst, indem Sie Traefik aktivieren auf der Seite Kubernetes-Einstellungen deaktivieren. Dann den NGINX-Eingabecontroller bereitstellen: 

helm upgrade --install ingress-nginx ingress-nginx \ 

  --repo https://kubernetes.github.io/ingress-nginx \ 

  --namespace ingress-nginx --create-namespace 

MySQL-Datenbanken 

WEB-T-Datenbanken auf MySQL 8.0-Server einrichten 

Leere WEB-T-Datenbanken (DB) und Nutzer für Datenbanken vorbereiten: 

Passen Sie DB, DB-Nutzernamen und DB-Nutzerkennwörter nach Bedarf an. Sie müssen den Datenbanknamen Ihrer Helm-Chart-values.yaml-Datei entsprechen. 

-- For configurationService component 

CREATE DATABASE IF NOT EXISTS `webt_configuration` CHARACTER SET utf8 COLLATE utf8_unicode_ci; 

CREATE USER IF NOT EXISTS 'webt_configuration_user'@'%' IDENTIFIED WITH mysql_native_password BY 'webt_configuration_user_pass'; 

GRANT ALL PRIVILEGES ON `webt_configuration`.* TO 'webt_configuration_user'@'%'; 

-- For websiteTranslationService component 

CREATE DATABASE IF NOT EXISTS `webt_website_translation` CHARACTER SET utf8 COLLATE utf8_unicode_ci; 

CREATE USER IF NOT EXISTS 'webt_website_translation_user'@'%' IDENTIFIED WITH mysql_native_password BY 'webt_website_translation_user_pass'; 

GRANT ALL PRIVILEGES ON `webt_website_translation`.* TO 'webt_website_translation_user'@'%'; 

WEB-T-Container-Images erstellen und Container an Ihre Container-Registry pushen 

Lesen Sie hier mehr über das Aufbauen von Docker-Container-Images. 

Chart installieren 

Chart von GitHub-Repo verwenden 

1. Dieses Repository klonen 

git clone https://code.europa.eu/web-t/web-t-translation-hub-containerable/deploy…;

cd deployment/translation-hub 

2. Achten Sie darauf, die Datei values.yaml mit entsprechenden Werten zu aktualisieren oder eine neue Wertedatei zu erstellen. 

In der folgenden Tabelle sind die konfigurierbaren Parameter des Translation-Hub-Charts aufgeführt. Die aktuellen Standardwerte finden Sie in der Datei values.yaml. 

Optional: Konfiguration zum Einschränken des Zugriffs auf die Translation-Hub-Website (Basisauthentifizierung): 

Vorbereitung der Anmeldeinformationen für die Konfiguration der Basisauthentifizierung: 
Wenn basicAuth.enabled auf true gesetzt ist, müssen Nutzeranmeldeinformationen in der Datei values.yaml konfiguriert werden. 

Beispiel für die Vorbereitung der Basic Auth-Konfiguration für Nutzer web-t-user mit Kennwort web-t-pwd: 

#  In Linux terminal execute command: 

htpasswd -nb web-t-user web-t-pwd 

Beispiel zur Befehlsausgabe:  

web-t-user:$apr1$j2PQtFMu$7uEKTHLBdxwAbYKvgdfmh/ 

# Next, copy part of previous output – the part after username and colon symbol (e.g., part after "web-t-user:") and paste that to second command to get the base64-encoded password hash to use as a password: 

printf '$apr1$j2PQtFMu$7uEKTHLBdxwAbYKvgdfmh/' | base64 

Beispiel zur Befehlsausgabe: Verwenden Sie dies für die Kennwortkonfiguration: JGFwcjEkajJQUXRGTXUkN3VFS1RITEJkeHdBYllLdmdkZm1oLw== 

Konfiguration in der Datei values.yaml aktualisieren: 

basicAuth: 

  enabled: true 

  credentials: 

    - username: web-t-user 

      password: JGFwcjEkajJQUXRGTXUkN3VFS1RITEJkeHdBYllLdmdkZm1oLw== 

   # you can add more users if necessary by adding these lines with user prepared user credentials: 

    - username: user2      # to add another user 

      password: *pwd2*  # tanother users pwd 

3. Installieren Sie das Chart mit dem Freigabenamen translation-hub im web-t -Namensraum. 

helm install --create-namespace -n web-t translation-hub . -f values.yaml 

Chart deinstallieren 

Führen Sie Folgendes aus, um die Bereitstellung von translation-hub aus dem web-t-Namensraum zu deinstallieren/zu löschen: 

helm delete translation-hub --namespace web-t 

web-t-Namensraum löschen 

kubectl delete namespace web-t  

Übersicht über Translation Hub

Öffnen Sie nach dem Einrichten des Translation Hub den Browser, und navigieren Sie zu der URL, in der er sich befindet. 

Im Translation Hub finden Sie: 

• Übersetzungsanbieter – Zum Festlegen der Autorisierungsinformationen des Übersetzungsanbieters (eTranslation API-Anmeldeinformationen oder Basis-URL und API-Schlüssel). 
• Meine Integrationen – Zum Erstellen und Verwalten Ihrer Website-Integrationen. Sobald Sie eine Integration erstellt haben, erscheint diese in der Liste „Meine Integrationen“. 
• Übersetzungseditor – Zum Verwalten und Bearbeiten von Übersetzungen (für jede Integration separat). 
• Einstellungen – Zum Bearbeiten von Sprachen, Engines zur maschinellen Übersetzung und Domain-Zugriff (für jede Integration separat). Diese Seite enthält auch den generierten JavaScript-Integrationscode. 

Übersetzungsanbieter konfigurieren

Bevor Sie fortfahren:  

Sie müssen über ein eTranslation- oder WEB-T-kompatibles Übersetzungsanbieterkonto verfügen. Sie haben die eTranslation API-Anmeldeinformationen oder den Basis-URL- und API-Schlüssel von Ihrem Übersetzungsanbieter erhalten. 

So konfigurieren Sie den MT-Anbieter im Translation Hub:

1. Öffnen Sie auf im Translation Hub Übersetzungsanbieter.
2. Wählen Sie MT-Anbieter (eTranslation oder Nutzerdefiniert).
3. Geben Sie die erforderlichen Daten ein (eTranslation-API-Anmeldeinformationen oder Basis-URL und API-Schlüssel).
4. Klicken Sie auf Speichern.

Website-Translator-Integration

BBevor Sie fortfahren: 
Sie haben den Translation Hub bereitgestellt und haben Zugriff darauf.
Sie haben den Übersetzungsanbieter konfiguriert. 

Integration besteht aus 2 Hauptschritten:

1. Eine Integration erstellen im Translation Hub.
2. Einfügen des generierten JavaScript-Codes in Ihre Website.

Nachdem Sie den JavaScript-Code eingefügt haben, wird der Sprachwähler auf Ihrer Website angezeigt, und Sie können mit der Übersetzung beginnen, indem Sie eine Sprache auswählen.

In diesem Abschnitt:

• Meine Integrationen
• Integration (grundlegend):
  • Neue Integration erstellen
  • Den generierten JavaScript-Code in Ihre Website einbinden 
  • Ein Beispiel ausprobieren
  • Die Beispielseite übersetzen
• Integration (erweitert):
  • Sprachwähler einrichten
    • Standardmäßigen Sprachwähler konfigurieren
    • Nutzerdefinierten Sprachwähler verwenden
  • Fortschrittsleiste der Übersetzung anpassen
    • Anzeigeposition ändern
    • Fortschrittsleiste der Übersetzung ausblenden 
• In eine bereits mehrsprachige Website integrieren
• Vollständige Liste der Konfigurationsoptionen 
• _Edit_existing_integration
• _Delete_integration

Meine Integrationen

„Meine Integrationen“ listet alle Website-Integrationen auf, die Sie im Translation Hub erstellt haben.  Über diese Ansicht können Sie: 

• neue Integrationen erstellen 
• für eine spezifische Integration auf den Übersetzungseditor zugreifen
• auf die Einstellungen einer spezifischen Integration zugreifen
• die Integration löschen, indem Sie Einstellungen einer spezifischen Integration öffnen

Integration (grundlegend)

Durch Befolgen der grundlegenden Integrationsschritte fügen Sie der Website den standardmäßigen Sprachwähler hinzu. Dieser Abschnitt enthält ein HTML-Beispiel, das Sie ausprobieren können.

Der Sprachwähler wird als Drop-down angezeigt. Er lädt die verfügbaren Sprachen automatisch und startet die Übersetzung bei der Auswahl. Die Übersetzungen werden im Translation Hub im Übersetzungseditor angezeigt, wo Sie sie bearbeiten können.

Neue Integration erstellen

So erstellen Sie eine neue Website-Integration:

1. Öffnen Sie im Translation Hub die Option Meine Integrationen.
2. Klicken Sie auf +Website Translator einrichten.
3. Wählen Sie Allgemeine Einrichtung.
4. Füllen Sie das Formular aus:
   1. Geben Sie Ihrer Integration einen Namen.
   2. Fügen Sie die URL Ihrer Website-Domäne hinzu. (https://example.com, https://www.example.com und https://sub.example.com sollten separat hinzugefügt werden, indem Sie auf Eine weitere Domain hinzufügen klicken.)
   3. Wählen Sie die Originalsprache Ihrer Website aus.
   4. Wählen Sie die Sprachen aus, in die Ihre Website übersetzt werden soll.
   5. Wählen Sie in der generierten Tabelle für jede Sprache eine MT-Engine aus.
5. Klicken Sie auf Speichern.

Den generierten JavaScript-Code in Ihre Website einbinden

So fügen Sie das JavaScript-Plug-in Ihrer Website hinzu:

1. Öffnen Sie im Translation Hub die Einstellungen der spezifischen Integration.
2. Öffnen Sie die Registerkarte Allgemeines Setup.
3. Kopieren Sie das Tag für die Sprachwähler und fügen Sie es an der Stelle in Ihren Website-Code ein, wo der Sprachwähler angezeigt werden soll.
4. Kopieren Sie das Widget-Skript für die Website-Übersetzung und fügen Sie es am Ende des Tags <body> ein.
5. Der Sprachwähler sollte auf Ihrer Webseite erscheinen. Laden Sie die Seite bei Bedarf neu.

Ein Beispiel ausprobieren

So erstellen und übersetzen Sie eine Testseite:

1. Kopieren Sie das Beispiel unten.
2. Ersetzen Sie den Wert WebsiteTranslator.Options.api.clientId aus dem generierten Code.
3. Ersetzen Sie den Wert WebsiteTranslator.Options.api.url durch Ihre Translation-Hub-URL.
4. Speichern Sie die Datei in Ihrer Weblösung.
5. Öffnen Sie die Beispielseite in Ihrem Webbrowser.

Die Beispielseite übersetzen

Übersetzte Textsegmente werden in einer Datenbank gespeichert. Dies bedeutet, dass die erneute Übersetzung der gleichen Seite weitaus schneller sein wird und Sie Übersetzungen bearbeiten können.

Die Übersetzungen werden im Translation Hub im Übersetzungseditor angezeigt, wo Sie sie bearbeiten können.

Integration (erweitert)

Bevor Sie fortfahren:  
Sie benötigen einige JavaScript-Kenntnisse, um die Anweisungen der erweiterten Integration zu befolgen.  
Sie benötigen Zugriff zur Bearbeitung der in Ihrer Webseite eingebetteten JavaScript-Integration. 

In diesem Abschnitt:

• Sprachwähler einrichten
  • Standardmäßigen Sprachwähler konfigurieren
  • Nutzerdefinierten Sprachwähler verwenden
• Fortschrittsleiste der Übersetzung anpassen
  • Anzeigeposition ändern
  • Fortschrittsleiste der Übersetzung ausblenden
• In eine bereits mehrsprachige Website integrieren
• Vollständige Liste der Konfigurationsoptionen
   

Sprachwähler einrichten

Standardmäßigen Sprachwähler konfigurieren

Bevor Sie fortfahren:  
Sie haben die Schritte der grundlegenden Integration ausgeführt. Das JavaScript-Plug-in ist in Ihre Webseite eingebettet. 

Der Sprachwähler kann als Drop-down oder Liste von Schaltflächen angezeigt werden, die zur Anpassung an Ihren Stil weiterhin durch CSS gestaltet werden können. Er lädt die verfügbaren Sprachen automatisch und startet die Übersetzung bei der Auswahl.

Fügen Sie Ihrer Seite ein Element mit class="website-translator" hinzu. Siehe: Ein Beispiel.

Durch Festlegen von WebsiteTranslator.Options.ui.layout="menu" wird der Sprachwähler als Drop-down-Menü angezeigt. Das ist das standardmäßige Erscheinungsbild.

Der Sprachwähler des Website Translator kann als Liste von Schaltflächen angezeigt werden, indem WebsiteTranslator.Options.ui.layout="list" eingestellt wird.

Dies kann weiter gestaltet werden, indem CSS wie gewünscht überschrieben wird:

Nutzerdefinierten Sprachwähler verwenden

Bevor Sie fortfahren:  
Sie haben eine Integration im Translation Hub erstellt. 
Der Standard-Sprachwechsler (Drop-down oder Liste mit Schaltflächen) entspricht nicht Ihren Anforderungen. 

Initialisieren

Initialisiert Website Translator – Sprachauswahl, ruft verfügbare MT-Systeme ab. Wenn der lang-Parameter in der URL vorhanden ist, wird er in die Sprache übersetzt, die im Parameterwert angegeben ist. Wenn es keinen lang-Parameter gibt und die aktuelle Quellsprache dieselbe ist wie das letzte Mal, als Tilde Website Translator verwendet wurde, dann wird sie in die zuletzt übersetzte Zielsprache übersetzt.

Normalerweise sollte Initialisieren nur einmal ausgegeben werden, weitere Aufrufe initialisieren jedoch die Sprachauswahl erneut. Beachten Sie dies, wenn Ihre Seite DOM einschließlich Sprachwähler ändert.

Übersetzung starten und bis zum Abschluss warten

Übersetzen Sie die Seite in eine bestimmte Sprache. Wenn Sie Übersetzen aufrufen, selbst wenn die vorherige Übersetzung noch nicht fertig ist, wird die aktuelle Übersetzung abgebrochen, die Webseite in der Originalsprache wiederhergestellt und eine neue Übersetzung in der angegebenen Sprache gestartet.

Wenn die Seite übersetzt wird, wird der URL-lang-Parameter der Webseite in die übersetzte Sprache geändert oder hinzugefügt, falls er nicht vorhanden ist.

Zum Beispiel: https://example.com/ -> https://example.com/?lang=lt Wenn die Seitenübersetzung wiederhergestellt wird, wird der lang-Parameter auf die Quellsprache gesetzt.

Übersetzung abbrechen

Stellt die Seite in der Quellsprache wieder her.

Mit der angegebenen Sprache übersetzen

Die aktuelle Sprache abrufen

Gibt den Sprachcode für die Webseite zurück. Der Wert kann auch SourceLanguage sein. Dies kann verwendet werden, um die Sprache der Webseite programmatisch zu lesen.

Die verfügbaren Sprachen und die Systeme zur maschinellen Übersetzung abrufen

Gibt verfügbare Sprachen und Systeme zurück. Kann verwendet werden, um den nutzerdefinierten Sprachwähler oder die Sprachauswahl mithilfe der JavaScript-Übersetzungs-API zu erstellen.

Fortschrittsleiste der Übersetzung anpassen

Die Fortschrittsleiste der Übersetzung kann oben oder unten auf der Seite angezeigt oder auch vollständig ausgeblendet werden. Sie müssen den JavaScript-Integrationscode auf Ihrer Website bearbeiten, um ihn zu ändern.

Anzeigeposition ändern

Um die Anzeigeposition zu ändern, müssen Sie sie von JavaScript aus einstellen. 

Fügen Sie dem Integrationscode die folgende Zeile hinzu:

oder

Fortschrittsleiste der Übersetzung ausblenden

Website-Besucher sehen die Fortschrittsleiste der Übersetzung nicht und können die Seite durch Klicken auf den Wiederherstellungslink in die Originalsprache zurücksetzen.

Fügen Sie dem Integrationscode die folgende Zeile hinzu:

In eine bereits mehrsprachige Website integrieren

Verwenden Sie maschinelle Übersetzung, um eine bereits mehrsprachige Website in weiteren Sprachen verfügbar zu machen.

Geben Sie die Sprachen Ihrer Webseite an, in denen die Übersetzung bereits eingebettet ist und für die keine maschinelle Übersetzung durchgeführt werden soll. Konfigurieren Sie die Option thirdPartyTranslationLanguages, wenn wir deutsche und französische Versionen der englischen Seiten haben:

Vollständiges Beispiel:

<!DOCTYPE html>

<head>

  <script type="text/javascript" src="https://unpkg.com/@tilde-nlp/website-translator/dist/widget.js"></script>

</head>

<body>

    <div class="website-translator"></div>

    <p>This is an example</p> 

</body>

<footer>

    <script>

      // 👇 Change XXXXXXXXXXX to your Client-ID

     WebsiteTranslator.Options.api.clientId = "XXXXXXXXXXX"; 

     // 👇 Change XXXXXXXXXXX to your Translation Hub URL

     WebsiteTranslator.Options.api.url = "XXXXXXXXXXX";

// Specify the embedded languages of your webpage that already has a translation

        var thirdPartyLanguages = ["de", "fr", "sv"];

       WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages = thirdPartyLanguages;

        // Set the language of the webpage that is currently rendered. Example shows how to get the language code from the document lang attribute.

       WebsiteTranslator.Options.currentLanguage = document.documentElement.getAttribute('lang')

        // Add custom logic to use embedded translations instead of machine translation

       WebsiteTranslator.Options.translation.onLanguageSelected = function (selectedLanguage) {

            return new Promise(function (resolve) {

                let translationHandled = false

                console.info('Language selected: ' + selectedLanguage)

                // Check if custom action must be performed to open the embedded translation, bypassing the machine translation process

                if (WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages.includes(selectedLanguage)) {

                    translationHandled = true

                    if (WebsiteTranslator.Options.currentLanguage !== selectedLanguage) {

                       console.info('Redirecting to embedded language version of the page')

                        // Add your own logic on how to transform the URL of the current language to the URL of the selected target language

                        // or other necessary actions.

                        // Note. This replacement logic is to transform http://example.com/page_en.html to http://example.com/page_de.html

                        // and vice versa.

                        window.location.href = window.location.href.replace(/page_\w+/, 'page_' + selectedLanguage)

                        // For example, for page https://example.com/en/news to transform to https://example.com/de/news

                        // window.location.href = window.location.href.replace(/example.com\/\w+/, "/example.com/" + selectedLanguage)

                    }

                }

                resolve(translationHandled)

            })

        }

        // Initialize and run translations

        WebsiteTranslator.Initialize()

    </script>

</footer>

</html>

Vollständige Liste der Konfigurationsoptionen

Der Abschnitt enthält eine vollständige Liste der Konfigurationsoptionen des Plug-ins, die Sie über JavaScript festlegen können

Sprache

Das Widget bestimmt automatisch die Zielsprache, wenn die Webseite den lang-Parameter in der URL-Abfrage verwendet. 

Es unterstützt ISO-639-1-Sprachcodes mit optionalen ISO-3166-1-Alpha-2-Ländercodes. Wenn die Sprache nicht mit dem angegebenen Ländercode gefunden wird, prüft das Widget, ob die Sprache ohne Ländercode verfügbar ist. 

WebsiteTranslator.Options.currentLanguage 

Type: String 

Default: null 

Current web page language (if the web page is already pre-translated). The language in which the website has been translated. When currentLanguage is not equal to source language, selecting language to translate, Website Translator will try to get page in language by calling translation.onLanguageSelected(language)

WebsiteTranslator.Options.currentLanguage 

Type: String 

Default: null 

Aktuelle Sprache der Webseite (falls die Webseite bereits vorübersetzt ist). Die Sprache, in welche die Website übersetzt wurde. Wenn currentLanguage nicht gleich der Quellsprache ist, versucht der Website Translator bei Wahl der zu übersetzenden Sprache, die Seite in der Sprache zu erhalten, indem er translation.onLanguageSelected(Sprache) aufruft.

Debug-Modus

WebsiteTranslator.Options.debug 

Type: Boolean 

Default: false 

Ausführliche Protokollierung in Konsole aktivieren. 

Übersetzungs-API-Optionen 

WebsiteTranslator.Options.api.clientId 

Type: String 

Default: null 

Autorisierungsschlüssel, der es dem Website Translator ermöglicht, auf die erforderliche Übersetzungs-API zuzugreifen. 

Übersetzungsoptionen

WebsiteTranslator.Options.translation.autoTranslate 

Type: Boolean 

Default: true 

Letzte Zielsprache der Übersetzung speichern, und beim nächsten Laden der Seite wird automatisch in diese Sprache übersetzt. 

Wenn die Browser-URL lang-Parameter in der URL enthält, wird sie vom Website Translator zur Übersetzung verwendet. Andernfalls wird die gespeicherte Sprache verwendet, wenn der lang-Parameter nicht verfügbar ist.

WebsiteTranslator.Options.translation.translateOnlyAllowedTags 

Type: Boolean 

Default: false 

Nur Tags und deren untergeordnete Elemente mit dem Attribut translate="yes" übersetzen. 

WebsiteTranslator.Options.translation.translateAttributes 

Type: Boolean 

Default: true 

HTML-Attribute übersetzen. 

WebsiteTranslator.Options.translation.onLanguageSelected 

Type: Function 

Default: () => Promise.resolve(false) 

Aktionen zur Auswahl von Sprachen anpassen. Wenn diese Funktion implementiert ist, sollte sie Boolean -> true zurückgeben, wenn die Sprache mit dem Website Translator übersetzt werden muss; andernfalls false. 

WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages 

Type: Array<string> 

Default: [] 

Sprachen definieren, die mit einem Dritten übersetzt werden sollen. 

UI-Optionen 

WebsiteTranslator.Options.ui.headless 

Type: Boolean 

Default: false 

MT-Symbolleiste mit Übersetzungsfortschritt ausblenden. 

WebsiteTranslator.Options.ui.tooltipShowDelay 

Type: Number 

Default: 500 

Wie lange gewartet werden muss, nachdem der Nutzer begonnen hat, mit der Maus über die Übersetzung zu fahren, bis das Pop-up mit den Vorschlägen angezeigt wird (in ms). 

WebsiteTranslator.Options.ui.toolbarPosition 

Type: String 

Default: bottom 

Wo die Symbolleiste positioniert ist. Werte können sein: 

• „top“ – Zeigt die Übersetzungs-Symbolleiste oben auf der Seite an 
• „bottom“ – Zeigt die Übersetzungs-Symbolleiste unten auf der Seite an 

WebsiteTranslator.Options.ui.mainContentElement 

Type: HTMLElement 

Default: null 

Hauptcontainer HTMLElement für die Webseite, die alle scrollbaren Inhalte enthält. 

WebsiteTranslator.Options.ui.showPopup 

Type: Boolean 

Default: true 

Übersetzungs-Pop-up anzeigen oder ausblenden Auch bei Deaktivierung sind übersetzte Sätze bei Hervorhebung nicht sichtbar.  

WebsiteTranslator.Options.ui.showLanguagesInNativeLanguage 

Type: Boolean 

Default: false 

Sprachen in Muttersprache im Sprachwähler anzeigen. 

WebsiteTranslator.Options.ui.translate 

Type: String 

Default: source 

UI übersetzen, Werte können sein: 

• source – UI in Quellsprache anzeigen 
• target – UI in Zielsprache anzeigen 

WebsiteTranslator.Options.ui.showTranslationControls 

Type: Boolean 

Default: true 

Übersetzungsschaltflächen „Wiederherstellen“ und „Abbrechen“ auf der UI anzeigen oder ausblenden. 

WebsiteTranslator.Options.ui.layout 

Type: String 

Default: menu 

Anzeigemodus der Sprachauswahl in der UI ändern, die Werte können sein: 

• "menu" – Verfügbare Sprachen in Auswahl anzeigen. 
• "list" – Verfügbare Sprachen als Listenelemente anzeigen. 
• null – Sprachauswahl ausblenden.

Vorhandene Integration bearbeiten

So ändern Sie Sprachen und fügen neue Sprachen hinzu oder aktualisieren die Domains:

1. Öffnen Sie im Translation Hub Meine Integrationen.
2. Suchen Sie in der Liste der Integrationen nach der Integration, die Sie bearbeiten möchten.
3. Klicken Sie auf Einstellungen.
4. Scrollen Sie auf der Registerkarte Allgemeines Setup nach unten zu Website-Translator-Einstellungen.
5. Nehmen Sie Ihre Änderungen vor und klicken Sie auf Änderungen speichern.

Wenn Sie Ihre Website geöffnet haben, müssen Sie die Seite neu laden (Strg + F5), um die Änderungen zu sehen.

Integration löschen

So löschen Sie eine Integration:

1. Öffnen Sie im Translation Hub die Option Meine Integrationen.
2. Suchen Sie in der Liste der Integrationen nach der Integration, die Sie löschen möchten.
3. Klicken Sie auf Einstellungen.
4. Klicken Sie unten auf der Seite auf Website Translator löschen.

Webseiteninhalt vorübersetzen

Der Webseitenübersetzer crawlt Ihre Webseite, um eine Liste der URLs für die Übersetzung abzurufen. Anschließend übersetzt er diese URLs automatisch in die ausgewählten Sprachen. Bitte achten Sie darauf, dass Ihre Webseite öffentlich zugänglich oder aus derselben internen Umgebung zugänglich ist, in der sich auch der Translation Hub befindet. Die Übersetzungsgeschwindigkeit kann je nach Auslastung der Übersetzungsengine und des Übersetzungsanbieters variieren. 

Dynamischer Inhalt, Menüs und Pop-ups werden nicht vorübersetzt. Zur Übersetzung solcher Inhalte navigieren Sie zu der gewünschten Seite Ihrer Webseite, wählen die Sprache manuell aus dem Sprachwechsler und öffnen dann das Menü, Pop-up, Formular usw. 

So übersetzen Sie eine Webseite vor: 

1. Öffnen Sie „Übersetzungseditor“ und klicken Sie auf „Webseite vorübersetzen“. 
2. Wählen Sie die Webseitendomäne aus dem Dropdown. 
3. Wählen Sie die gewünschte(n) Sprache(n). 
4. Klicken Sie auf „Vorübersetzung starten“. 
5. Ein Vorübersetzungshinweis wird angezeigt, während der Vorgang läuft. Sie können die Übersetzungseditor-Tabelle aktualisieren, um die übersetzten Segmente anzuzeigen. 
6. Sobald die Vorübersetzung abgeschlossen ist, erscheint eine Erfolgsmeldung. 
7. Bei Abschluss der Vorübersetzung erscheint eine Erfolgsmeldung. 

Wenn die Vorübersetzung nicht auf Ihre Webseite zugreifen kann, erscheint ein Fehler:  

Übersetzungen verwalten 

Übersetzungen im Translation Hub anzeigen, bearbeiten und löschen. Übersetzen Sie Ihre Webseite mit dem Plug-in, damit die Übersetzungen erscheinen, aktualisieren Sie die Übersetzungseditor-Tabelle, um neue Übersetzungen anzuzeigen. 

Übersetzung bearbeiten

Übersetzungen müssen möglicherweise etwas angepasst werden, oder Sie möchten sie eventuell durch manuelle Übersetzungen ersetzen.

So bearbeiten Sie die Übersetzung:

1. Suchen Sie in der Übersetzungstabelle nach der Übersetzung.
2. Klicken Sie auf die Zeile.
3. Bearbeiten Sie die Übersetzung.
4. Klicken Sie auf Speichern.
5. Die Übersetzung wird aktualisiert und in der Datenbank als „bestätigt“ gekennzeichnet.

HTML-Tags in Quelle und Übersetzung werden als nummerierte Blöcke angezeigt. Die Farben und Zahlen ermöglichen es Ihnen, die Reihenfolge und das Abstimmen der Öffnungs- und Schließtags nachzuverfolgen. Die Übersetzung muss alle Tags aus der Quelle enthalten. 

Fehler wegen fehlender und nicht übereinstimmender Tags werden unter dem Segment angezeigt. Alle Tags aus dem ursprünglichen Segment müssen in der Übersetzung vorhanden sein.

Tags können zur Anordnung gezogen oder durch Anklicken unter dem Segment gelöscht und eingefügt werden.

Übersetzung bestätigen

So bestätigen Sie eine Übersetzung:

1. Suchen Sie in der Übersetzungstabelle nach der Übersetzung.
2. Klicken Sie am Ende der Zeile auf das Häkchen „✔️“.

Die Übersetzung in der Datenbank wird als „Bestätigt“ markiert. Beim Speichern von Änderungen an der maschinellen Übersetzung wird der Status automatisch auf „Bestätigt“ gesetzt. Maschinelle Übersetzungen, die nicht als „Bestätigt“ markiert sind, werden weiterhin in der Übersetzung verwendet. Diese Funktion soll helfen, den Überblick über Übersetzungen zu behalten, die überprüft werden sollten.

Übersetzungen löschen

So löschen Sie eine Übersetzung:

1. Suchen Sie in der Übersetzungstabelle nach der Übersetzung.
2. Klicken Sie am Anfang der Zeile auf das Kontrollkästchen.
3. Klicken Sie auf Löschen.

Übersetzungen mit einer bestimmten Zielsprache löschen

Sie haben sich entschieden, eine bestimmte Sprache von Ihrer Website zu entfernen, und möchten die gespeicherten Übersetzungen löschen.

So löschen Sie alle übereinstimmenden Übersetzungen:

1. Wählen Sie in der Übersetzungstabelle die Zielsprache aus dem Drop-down-Menü aus.
2. Klicken Sie am Anfang der Tabellenkopfzeile auf das Kontrollkästchen.
3. Klicken Sie auf Löschen.
4. Wiederholen Sie diese Schritte, bis alle Übersetzungen gelöscht sind.

Übersetzungen mit einer bestimmten URL löschen

Sie haben sich entschieden, eine bestimmte Seite von Ihrer Website zu entfernen, und möchten die gespeicherten Übersetzungen löschen.

So löschen Sie alle übereinstimmenden Übersetzungen:

1. Filtern Sie die Übersetzungen nach URL.
2. Wiederholen Sie die Schritte aus „Übersetzungen mit einer bestimmten Zielsprache löschen“ für jede Sprache.

Alle Übersetzungen löschen

Wiederholen Sie die Schritte aus Übersetzungen mit einer bestimmten Zielsprache löschen für jede Sprache. Oder löschen Sie die gesamte Website-Translator-Integration.

Übersetzungen filtern

Filtern Sie die Übersetzungen zu folgenden Zwecken:

• Übersetzungen oder Quelltext mit übereinstimmenden Wörtern oder Ausdrücken suchen.
• Nur die Übersetzungen sehen, die Sie nicht bestätigt haben.
• Übersetzungen suchen, die zu einer bestimmten Seite gehören.
• Nur SEO-Übersetzungen sehen.

Nach Status oder Übersetzungstyp filtern

So filtern Sie nach Übersetzungstyp:

1. Öffnen Sie oberhalb der Übersetzungstabelle das Drop-down-Menü Filter.
2. Wählen Sie Maschinelle Übersetzung oder Manuell bearbeitet.

So filtern Sie nach Übersetzungsstatus:

1. Öffnen Sie oberhalb der Übersetzungstabelle das Drop-down-Menü Filter.
2. Wählen Sie Nicht bestätigt oder Bestätigt.

Nach Inhaltstyp filtern

So sehen Sie nur die SEO-Metatag-Übersetzungen:

1. Öffnen Sie oberhalb der Übersetzungstabelle das Drop-down-Menü Filter.
2. Wählen Sie Text oder Meta (SEO).

Nach Text filtern

Der Text wird sowohl in den ursprünglichen Sprachsegmenten als auch in Übersetzungen durchsucht.

So filtern Sie die Tabelle nach Quell- oder Zieltext:

1. Geben Sie im Suchfeld das Wort oder den Ausdruck ein.
2. Drücken Sie die Eingabetaste.

Nach URL filtern

Die Tabelle kann gefiltert werden nach:

1. vollständiger URL der Seite, zum Beispiel: https://www.example.com/pages/my-page, www.example.com/pages/my-page
2. partieller URL, zum Beispiel: /pages/my-page

So filtern Sie die Tabelle nach Quell- oder Zieltext:

1. Geben Sie im Suchfeld die URL ein.
2. Drücken Sie die Eingabetaste.

SEO-Tags

SEO-Metatags werden wie jeder andere Text vom Plug-in übersetzt und erscheinen in der Tabelle Übersetzungseditor. Übersetzungen sind mit „SEO attribute:..“ gekennzeichnet, direkt unter der URL der Seite.

Filtern Sie die Tabelle nach Inhaltstyp, um nur den SEO-Inhalt anzuzeigen.

Übersetzungen exportieren

Webseitenübersetzungen können zur Sicherung oder Nachbearbeitung in anderen CAT-Tools oder Lokalisierungsplattformen in eine xliff-Datei exportiert werden. 

So exportieren Sie Übersetzungen: 

1. Öffnen Sie „Übersetzungseditor“ und klicken Sie auf „Übersetzungen exportieren“. 
2. Wählen Sie die Sprache aus. 
3. Wählen Sie den Inhaltstyp. Sie können alle Übersetzungen exportieren oder Übersetzungen nach Inhaltstyp (alle, Text, Meta-SEO), Übersetzungstyp (alle, maschinelle Übersetzung, manuell bearbeitet) oder Status (alle, bestätigt, nicht bestätigt) auswählen.  

Übersetzungen importieren 

Webseitenübersetzungen können nach der Nachbearbeitung in anderen CAT-Tools oder Lokalisierungsplattformen aus einer xliff-Datei importiert werden. 

So importieren Sie Übersetzungen: 

1. Öffnen Sie „Übersetzungseditor“ und klicken Sie auf „Übersetzungen importieren“. 
2. Laden Sie die xliff-Datei mit den Übersetzungen hoch und klicken Sie auf „Importieren“. 
3. Ein Importhinweis wird angezeigt, während der Vorgang läuft. Sie können die Übersetzungseditor-Tabelle aktualisieren, um die importierten Segmente anzuzeigen. 
4. Sobald der Import abgeschlossen ist, erscheint eine Erfolgsmeldung. 

Häufig gestellte Fragen

Wie binde ich Website Translator in meine Website ein?

Siehe: Website-Translator-Integration

Kann ich das Aussehen des Sprachwählers anpassen?

Siehe: Sprachwähler einrichten oder Nutzerdefinierten Sprachwähler 

Muss ich den Standard-Sprachwähler verwenden?

Der Website Translator kann mit einem nutzerdefinierten Sprachwähler integriert werden, der dem Design Ihrer Website entspricht. Legen Sie den Layoutmodus auf null WebsiteTranslator.Options.ui.layout=null fest, und implementieren Sie den Wähler selbst.

Siehe: Nutzerdefinierten Sprachwähler 

Kann ich den Übersetzungshinweis anpassen?

Siehe: Anzeigeposition ändern und Fortschrittsleiste der Übersetzung 

Kann ich maschinelle Übersetzung neben vorhandener menschlicher Übersetzung verwenden?

Wenn Ihre Website bereits in mehrere Sprachen übersetzt ist, können Sie diese in der Konfiguration als „Drittsprachen“ definieren. Wenn eine von ihnen ausgewählt wird, wird der Website Translator nicht versuchen, den Inhalt maschinell zu übersetzen.

Siehe: In eine bereits mehrsprachige Website 

Ich möchte einige Teile nicht übersetzen / Einige meiner Inhalte sind in einer anderen Sprache.

Inhalte, die nicht übersetzt werden sollen, wie Adressen, Listen von Firmennamen usw., sollten als nicht übersetzbar gekennzeichnet werden. Fügen Sie den Elementen das Attribut translate="no" hinzu.

Inhalte, die in einer anderen Sprache vorliegen, sollten mit einem Sprachattribut gekennzeichnet werden. Wenn Sie diese Inhalte nicht als nicht übersetzbar oder andere Sprache markieren, versucht der Website Translator, sie zu übersetzen und verfälscht damit den Inhalt. Eine Übersetzung aus mehreren Quellsprachen auf einmal wird nicht unterstützt.

Ich möchte explizit den Inhalt markieren, der übersetzt werden soll.

Markieren Sie die Elemente, die übersetzt werden sollen, mit translate="yes", und fügen Sie der Konfiguration die Option WebsiteTranslator.Options.translation.translateOnlyAllowedTags=true hinzu. Es werden keine anderen Inhalte übersetzt. Wenn einige untergeordnete Elemente nicht übersetzt werden sollen, markieren Sie diese mit translate="no".

Ich möchte, dass die Fortschrittsleiste der Übersetzung für Website-Besucher nicht sichtbar ist.

Fügen Sie der Konfiguration die Option WebsiteTranslator.Options.ui.headless=true hinzu. Website-Besucher sehen die Fortschrittsleiste der Übersetzung nicht und können die Seite durch Klicken auf den Wiederherstellungslink in die Originalsprache zurücksetzen.

Wie kann ich die Übersetzungen bearbeiten? 

Übersetzungen können über den Translation Hub bearbeitet werden. Siehe: Pre-translate website content 

The website translator will crawl your website to obtain a list of URLs for translation. It will then automatically translate these URLs into the selected languages. Please ensure that your website is publicly accessible, or accessible from the same internal environment as the Translation Hub. The translation speed may vary depending on the load of the translation engine and the translation provider. 

Dynamic content, menus, and popups are not pre-translated. To translate such content, navigate to the desired page of your website, manually select the language from the language switcher, and then open the menu, popup, form, etc. 

To pre-translate a website: 

8. Open the “Translation editor” and click “Pre-translate website”. 
9. Select the website domain from the dropdown. 
10. Choose the desired language(s). 
11. Click “Start pre-translation”. 
12. A pre-translation notice will be displayed while the process is ongoing. You can refresh the translation editor table to view the translated segments. 
13. Once pre-translation is completed success message will be displayed. 
14. Upon completion of the pre-translation, a success message will be displayed.

If pre-translation can’t access your website an error will be displayed: 

Manage translations

Übersetzt das Plug-in Bilder und Medieninhalte? 

Das Widget übersetzt keine Bilder oder Medieninhalte. 

Wird sich die Bearbeitung, die ich auf einer Seite vorgenommen habe, auf die Übersetzungen der gesamten Website auswirken? 

Bearbeitungen erfolgen segmentbasiert. Sie können die Übersetzung eines ganzen Satzes oder Absatzes ändern, aber nicht die eines einzigen Wortes in einem Satz. Wenn das gleiche Segment an anderer Stelle auf Ihrer Website angezeigt wird, wird die bearbeitete Übersetzung verwendet. Wenn es Änderungen im Segment gibt, muss es separat bearbeitet und genehmigt werden. Beispielsweise wirkt sich das Bearbeiten einer Übersetzung eines Elements in einem Menü oder einer Fußzeile auf alle Seiten aus, auf denen es angezeigt wird, aber das Ändern der Übersetzung eines Straßennamens, der in verschiedenen Sätzen angezeigt wird, wirkt sich nur auf die identischen Sätze aus. 

Werden die Übersetzungsbearbeitungen, die ich in meiner Testumgebung vorgenommen habe, in der Produktion verwendet? 

Ja, wenn Sie die gleiche Website-Translator-Integration verwendet haben. Wenn Sie die Übersetzungen getrennt halten möchten, generieren Sie einen Website Translator für jede der Umgebungen. 

Ich möchte Sprachen oder MT-Engines hinzufügen oder ändern. 

In den Einstellungen jeder Integration können Sie neue Sprachen und Domains ändern oder hinzufügen. Öffnen Sie im Translation Hub die Option Meine Integrationen, suchen Sie die richtige Integration, und klicken Sie dann auf Einstellungen. 

Wie aktualisiert man Übersetzungen nach dem Wechsel der Übersetzungsengine? 

So aktualisieren Sie die vorhandenen Übersetzungen nach einem Wechsel der Engine zur maschinellen Übersetzung oder einem Wechsel des Übersetzungsanbieters: 

1. Löschen Sie die alten Übersetzungen für die spezifische Sprache. 
2. Übersetzen Sie alle Inhalte erneut.