i18next翻译中的HTML标签 [英] HTML tags in i18next translation

问题描述

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

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>

翻译代码如下所示：

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标签会被转义并以文本形式输出：

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

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

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

推荐答案

为了使这项工作，你必须在你的元素的 data-i18n 属性前加上前缀想要翻译 [html] ：

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

资料来源： i18next.jquery.js

这篇关于i18next翻译中的HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！