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模块，代码如下：
|
1 2 3 4 5 6 7 8 9 |
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目录下， 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
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标签，把下面代码加入，代码自行调整
|
1 2 3 4 5 6 7 8 9 |
<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组件，示例如下
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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就完成了。
