Inhalte übersetzen

Markiere den Inhalt, den Magic Translate übersetzen soll. Der Originalinhalt wird angezeigt, bis die Übersetzung geladen ist.

Das `<t>`-Element

Füge Text in ein <t>-Element ein, um es zu übersetzen. Es kann HTML enthalten:

<t>This content will be translated</t>

<t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>

<mt-translate> funktioniert auch, wenn du einen benutzerdefinierten Elementnamen bevorzugst.

Das `data-t`-Attribut

Wenn du kein Wrapper-Element hinzufügen kannst, füge data-t zum vorhandenen Element hinzu, um seinen Inhalt zu übersetzen:

<title data-t>My online shop</title>

<select>
  <option data-t>Small</option>
  <option data-t>Large</option>
</select>

Attribute

Liste die zu übersetzenden Attribute in data-t-attrs auf, getrennt durch Leerzeichen:

<input placeholder="Search products" data-t-attrs="placeholder" />

<img src="team.jpg" alt="Our team" title="Say hi" data-t-attrs="alt title" />

Variablen

Füge Werte, die sich ändern, wie einen Namen oder eine Anzahl, in data-v als JSON-Objekt ein und referenziere sie als $name:

<t data-v='{"name": "Bob", "count": 7}'>Hi $name, you have $count new messages</t>

<input placeholder="Search $count products" data-t-attrs="placeholder" data-v='{"count": 3}' />

Magic Translate übersetzt den Text rund um die Werte einmal, als Hi {0}, you have {1} new messages, und fügt die Werte wieder auf die Seite ein. Die Übersetzung ist zwischengespeichert und funktioniert für jeden Namen und jede Anzahl, und die Werte selbst werden niemals an Magic Translate gesendet.

Um neue Werte anzuzeigen, ändere data-v. Die zwischengespeicherte Übersetzung wird wiederverwendet und es wird keine Anfrage gestellt:

element.dataset.v = JSON.stringify({ name: 'Bob', count: 8 });

Die Werte sind in der Reihenfolge nummeriert, in der sie zuerst erscheinen. Die Übersetzung kann sie überall hin bewegen, wo die Sprache sie braucht, zum Beispiel {1} neue Nachrichten für {0}.

Ein paar Regeln:

Nur Schlüssel von data-v werden ersetzt, sodass Text wie $5 so bleibt, wie er ist. Wenn zwei Schlüssel auf dieselbe Weise beginnen, wie count und counts, gewinnt die längste.
Derselbe Name kann mehr als einmal vorkommen.
Werte werden als Text eingefügt, niemals als HTML. Füge stattdessen Markup in den Text um sie herum ein: Hi <b>$name</b>.
Im Inhalt werden Variablen nur im Text ersetzt, nicht in Attributen wie href oder title.
Wenn data-v kein gültiges JSON-Objekt ist, bleibt der Text unübersetzt und eine Warnung wird protokolliert. Ein Schlüssel, der nicht im Text vorkommt, protokolliert auch eine Warnung.
$name ist sichtbar, bis das Skript geladen ist. Lade das Skript früh auf der Seite oder verstecke diese Elemente bis dahin.

Optionen

Nutze diese Attribute, um Optionen für ein einzelnes Element festzulegen:

Attribut	Wert	Beschreibung
`data-formality`	`informal` oder `formal`	Legt die Formalität der Übersetzung fest.
`data-lang`	ein Sprachcode	Überschreibt die Sprache der Seite.
`data-t-id`	ein Ausweis	Ermöglicht es dir, diese Verwendung des Textes eigenständig zu bearbeiten. Es bezieht sich auf den Inhalt des Elements, nicht auf dessen `data-t-attrs`.

<t data-lang="fr" data-formality="formal">How are you?</t>

Inhalt, der sich ändert

Inhalte, die der Seite später hinzugefügt oder durch deine Skripte geändert wurden, werden ebenfalls übersetzt. Das funktioniert für Inhalte, die von JavaScript gerendert werden, zum Beispiel mit htmx oder jQuery.

Alle gleichzeitig angeforderten Übersetzungen werden in einer einzigen Anfrage an die API gesendet und die Übersetzungen werden zwischengespeichert. Du kannst so viele Elemente markieren, wie du möchtest.

Einschränkungen

Der Inhalt eines einzelnen Elements darf 10 KB nicht überschreiten, was etwa 5.000 Zeichen entspricht. Verschachtelte Elemente werden als Teil ihres übergeordneten <t>-Elements übersetzt.