ドキュメンテーション

コンテンツを翻訳する

Magic Translate に翻訳させたいコンテンツにマークを付けて。翻訳が読み込まれるまで、元のコンテンツが表示される。

<t> 要素

<t> 要素にテキストを入れて翻訳する。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> も機能する。

data-t 属性

ラッパー要素を追加できない場合は、既存の要素に data-t を追加して内容を翻訳する。

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


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

属性

翻訳する属性を data-t-attrs にスペースで区切ってリストアップする:

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


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

変数

名前やカウントなど、変化する値をJSONオブジェクトとして data-v に入れ、$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 は、値の周りのテキストを Hi {0}, you have {1} new messages として一度翻訳し、値をページに戻す。翻訳はキャッシュされ、すべての名前とすべてのカウントで機能し、値自体が Magic Translate に送信されることはない。

新しい値を表示するには、data-v を変更して。キャッシュされた翻訳は再利用され、リクエストは行われない：

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

値には最初に表示された順序で番号が付けられている。翻訳は、{1} neue Nachrichten für {0} のように、言語で必要な場所に移動できる。

いくつかのルール：

  • data-v のキーだけが置き換えられるので、$5 などのテキストはそのまま残る。count と counts のように、2つのキーが同じように始まる場合は、最も長いキーが優先される。
  • 同じ名前が複数回表示されることもある。
  • 値はHTMLではなくテキストとして挿入される。代わりに、周囲のテキストにマークアップを入れて:Hi <b>$name</b>.
  • コンテンツでは、変数はテキストでのみ置換され、href や title などの属性では置き換えられない。
  • data-v が有効なJSONオブジェクトでない場合、テキストは翻訳されずに警告が記録される。テキストに表示されていないキーは警告も記録する。
  • $name はスクリプトが読み込まれるまで表示される。ページの早い段階でスクリプトを読み込むか、それまでこれらの要素を非表示にする。

オプション

これらの属性を使用して、1つの要素のオプションを設定する：

属性価値説明
data-formalityinformal または formal翻訳の形式を設定する。
data-lang言語コードページの言語をオーバーライドする。
data-t-idあるIDだこのテキストの使い方を自分で編集できる。要素の内容に適用され、その data-t-attrs には適用されない。
<t data-lang="fr" data-formality="formal">How are you?</t>

変わるコンテンツ

後でページに追加されたコンテンツや、スクリプトによって変更されたコンテンツも翻訳される。これは、htmxやjQueryなどのJavaScriptでレンダリングされたコンテンツで機能する。

同時にリクエストされたすべての翻訳は、1回のリクエストでAPIに送信され、翻訳はキャッシュされる。要素は好きなだけマークできる。

制限事項

1つの要素の内容は10 KB、つまり約5,000文字を超えてはいけない。ネストされた要素は親の <t> 要素の一部として翻訳される。

前へJavaScript次はジャバスクリプト API