素材发布资源下载插件导航里面加上多国语言切换导航按钮

panjinyou

Theme Box的素材发布资源下载插件比较封闭，以贰先生的全站多国语言翻译插件为例，想要在Theme Box的素材发布资源下载插件里面穿透实现全站多国语言自动翻译在Theme Box的插件页面是无法穿透实现效果的，
下面实现如图添加导航并实现全站多国语言翻译：

在Theme Box的素材发布资源下载插件导航里面加上多国语言切换导航按钮并实现多种展现效果的方式 ... ... .. ...

游客，如果您要查看本帖隐藏内容请回复

查找：

</body>
复制代码

也就是在 </body> 之前，
在其上行添加：

<script src="source/plugin/domi_translate/template/translate.js" type="text/javascript"></script>
<script>
   
    // 将css代码添加到style标签中
    var style = document.createElement('style');
    style.innerHTML = "#translate {display: inline-block;background: #333!important;padding: 8px;position: fixed;left: 0;border-radius: 0 25px 25px 0; bottom: 10px;}.translateSelectLanguage {border-radius: 0 25px 25px 0;background: #333!important;color: #fff;border: none;font-weight: 600;text-align: center;}";
    document.head.appendChild(style);
    translate.setUseVersion2(); //设置使用v2.x 版本



    translate.language.setLocal("chinese_simplified"); //设置本地语种（当前网页的语种）。如果不设置，默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明。

    translate.selectLanguageTag.languages = "chinese_traditional,english,chinese_simplified,korean,german,japanese,russian,arabic,turkish,portuguese,thai,french"; //每个语种之间用英文,分割。比如这里设置的是支持英语、简体中文、韩语 的切换。根据后端翻译服务不同，支持的语言也不同。具体支持哪些，可通过 http://api.translate.zvo.cn/doc/language.json.html 获取 （如果您私有部署的，将请求域名换为您自己私有部署的域名）
    // 如果1的值为1，那么就执行translate.setAutoDiscriminateLocalLanguage()，否则就不执行
    if ("1" == 1) {
        translate.setAutoDiscriminateLocalLanguage();        //设置用户第一次用时，自动识别其所在国家的语种进行切换
    }
 
if ("" != "") {
    var tags = "".split(",");
    for (var i = 0; i < tags.length; i++) {
        translate.ignore.tag.push(tags[i].trim());
    }
}
 
if ("" != "") {
    var ids = "".split(",");
    for (var i = 0; i < ids.length; i++) {
        translate.ignore.id.push(ids[i].trim());
    }
} 
if ("" != "") {
    var classes = "".split(",");
    for (var i = 0; i < classes.length; i++) {
        translate.ignore.class.push(classes[i].trim());
    }
}

    const urlParams = new URLSearchParams(window.location.search);
    const subdomain = window.location.hostname.split('.')[0];
    const lang = urlParams.get('lang');
    const subdir = window.location.pathname.split('/')[1];

    const supportedLanguages = {
        'en': 'english',
        'zh': 'chinese_simplified',
        'cht': 'chinese_traditional',
        'ko': 'korean',
        'de': 'german',
        'ja': 'japanese',
        'ru': 'russian',
        'ar': 'arabic',
        'tr': 'turkish',
        'pt': 'portuguese',
        'th': 'thai',
        'fr': 'french'
    };

    const languages = supportedLanguages[subdomain] || supportedLanguages[lang] || supportedLanguages[subdir];

    if (languages) {
        translate.changeLanguage(languages);
    }


    translate.nomenclature.append('chinese_simplified','korean',`
apple=apple
Safari=Safari
简体中文=chinese
极简蓝=bluely
`);
translate.nomenclature.append('chinese_simplified','english',`
简体中文=chinese
极简蓝=bluely
`);



    translate.listener.start();
    translate.execute();//进行翻译
    translate.listener.renderTaskFinish = function (task) {
        console.log('已翻译完成');
    }

</script>
复制代码

上面的操作是 在 Theme Box的素材发布资源下载插件 里面引入 全站多国语言翻译插件 的必须jQuery库文件。

然后是在导航里面添加一个导航菜单，需要实现的功能：
1. 导航下拉多级层联菜单；
2. 鼠标滑动自动展开，而不是需要点击选择；
3. 菜单是 通过传参访问对应语言，而不是默认js切换的方式，以实现 多国语言 多次收录页面的效果。

下面是修改文件操作，Theme Box的素材发布资源下载插件 的导航菜单文件路径是在：/source/plugin/one_market/template/default/common/header.php

首先我们需要 引入Bootstrap和jQuery库，以实现我们添加的导航菜单的联动效果，这里引入的 是为了避免可能与 Theme Box的素材发布资源下载插件 本身JQ的冲突 而导致菜单效果不生效：

查找：

<!--{template one_market:default/common/header_common}-->
复制代码

在其上行添加：

<!-- 引入Bootstrap和jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
复制代码

然后还是这个文件，我们操作添加菜单的步骤：
查找：

</ul>
复制代码

在其上行添加：

<!-- 下拉菜单代码 -->
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Choose your language"> 
        <img src="source/plugin/domi_translate/template/icons/en.png" class="vm" width="18" alt="Choose your language">
          English
    </a>
    <div class="dropdown-menu" aria-labelledby="languageDropdown">
        <a class="dropdown-item" href="?lang=en"><img src="source/plugin/domi_translate/template/icons/en.png " width="14" height="14"> English</a>

        <a class="dropdown-item" href="?lang=ja"><img src="source/plugin/domi_translate/template/icons/ja.png" width="14" height="14"> 日本語</a>

        <a class="dropdown-item" href="?lang=de"><img src="source/plugin/domi_translate/template/icons/de.png" width="14" height="14"> Deutsch</a>

        <a class="dropdown-item" href="?lang=ko"><img src="source/plugin/domi_translate/template/icons/ko.png" width="14" height="14"> 한국 사람</a>

        <a class="dropdown-item" href="?lang=ar"><img src="source/plugin/domi_translate/template/icons/ar.png" width="14" height="14"> بالعربية</a>

        <a class="dropdown-item" href="?lang=tr"><img src="source/plugin/domi_translate/template/icons/tr.png" width="14" height="14"> TÜRKÇE</a>

        <a class="dropdown-item" href="?lang=pt"><img src="source/plugin/domi_translate/template/icons/pt.png" width="14" height="14"> português</a>

        <a class="dropdown-item" href="?lang=th"><img src="source/plugin/domi_translate/template/icons/th.png" width="14" height="14"> คนไทย</a>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="切换到简体中文"> 
        <img src="source/plugin/domi_translate/template/icons/zh.png" class="vm" width="18" alt="切换到简体中文">
          简体中文
    </a>
    <div class="dropdown-menu" aria-labelledby="languageDropdown">
        <a class="dropdown-item" href="?lang=zh"><img src="source/plugin/domi_translate/template/icons/zh.png" width="14" height="14"> 简体中文</a>
        <a class="dropdown-item" href="?lang=cht"><img src="source/plugin/domi_translate/template/icons/cht.png" width="14" height="14"> 繁體中文</a>
    </div>
</li>
<!-- CSS样式 -->
<style>
    .dropdown-menu {
        display: none;
    }
</style>

<!-- JS脚本 -->
<script>
    $(document).ready(function() {
        $('.nav-item.dropdown').hover(function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
        }, function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
        });
    });
</script>
复制代码

然后保存，更新缓存后，就可以看到最上图的实现效果~