i18next翻译问题 [英] i18next translation problems
问题描述
我仍然尝试使用i18next来翻译我的jQuery应用程序。在遇到一些常见问题后（这里解决了：如何使用i18next？翻译问题）并且有解决方案我想翻译所有可见文本。但在这里我遇到了问题，我需要帮助来解决这个问题。我希望有人可以帮助我。
I still try to use i18next for translations of my jQuery application. After some general problems (solved here: How to use i18next? Problems with translations) and there solution I wanted to translate all my visible text. But here I got problems and I need help to solve this. I hope someone can help me.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<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>
<!-- Page Start -->
<div data-role="page" id="start" data-theme="e">
<div data-role="header" data-position="fixed" data-theme="e">
<h1 data-i18n="startHeader"></h1>
</div>
<div data-role="content">
<a href="#page1" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="buttonA1"></a>
<a href="#page2" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="buttonA2"></a>
<a href="#page3" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="buttonA3"></a>
</div>
</div>
<div data-role="page" id="page1" data-theme="e">
<div data-role="header" data-position="fixed" data-theme="e">
<a href="#start" data-icon="delete" data-i18n="buttonCancel1"></a>
<h1 data-i18n="header1"></h1>
</div>
<div data-role="content">
<a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button1"></a>
<a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button2"></a>
<a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button3"></a>
<a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button4"></a>
<a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button5"></a>
<a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button6"></a>
</div>
</div>
<div data-role="page" id="page2" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed">
<a href="#start" data-icon="delete" data-i18n="buttonCancel2"></a>
<h1 data-i18n="header2"></h1>
</div>
<div data-role="content"> </div>
</div>
<div data-role="page" id="page3" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed">
<a href="#start" data-icon="delete" data-i18n="buttonCancel3"></a>
<h1 data-i18n="header3"></h1>
</div>
<div data-role="content"> </div>
</div>
</body>
</html>
js / translations.js
js/translations.js
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
i18n.init({ lng: language, debug: true }, function() {
$(".menu").i18n();
$("#startHeader").i18n();
$("#buttonA1").i18n();
$("#buttonA2").i18n();
$("#buttonA3").i18n();
$("#header1").i18n();
$("#header2").i18n();
$("#header3").i18n();
$("#buttonCancel1").i18n();
$("#buttonCancel2").i18n();
$("#buttonCancel3").i18n();
$("#button1").i18n();
$("#button2").i18n();
$("#button3").i18n();
$("#button4").i18n();
$("#button5").i18n();
$("#button6").i18n();
});
});
/locales/de/translation.json
/locales/de/translation.json
{
"menu": {
"surname": "Nachname:",
"firstName": "Vorname:"
},
"startHeader": "Willkommen",
"buttonA1" : "A1",
"buttonA2" : "A2",
"buttonA3" : "A3",
"header1" : "Überschrift 1",
"header2" : "Überschrift 2",
"header3" : "Überschrift 3",
"buttonCancel1" : "Abbruch",
"buttonCancel2" : "Abbruch",
"buttonCancel3" : "Abbruch",
"button1" : "Klick mich 1",
"button2" : "Klick mich 2",
"button3" : "Klick mich 3",
"button4" : "Klick mich 4",
"button5" : "Klick mich 5",
"button6" : "Klick mich 6",
}
/ locales / en / translation.json
/locales/dev/translation.json
/locales/en/translation.json
/locales/dev/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"startHeader": "Welcome",
"buttonA1" : "A1",
"buttonA2" : "A2",
"buttonA3" : "A3",
"header1" : "Headline 1",
"header2" : "Headline 2",
"header3" : "Headline 3",
"buttonCancel1" : "Cancel",
"buttonCancel2" : "Cancel",
"buttonCancel3" : "Cancel",
"button1" : "Click me 1",
"button2" : "Click me 2",
"button3" : "Click me 3",
"button4" : "Click me 4",
"button5" : "Click me 5",
"button6" : "Click me 6",
}
菜单翻译仍然有效，所以我从索引中跳过了这部分。 html。
The menu translation still works, so I skipped this part from index.html.
其他问题：
是否可以一次翻译所有内容相同的文字？例如，取消按钮目前已单独翻译。
Additional question: Is it possible to translate all text with same content at one time? Examples are the cancel buttons which are currently translated separately.
预先感谢您的帮助。
Thomas
推荐答案
您可以嵌套翻译 - 比如建立词汇表。
You can nest your translations - like building a glossary.
// given resources
{
dev: { translation: { nesting1: '1 $t(nesting2)' } },
en: { translation: { nesting2: '2 $t(nesting3)' } },
'en-US': { translation: { nesting3: '3' } }
};
i18n.t("nesting1"); // -> 1 2 3
http://i18next.com/pages/doc_features.html#nesting
或者只是给每个取消按钮相同的密钥？
or just give every cancel button the same key?
$("#buttonCancel1").i18n();
$("#buttonCancel2").i18n();
$("#buttonCancel3").i18n();
<a id="#buttonCancel1" href="#start" data-icon="delete" data-i18n="cancel"></a>
<a id="#buttonCancel2" href="#start" data-icon="delete" data-i18n="cancel"></a>
<a id="#buttonCancel3" href="#start" data-icon="delete" data-i18n="cancel"></a>
{
"cancel" : "Cancel"
}
这篇关于i18next翻译问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
