问题描述
我正在使用 i18next 为我的博客支持 i18n.它适用于纯文本内容，但是当我尝试翻译包含 HTML 标记的内容时，它会在我翻译文本时显示原始标记.
例如，以下是来自未按预期工作的帖子的标记片段:
<div class="i18n" data-i18n="content.body">在麦德林，他们有许多不同类型的 <i>jugos naturales</i> (果汁) ... <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> (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
这篇关于i18next 翻译中的 HTML 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！