Layui 集成i18n实现多语言功能

Layui默认不支持多语言，开发过程中需要用到多语言功能，这里集成i18n以便Layui支持多语言。 

jQuery.i18n.properties是一个轻量级的jQuery插件，用于从.properties文件中提供javascript的国际化，就像在Java资源包中一样。它根据提供的语言和国家代码（ISO-639和ISO-3166）或浏览器报告的语言加载和解析资源包（.properties）。 资源束是包含区域设置特定键值对的“.properties”文件。

Github:https://github.com/jquery-i18n-properties/jquery-i18n-properties

先下载jquery.i18n.properties.js , 为方便使用，将其封装成为layui模块，代码如下：

layui.define(function(exports) {
    "use strict";
 
    var $ = layui.jquery;
 
    $.i18n = {};
//<meta charset="utf-8">jquery.i18n.properties.js剩余代码
exports('i18n', $.i18n);
});

把上述代码保存成js文件，这里保存成i18n.js,放到dist/controller目录下

如图所示

 再新建一个i18np.js文件，放到dist/controller目录下， 代码如下：

 

layui.define(["jquery", "i18n"], function (exports) {
  var $ = layui.jquery,
    i18n = layui.i18n;

  var i18np = {};
  
  i18np.load = function (lang) {
    i18n.properties({
      name: "strings", // 资源文件名称
      path: "dist/i18n/", // 资源文件所在目录路径
      mode: "map", // 模式：变量或 Map
      language: lang, // 对应的语言
      cache: false,
      callback: function () {
        //这里是我通过对标签添加选择器来统一管理需要配置的地方
        //console.log(language);
        $("[lang-title]").each(function (e) {
          $(this).attr(
            "title",
            i18n.prop($(this).attr("lang-title"))
          );
        });
        $("[lang-pla]").each(function (e) {
          $(this).attr(
            "placeholder",
            i18n.prop($(this).attr("lang-pla"))
          );
        });
        $("[lang-ht]").each(function (e) {
           
          $(this).html(i18n.prop($(this).attr("lang-ht")));
        });
      },
    });
  };
i18np.changeLanguage = function(language){
    localStorage.setItem('language', language);
   location.reload();

}
i18np.prop=function(key /* Add parameters as function arguments as necessary  */){
	return i18n.prop(key );
}

  exports("i18np", i18np);
});

在dist下面新建一个文件夹为i18n，用来存放资源文件，文件命名规则为strings_语言标签.properties,strings对应i18np文件里的name（资源文件名称），可以自定义，对应修改配置参数。例如英文语音包命名：strings_en.properties

打开layout.html 找ul含有layadmin-layout-right标签，把下面代码加入，代码自行调整

<li class="layui-nav-item" lay-unselect>
        <a href="javascript:;">
          <cite lang-ht="lan_name">简体中文</cite>
        </a>
        <dl class="layui-nav-child">
          <dd onclick="changeLanguage('zh')"><a>简体中文</a></dd>
          <dd onclick="changeLanguage('en')"><a>English</a></dd>
        </dl>
      </li>

在layui的页面引入i18np组件，代码示例如下

layui.use([...,'jquery','i18np'], function(){
    var  ....
         ,$ = layui.$ 
	     ,i18np = layui.i18np;
		 var language = localStorage.getItem('language');
		 window.getprop=function(lan ){
		 	return i18np.prop(lan );
		 }
		 window.changeLanguage=function(lan){
		 	i18np.changeLanguage(lan);
		 }
		 i18np.load(language);

i18n集成到layui就完成