layuiadmin多语言简单实现,layuiadmin国际化简单实现

最近一个基于layuiadmin的项目需要实现国际化多语言，百度了一番，还是挺麻烦的。尝试了一下，没有成功，于是就自己实现了：

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')

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！