在 layui 中使用 translate.js

快速使用

在你的网页中加入以下js 

  1. layui.extend({
  2.     translate: '{/}https://mail_osc.gitee.io/translate_layui/layui_exts/translate/translate' // {/}的意思即代表采用自有路径，即不跟随 base 路径
  3.     //translate: '{/}./layui_exts/translate/translate' // 本地测试可以用这个
  4. })
  5. //使用拓展模块
  6. layui.use(['translate'], function(){
  7.     var translate = layui.translate;
  9.     //当页面加载完后执行翻译操作
  10.     window.onload = function () {
  11.         translate.execute();
  12.     };  
  13. });

实际使用场景示例

普通网站中点击某个语言进行切换

如下图所示，网站中的某个位置要有几种语言切换

直接在其html代码末尾的位置加入以下代码： 

  1. <!-- 增加某种语言切换的按钮。注意 ul上加了一个 class="ignore" 代表这块代码不会被翻译到 -->
  2. <ul class="ignore">
  3.     <li><a href="javascript:translate.changeLanguage('english');">English</a></li>|
  4.     <li><a href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a></li>|
  5.     <li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>
  6. </ul>
  8. <script>
  9.     layui.extend({
  10.         translate: '{/}https://mail_osc.gitee.io/translate_layui/layui_exts/translate/translate' // {/}的意思即代表采用自有路径，即不跟随 base 路径
  11.     })
  12.     //使用拓展模块
  13.     layui.use(['translate'], function(){
  14.         var translate = layui.translate;
  15.         translate.selectLanguageTag.show = false; //不出现的select的选择语言
  16.         //当页面加载完后执行翻译操作
  17.         window.onload = function () {
  18.             translate.execute();
  19.         };  
  20.     });
  21. </script>

Layui 中翻译组件源码的git仓库

https://gitee.com/mail_osc/translate_layui