javascript - i18next 翻译中的 HTML 标签

Question

我正在使用 i18next为我的博客提供 i18n 支持。它适用于纯文本内容，但当我尝试翻译包含 HTML 标记的内容时，它会在我翻译文本时显示原始标记。

例如，这是一篇未按预期工作的帖子中的标记片段:

<div class="i18n" data-i18n="content.body">
  In Medellín they have many different types of <i>jugos naturales</i>&nbsp;(fruit juice) ... <br />
  <br />
  ...
</div>

翻译代码如下所示:

var resources = {
  "en": ...,
  "es": {
    "translation": {
      "content": {
        "body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br /><br /> ... "
      }
    }
  }
}

i18n.init({"resStore": resources}, function( t ) {
  $('.i18n').i18n();
});

呈现翻译时，HTML 标记被转义并输出为文本:

En Medellín hay varios tipos diferentes de <i>jugos naturales</i>...<br /><br />

如何获取 i18next 来更改已翻译元素的 HTML？

Answer 1

为了使这项工作正常进行，您必须在要翻译的元素的 data-i18n 属性前加上 [html] 前缀:

<div class="i18n" data-i18n="[html]content.body">

来源:i18next.jquery.js