i18next 翻译中的 HTML 标签

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

例如，以下是来自未按预期工作的帖子的标记片段:

<div class="i18n" data-i18n="content.body">在麦德林，他们有许多不同类型的 <i>jugos naturales</i>&nbsp;(果汁) ... <br/><br/>...</div>

翻译代码如下:

var 资源 = {"zh": ...,es":{翻译": {内容": {"body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br/><br/> ... "}}}}i18n.init({"resStore": 资源}, function(t) {$('.i18n').i18n();});

当翻译被渲染时，HTML标签被转义并作为文本输出:

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

如何让 i18next 更改已翻译元素的 HTML?

解决方案

为了使这个工作，您必须在要翻译的元素的 data-i18n 属性前面加上 [html]:

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

来源:i18next.jquery.jsp>

I'm using i18next to power i18n for my weblog. It works great on text-only content, but when I try to translate content that includes HTML markup, it is displaying the raw markup when I translate the text.

As an example, here is a snippet of the markup from a post that is not working as expected:

<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>

The translation code looks like this:

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();
});

When the translation is rendered, HTML tags are escaped and output as text:

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

How do I get i18next to change the HTML of translated elements?

解决方案

In order to make this work, you have to prefix the data-i18n attribute of the elements you want to translate with [html]:

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

Source: i18next.jquery.js