Zum Hauptinhalt springen

JS SDK

Das Translify JS SDK hilft Ihnen, zweisprachige Übersetzungen auf Ihrer Website zu implementieren.

Verwendung​

  1. Initialisieren Sie Translify:
<script>
  window.immersiveTranslateConfig = {
    pageRule: {}
  }
</script>
  1. Fügen Sie den folgenden script-Code zu Ihrer Webseite hinzu
<script src="https://download.translify.ai/immersive-translate-sdk-latest.js"></script>

Beispiel

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Translify JS SDK</title>
    <script>
      window.immersiveTranslateConfig = {
        pageRule: {},
      };
    </script>
    <script
      async
      src="https://download.translify.ai/immersive-translate-sdk-latest.js"
    ></script>
  </head>

  <body>
    <div>
      <p>
        Night gathers, and now my watch begins. It shall not end until my death.
        I shall take no wife, hold no lands, father no children. I shall wear no
        crowns and win no glory. I shall live and die at my post.
      </p>
    </div>
  </body>
</html>

Parameter​

Mit pageRule können Sie die Konfiguration der Website anpassen, entscheiden, welche Inhalte übersetzt werden müssen oder die Webseitenstile anpassen.

initImmersiveTranslate({
  pageRule: {
    selectors: [".text"],
    excludeSelectors: ["nav", "footer"],
  },
});

Die Verwendung von selectors überschreibt den intelligenten Übersetzungsbereich und übersetzt nur Elemente, die mit dem Selektor übereinstimmen.

Mit excludeSelectors können Elemente von der Übersetzung ausgeschlossen werden.

Mit selectors.add können einige Selektoren zu den Standardselektoren hinzugefügt werden.

Mit selectors.remove können einige Selektoren von den Standardselektoren entfernt werden.

Wenn Sie einen bestimmten Bereich übersetzen und ein Element als Ganzes betrachten möchten, ohne es in Zeilen zu unterteilen, können Sie den atomicBlockSelectors-Selektor verwenden. Beachten Sie, dass Sie Elemente mit selectors auswählen müssen, bevor Sie atomicBlockSelectors verwenden.

{
  "selectors": ["div._aa_c h1", "li._acaz div[role=\"menuitem\"]"],
  "atomicBlockSelectors": ["div._aa_c h1", "li._acaz div[role=\"menuitem\"]"]
}

Weitere Parametererklärungen zu pageRule:

export interface PageRule {
  excludeMatches?: string | string[]; // Bestimmte Websites ausschließen.
  selectorMatches?: string | string[]; // Mit Selektoren übereinstimmen, ohne alle URLs anzugeben
  excludeSelectorMatches?: string | string[]; // Ausschlussregeln, wie oben.

  // Übersetzungsbereich festlegen
  selectors?: string | string[]; // Nur übereinstimmende Elemente übersetzen
  excludeSelectors?: string | string[]; // Elemente ausschließen, übereinstimmende Elemente nicht übersetzen
  excludeTags?: string | string[]; // Tags ausschließen, übereinstimmende Tags nicht übersetzen

  // Übersetzungsbereich hinzufügen, nicht überschreiben
  additionalSelectors?: string | string[]; // Übersetzungsbereich hinzufügen. Übersetzungspositionen in intelligenten Übersetzungsbereichen hinzufügen.
  additionalExcludeSelectors?: string | string[]; // Ausgeschlossene Elemente hinzufügen, um intelligente Übersetzung an bestimmten Positionen zu verhindern.
  additionalExcludeTags?: string | string[]; // Ausgeschlossene Tags hinzufügen

  // Original beibehalten
  stayOriginalSelectors?: string | string[]; // Übereinstimmende Elemente bleiben original. Häufig für Tags auf Foren-Websites verwendet.
  stayOriginalTags?: string | string[]; // Übereinstimmende Tags bleiben original, wie `code`

  // Bereichsübersetzung
  atomicBlockSelectors?: string | string[]; // Bereichsselektor, übereinstimmende Elemente werden als Ganzes betrachtet, nicht in Segmenten übersetzt
  atomicBlockTags?: string | string[]; // Bereichstagsselektor, wie oben

  // Block oder Inline
  extraBlockSelectors?: string | string[]; // Zusätzliche Selektoren, übereinstimmende Elemente werden als Blockelemente behandelt, die eine Zeile einnehmen.
  extraInlineSelectors?: string | string[]; // Zusätzliche Selektoren, übereinstimmende Elemente werden als Inline-Elemente behandelt.

  inlineTags?: string | string[]; // Übereinstimmende Tags werden als Inline-Elemente behandelt
  preWhitespaceDetectedTags?: string | string[]; // Übereinstimmende Tags umschließen automatisch Zeilen

  // Übersetzungsstile
  translationClasses?: string | string | string[]; // Zusätzliche Klassen zur Übersetzung hinzufügen

  // Globale Stile
  globalStyles?: Record<string, string>; // Seitenstile ändern, nützlich, wenn Übersetzungen Seitenunordnung verursachen.
  globalAttributes?: Record<string, Record<string, string>>; // Attribute von Seitenelementen ändern

  // Eingebettete Stile
  injectedCss?: string | string[]; // CSS-Stile einbetten
  additionalInjectedCss?: string | string[]; // CSS-Stile hinzufügen, anstatt direkt zu überschreiben.

  // Kontext
  wrapperPrefix?: string; // Präfix des Übersetzungsbereichs, Standard ist intelligent, entscheidet, ob Zeilen basierend auf der Anzahl der Zeichen umschlossen werden.
  wrapperSuffix?: string; // Suffix des Übersetzungsbereichs

  // Zeichenanzahl für Übersetzungsumbruch
  blockMinTextCount?: number; // Minimale Zeichenanzahl für Übersetzung als Block, andernfalls wird die Übersetzung ein Inline-Element sein.
  blockMinWordCount?: number; // Wie oben. Um immer Zeilen zu umschließen, setzen Sie beide auf 0.

  // Minimale Zeichenanzahl für übersetzbare Inhalte
  containerMinTextCount?: number; // Minimale Zeichenanzahl für Elemente, die während der intelligenten Erkennung übersetzt werden, Standard ist 18
  paragraphMinTextCount?: number; // Minimale Zeichenanzahl für ursprünglichen Absatz, Inhalte, die größer als die Anzahl sind, werden übersetzt
  paragraphMinWordCount?: number; // Minimale Wortanzahl für ursprünglichen Absatz

  // Erzwungene Zeilenumbruch-Zeichenanzahl für lange Absätze
  lineBreakMaxTextCount?: number; // Maximale Zeichenanzahl für erzwungenen Zeilenumbruch bei der Übersetzung langer Absätze.

  // Zeitpunkt für den Beginn der Übersetzung
  urlChangeDelay?: number; // Verzögerung in Millisekunden, bevor die Übersetzung nach dem Betreten der Seite beginnt. Standard ist 250ms, um auf die Initialisierung der Webseite zu warten.

  // AI-Streaming-Übersetzung
  aiRule: {
    streamingSelector: string; // GPT-Webseiten-Selektor, der das zu übersetzende Element markiert
    messageWrapperSelector: string; // Nachrichtenkörper-Selektor
    streamingChange: boolean; // Inkrementelle oder vollständige Aktualisierung für wiederholte Nachrichten auf GPT-ähnlichen Webseiten. GPT ist inkrementell
  };
}