首页 > 建站教程 > 前端框架 >  layuiadmin多语言简单实现,layuiadmin国际化简单实现正文

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