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就完成