个人中心
gpt4 book ai didi

javascript - i18next 翻译问题

转载 作者：行者123 更新时间：2023-11-28 00:14:07 25 4
gpt4 key购买 nike

我仍然尝试使用 i18next 来翻译我的 jQuery 应用程序。在遇到一些一般性问题(在此处解决:How to use i18next? Problems with translations)和解决方案之后，我想翻译我所有可见的文本。但是在这里我遇到了问题，我需要帮助来解决这个问题。我希望有人能帮助我。

<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">&nbsp;</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">&nbsp;</div>
  </div>
</body>
</html>

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

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

{
  "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",
}

菜单翻译仍然有效，所以我从 index.html 中跳过了这部分。

补充问题:是否可以一次翻译所有内容相同的文本？例如取消按钮，目前单独翻译。

预先感谢您的帮助。

托马斯

最佳答案

您可以嵌套翻译 - 就像构建词汇表一样。

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

或者只是给每个取消按钮使用相同的键？

$("#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"
}

关于javascript - i18next 翻译问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13265575/

25 4 0
文章推荐： javascript - 将 child 添加到弹出窗口中。 (JavaScript)
文章推荐： javascript - JQuery:图片库向下滑动图像以及在 src 中淡入淡出
文章推荐： html - 如何验证 wp seo yoast 面包屑？
文章推荐： javascript - jQuery scrollTop - 动画不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com