文档

翻译内容

标记你想要 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，则最长的那个获胜。
  • 同一个名称可以出现多次。
  • 值以文本形式插入，而不是以 HTML 形式插入。改为在它们周围的文本中加上标记：Hi <b>$name</b>.
  • 在内容中，变量仅在文本中替换，不在诸如 href 或 title 之类的属性中替换。
  • 如果 data-v 不是有效的 JSON 对象，则文本将保持未翻译状态并记录警告。未出现在文本中的密钥也会记录警告。
  • $name 在脚本加载之前一直可见。在页面的早期加载脚本，或者在此之前隐藏这些元素。

选项

使用这些属性为单个元素设置选项：

属性价值描述
data-formalityinformal 或 formal设置翻译的形式。
data-lang语言代码覆盖页面的语言。
data-t-id一个身份证允许您自行编辑文本的这种用法。它适用于元素的内容，不适用于其 data-t-attrs。
<t data-lang="fr" data-formality="formal">How are you?</t>

更改的内容

稍后添加到页面或由您的脚本更改的内容也会被翻译。这适用于 JavaScript 呈现的内容，例如 htmx 或 jQuery。

同时请求的所有翻译都将通过单个请求发送到 API，并缓存翻译。你可以随心所欲地标记任意数量的元素。

局限性

单个元素的内容不能超过 10 KB，即大约 5,000 个字符。嵌套元素作为其父 <t> 元素的一部分进行翻译。

以前JavaScript下一步脚本 API