基于i18nnext的前端国际化

2023-10-17 11:34:13

1、下载i18next.min.js，并导入

2、在WebContent文件夹下创建locales文件夹，在locales下创建zh.json（中文）、en.json（英文）文件

格式如下：

英文

{
   "app":{
         "name":"Test"
          },
    "index":{
           "username":"username...",
           "password":"password...",
           "loginBtn":"login"
             }
}

中文

{
   "app":{
         "name":"测试"
          },
    "index":{
           "username":"用户名称...",
           "password":"登录密码...",
           "loginBtn":"登录"
             }
}

3、i18next初始化

 $.i18n.init(
        {resGetPath:'${base}/locales/__lng__.json',
	 load : 'unspecific',
	 fallbackLng : false,
	 lng : window.navigator.userLanguage|| window.navigator.language || 'en-US',
	 fallbackLang : 'en',
	}, 
	function(t) {
             //需要国际化部分的最外层id
             $('#标签id').i18n();
        }
 );

4、初始化参数说明

lng : 'zh-CN' 设置当前翻译的语言(如果没有设置具体的lng,会查看querrustringparameter中是否有?setLng=zh-CN的设置、会检查cookie中是否有i18n曾设置的语言、或检查浏览器语言)
detectLngQS : 'lang' 设置查询参数的名称，对应上一条的话变成?lang=zh-CN；同理，还可以更改cookieName, 如cookieName:'lang'
useCookie:false设置是否使用cookie，若不使用，当未设置lng参数时，也不会从cookie中查找。
preload:['zh-CN','en-US'] 预加载某个语言包
lngWhitelist:['zh-CN','en-US']只能加载特定的几种语言
fallbackLng:false|['en']设置缺失备用语言，若要加载的语言存在某个键值缺失，则用fallbackLng来代替；false为不使用该缺省补全机制。
useLocalStorage:true|false,localStorageExpirationTime:86400000 // in ms,default 1 week默认情况下是不开启caching的，可根据实际需要开启，直到localStorage中曾缓存的语言过期，新的语言才会被加载。改设置localStorage中缓存的是整个语言包，也就是language.json文件中的内容，对应每一个加载的语言包，都会产生一个localStorage存储项。
resGetPath:'locales/__lng__/__ns__.json，resGetPath:'locales/__ns__-__lng__.json设置加载语言包的路径，对应上述两种模式，路径示例如下：locales/en_US/translation.json|locales/translation-en-US.json
getAsync:false设置是否异步加载,false为同步。

5、例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
     <div class="col-lg-12">
         <div class="ibox float-e-margins"> 
             <div class="ibox-content">
             	<table class="table table-stripped ">
                      <thead>
                       <tr>
                               <th data-i18n="index.username">用户名 </th>
                               <th data-i18n="index.password">密码</th>
                               <th data-i18n="index.loginBtn">登录</th> 
                       </tr>
                      </thead> 
            	</table>
         	</div>
         </div>
	</div>	  
</body>

</html>

6、js中alert等部分文字的国际化

  $.t("index.username");

7、当使用BootstrapMultiselect需要国际化其中option时，例如修改下图中的 --请选择--

此时，在html中设置是不起作用的。如下：

<option value="" data-i18n="select.selectplease">--请选择--</option>

原因：BootstrapMultiselect插件是获取select标签的option的值然后重新布局。但是经过i18next国际化后的option值

在获取的时候，获取到的依然是默认值，所以国际化失败。

解决方法：在js中动态设置select的option值，并且代码在BootstrapMultiselect初始化前执行。jquery代码如下

 $("select").children("option[value='']").html($.t("select.selectplease"));

8、设置input的placeholder或者value，如下：

<input id="test" name="test"  data-i18n="[placeholder]index.holdertest" placeholder="this is a test"/>

<input id="test" name="test"  data-i18n="[value]index.test" value="test"/>