Dokumentacja

Tłumaczenie treści

Zaznacz treść, którą chcesz przetłumaczyć Magic Translate. Oryginalna zawartość jest wyświetlana do momentu załadowania tłumaczenia.

Element <t>

Umieść tekst w elemencie <t>, aby go przetłumaczyć. Może zawierać HTML:

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


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

<mt-translate> działa również, jeśli wolisz niestandardową nazwę elementu.

Atrybut data-t

Jeśli nie możesz dodać elementu opakowania, dodaj data-t do istniejącego elementu, aby przetłumaczyć jego zawartość:

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


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

atrybuty

Wymień atrybuty do przetłumaczenia w data-t-attrs, oddzielone spacjami:

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


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

Zmienne

Umieść wartości, które się zmieniają, takie jak nazwa lub liczba, w data-v jako obiekt JSON i odwołaj je jako $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 tłumaczy tekst wokół wartości raz, jako Hi {0}, you have {1} new messages, i umieszcza wartości z powrotem na stronie. Tłumaczenie jest przechowywane w pamięci podręcznej i działa dla każdego imienia i każdej liczby, a same wartości nigdy nie są wysyłane do Magic Translate.

Aby wyświetlić nowe wartości, zmień data-v. Tłumaczenie zapisane w pamięci podręcznej jest ponownie używane i nie jest składane żadne żądanie:

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

Wartości są ponumerowane w kolejności, w jakiej pojawiają się po raz pierwszy. Tłumaczenie może przenosić je wszędzie tam, gdzie ich potrzebuje język, na przykład {1} neue Nachrichten für {0}.

Kilka zasad:

  • Zastępowane są tylko klawisze data-v, więc tekst taki jak $5 pozostaje taki, jaki jest. Jeśli dwa klawisze zaczynają się w ten sam sposób, takie jak count i counts, wygrywa najdłuższy.
  • Ta sama nazwa może pojawić się więcej niż raz.
  • Wartości są wstawiane jako tekst, nigdy jako HTML. Zamiast tego umieść znaczniki w tekście wokół nich: Hi <b>$name</b>.
  • W treści zmienne są zastępowane tylko tekstem, a nie w atrybutach takich jak href lub title.
  • Jeśli data-v nie jest prawidłowym obiektem JSON, tekst pozostaje nietłumaczony, a ostrzeżenie jest rejestrowane. Klucz, który nie pojawia się w tekście, również rejestruje ostrzeżenie.
  • $name jest widoczny do momentu załadowania skryptu. Załaduj skrypt na początku strony lub ukryj te elementy do tego czasu.

Opcje

Użyj tych atrybutów, aby ustawić opcje dla pojedynczego elementu:

atrybutWartośćOpis
data-formalityinformal lub formalUstawia formalność tłumaczenia.
data-langkod językowyZastępuje język strony.
data-t-idIdentyfikatorUmożli wia samodzielną edycję tego użycia tekstu. Dotyczy to zawartości elementu, a nie do jego data-t-attrs.
<t data-lang="fr" data-formality="formal">How are you?</t>

Zawartość, która się zmienia

Treści dodane do strony później lub zmienione przez skrypty są również tłumaczone. Działa to w przypadku treści renderowanych przez JavaScript, na przykład w htmx lub jQuery.

Wszystkie tłumaczenia żądane w tym samym czasie są wysyłane do interfejsu API w jednym żądaniu, a tłumaczenia są buforowane. Możesz zaznaczyć tyle elementów, ile chcesz.

Ograniczenia

Zawartość pojedynczego elementu nie może przekraczać 10 KB, czyli około 5000 znaków. Elementy zagnieżdżone są tłumaczone jako część nadrzędnego elementu <t>.

PoprzednieJavaScriptKolejnyInterfejs API JavaScript