如何使用 i18next？翻译问题
Posted
技术标签:
【中文标题】如何使用 i18next？翻译问题【英文标题】：How to use i18next? Problems with translations 【发布时间】：2012-10-11 22:19:02 【问题描述】：我想在我的 jQuery Mobile 和 jQuery 网站上使用国际化选项。我试图用http://i18next.com 上的文档生成一个示例，但似乎我失败了。有人有使用 i18next 的经验吗？
这是我的例子：
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table border="0" id="menu1" class="menu">
<tr id="surname">
<td data-i18n="menu.surname"></td>
<td > </td>
</tr>
<tr id="firstName">
<td data-i18n="menu.firstName"></td>
<td > </td>
</tr>
</table>
</div>
</div>
</body>
</html>
翻译文件： /locales/de/translation.json
"menu":
"surname": "Name:",
"firstName": "Vorname:"
,
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
/locales/en/translation.json
/locales/dev/translation.json
"menu":
"surname": "Name:",
"firstName": "First Name:"
,
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
/js/translation.js
$(document).ready(function()
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init( lng: language );
i18n.init( debug: true );
$(".menu").i18n();
$("headline").i18n();
);
我得到的菜单翻译是“menu.name”而不是预期的“Name:”。 对于标题，我没有翻译，但我希望是“数据：”或“日期：”。
如果我尝试以下直接调用，我不会得到任何翻译： i18n.t("menu.surname", defaultValue: "Name:");
有人知道问题出在哪里吗？或者有人有适合我尝试做的工作示例吗？
【问题讨论】：
【参考方案1】：【参考方案2】： <!DOCTYPE html>
<html>
<head>
<title>Basic Sample Usage</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18next.js" type="text/javascript"></script>
</head>
<body>
<h3> you can switch lng via ?setLng='lngTag' </h3>
<a id="en" href="?setLng=en"> en </a>
|
<a id="de" href="?setLng=de"> de </a>
<h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3>
<h5>basic text</h5>
<ul class="nav">
<li class="active"><a href="#" id = "navy" data-i18n="nav.home"></a></li>
<li><a href="#" data-i18n="nav.1"></a></li>
<li><a href="#" data-i18n="nav.2"></a></li>
</ul>
<button id="btn" data-i18n="ns.common:add"></button>
<h5>extended usage of 'data-i18n' - apply to other attributes</h5>
<div id="extendedAttr">
<input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
<button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
</div>
<script>
$.i18n.init(
//lng: 'en',
ns: namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special',
useLocalStorage: false,
debug: true
, function(t)
//$('#navy').i18n(); for single
$('.nav').i18n(); // for group
$('#btn').i18n();
$('#extendedAttr').i18n();
);
</script>
</body>
</html>
locales/en/ns.special.json <=> make same for de/ns.speacial.json
"nav":
"home": "en home",
"1": "en link 1",
"2": " en link 2"
,
"btn":
"hoverMe": "en hover me!"
and locales/de/ns.common.json <=> make same for en/ns.speacial.json
"app":
"company":
"name": "my company"
,
"attr":
"placeholder": "de translated placeholder",
"title": "translated title"
,
"add": "de add"
【讨论】：
对于带有backbone.js 实现的i18n，请参考下面的链接与require.js github.com/manishcm/i18n-backbone以上是关于如何使用 i18next？翻译问题的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Next.js 中设置 i18n 翻译的 URL 路由？
使用 i18next 进行反应生产构建会导致翻译仅显示字符串