1、将language.zip解压放到page文件夹下(也可以放在其他地方,保证引入正确即可)。
2、在入口文件page/index.html引入刚才language解压的js文件
<script src="language/index.js"></script>3、添加多语言切换的下拉框,在page/dist/views/layout.html找到下面的代码:
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">在它里面加入下面的代码:
<li class="layui-nav-item" lay-unselect> <a href="javascript:;"> <cite id="languageStatus">中文</cite> </a> <dl class="layui-nav-child"> <dd onclick="changeLanguage('ch')"><a>中文</a></dd> <dd onclick="changeLanguage('en')"><a>Englist</a></dd> </dl> </li>因为比较简单,就写死了,其实应该读取language/index.js里面的配置。
在layout.html底部加入下面代码:
<script type="text/javascript"> //初始化语言 var language = localStorage.getItem('language'); for(let key in languageMap){ if(key === language){ document.querySelector('#languageStatus').innerText = languageMap[key].description; break; } } setLanguage(); </script>4、初始化语言,在每个需要翻译的文件底部加入下面的代码:
<script type="text/javascript"> setTimeout(()=>{ setLanguage(); }, 300) </script>5、需要翻译的话,这样写,这里的hello就是语言对应的字段名,在language/index.js中配置:
<div language="hello"></div>6、如果需要在js中输出对应的语言,则这样调用:
getLanguage('hello')