在 layui 中使用 translate.js

快速使用

在你的网页中加入以下js

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

实际使用场景示例

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

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

直接在其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>
  7. <script>
  8. layui.extend({
  9. translate: '{/}https://res.wang.market/translate/else/layui_exts/translate/translate' // {/}的意思即代表采用自有路径,即不跟随 base 路径
  10. })
  11. //使用拓展模块
  12. layui.use(['translate'], function(){
  13. var translate = layui.translate;
  14. translate.selectLanguageTag.show = false; //不出现的select的选择语言
  15. //当页面加载完后执行翻译操作
  16. window.onload = function () {
  17. translate.execute();
  18. };
  19. });
  20. </script>

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

https://gitee.com/mail_osc/translate_layui