素材发布资源下载插件导航里面加上多国语言切换导航按钮
Theme Box的素材发布资源下载插件比较封闭，以贰先生的全站多国语言翻译插件为例，想要在Theme Box的素材发布资源下载插件里面穿透实现全站多国语言自动翻译在Theme Box的插件页面是无法穿透实现效果的，下面实现如图添加导航并实现全站多国语言翻译：
修改文件，
编辑：
/source/plugin/one_market/template/default/common/footer.php
查找：
</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.trim());
}
}
if ("" != "") {
var ids = "".split(",");
for (var i = 0; i < ids.length; i++) {
translate.ignore.id.push(ids.trim());
}
}
if ("" != "") {
var classes = "".split(",");
for (var i = 0; i < classes.length; i++) {
translate.ignore.class.push(classes.trim());
}
}
const urlParams = new URLSearchParams(window.location.search);
const subdomain = window.location.hostname.split('.');
const lang = urlParams.get('lang');
const subdir = window.location.pathname.split('/');
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 || supportedLanguages || supportedLanguages;
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>然后保存，更新缓存后，就可以看到最上图的实现效果~
页:
[1]