同步操作将从 鬼画符/translate 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
http://res.zvo.cn/translate/demo.html
var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'https://res.zvo.cn/translate/inspector_v2.js'; head.appendChild(script);
在网页最末尾, </html>
之前,加入以下代码,一般在页面的最底部就出现了选择语言的 select 切换标签。 其实就这么简单:
<script src="https://res.zvo.cn/translate/translate.js"></script>
<script>
translate.setUseVersion2(); //设置使用v2.x 版本
translate.language.setLocal('chinese_simplified'); //设置本地语种(当前网页的语种)。如果不设置,默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等,具体参见文档下方关于此的说明。
translate.execute();//进行翻译
</script>
你想在你页面什么地方显示,就吧下面这个放到哪即可。
<div id="translate"></div>
主要是这个 id="translate" 切换语言的按钮会自动赋予这个id里面。当然你也不一定非要是div的,也可以这样
<span id="translate"></span>
可使用css来控制切换语言选择的显示位置及美观。如:
<style>
.translateSelectLanguage{
position: absolute;
top:100px;
right:100px;
}
</style>
这就是控制切换语言的 <select>
标签
/*
* 是否显示 select选择语言的选择框,true显示; false不显示。默认为true
* 注意,这行要放到 translate.execute(); 上面
*/
translate.selectLanguageTag.show = false;
translate.execute();
使用场景是,如果使用了:
<a href="javascript:translate.changeLanguage('en');">切换为英语</a>
这种切换方式,那么 select下拉选择的就用不到了,就可以用此方式来不显示。
当然你也可以使用css的方式来控制其不显示。比如:
<style>
#translate{
display:none;
}
</style>
translate.ignore.tag.push('span'); //翻译时追加上自己想忽略不进行翻译的tag标签,凡是在这里面的,都不进行翻译。
翻译时追加上自己想忽略不进行翻译的tag标签,凡是在这里面的,都不进行翻译。
如果你想查看当前忽略哪些tag标签,可直接执行 console.log(translate.ignore.tag);
进行查看
注意,这行要放到 translate.execute(); 上面
translate.ignore.class.push('test'); //翻译时追加上自己想忽略不进行翻译的class标签,凡是在这里面的,都不进行翻译。
翻译时追加上自己想忽略不进行翻译的class标签,凡是在这里面的,都不进行翻译。
如果你想查看当前忽略哪些tag标签,可直接执行 console.log(translate.ignore.class);
进行查看
注意,这行要放到 translate.execute(); 上面
var documents = [];
documents.push(document.getElementById('test1'));
documents.push(document.getElementById('test2'));
documents.push(document.getElementById('test3'));
translate.setDocuments(documents); //指定要翻译的元素的集合,可传入一个或多个元素。如果不设置,默认翻译整个网页
可使用 translate.setDocuments(...) 指定要翻译的元素的集合,可传入一个或多个元素。如果不设置此,默认翻译整个网页。
注意,这行要放到 translate.execute(); 上面
比如点击某个链接显示英文界面
<a href="javascript:translate.changeLanguage('english');" class="ignore">切换为英语</a>
只需传入翻译的目标语言,即可快速切换到指定语种。具体有哪些语言,可查阅: http://api.translate.zvo.cn/doc/language.json.html
其中 class="ignore"
加了这个class,代表这个a标签将不会被翻译
用户第一次打开网页时,自动判断当前用户所在国家使用的是哪种语言,来自动进行切换为用户所在国家的语种。
如果用户手动切换了别的语种,再使用时,那就优先以用户所选择的为主,这个就不管用了。
translate.setAutoDiscriminateLocalLanguage(); //设置用户第一次用时,自动识别其所在国家的语种进行切换
translate.language.setLocal('chinese_simplified'); //设置本地语种(当前网页的语种)。如果不设置,默认就是 chinese_simplified 简体中文
具体有哪些语言,可查阅: http://api.translate.zvo.cn/doc/language.json.html
如果不设置,默认是简体中文 : chinese_simplified
这个会在出现 select 选择语言时,如果第一次使用,默认选中的就是这里设置的本地语种。
注意,这行要放到 translate.execute(); 上面
正常情况下,极大可能会有这种需求:
msg.info('你好');
) 这个提示是js加载出来的,提示文字也需要一并进行翻译的情况
您可加入下面一行代码,来实现以上需求。translate.listener.start(); //开启html页面变化的监控,对变化部分会进行自动翻译。注意,这里变化区域,是指使用 translate.setDocuments(...) 设置的区域。如果未设置,那么为监控整个网页的变化
建议放在 translate.execute() 这行之前。
如果你手动设置了 translate.setDocuments(...)
,那么监听的就不是整个页面了,而是单纯只监听 setDocuments(...)
所设置的区域的改动。
在某些政府机关及大集团内部项目中,对数据隐私及安全保密有强要求场景、以及您对自有客户希望提供高可靠翻译服务场景时,您可将翻译服务接口进行私有化部署,不走我们公开开放的翻译接口,以做到安全保密及后端服务全部自行掌控。
实际部署方式,可参考:https://github.com/xnx3/translate_service
部署好后,在 translate.execute();
之前,加入一行代码,如下所示:
translate.request.api.host='http://121.121.121.121/'; //将这里面的ip地址换成你服务器的ip,注意开头,及结尾还有个 / 别拉下
translate.execute();
如此,翻译请求接口就会走您自己服务器了。
如下图所示,网站中的某个位置要有几种语言切换
直接在其html代码末尾的位置加入以下代码:
<!-- 增加某种语言切换的按钮。注意 ul上加了一个 class="ignore" 代表这块代码不会被翻译到 -->
<ul class="ignore">
<li><a href="javascript:translate.changeLanguage('english');">English</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>
</ul>
<!-- 引入多语言切换的js -->
<script src="https://res.zvo.cn/translate/translate.js"></script>
<script>
translate.setUseVersion2(); //设置使用v2.x 版本
translate.selectLanguageTag.show = false; //不出现的select的选择语言
translate.execute();
</script>
您可直接 fork 本项目,注意,是github仓库 https://github.com/xnx3/translate ,非 gitee 的仓库
如果您改动了哪些代码,请在其中备注上自己的姓名、以及自己的个人主页,是您参与付出的留名。比如,陈某人参与了日语翻译的字符判断,那可以这样:
/*
是否包含日语,返回true:包含
参与完善者:陈某人 https://www.chenmouren.com/xxxxx.html
*/
japanese:function(str){
if(/.*[\u0800-\u4e00]+.*$/.test(str)){
return true
} else {
return false;
}
},
注意,v1.x 跟 v2.x 使用上略有差别,可使用 console.log(translate.version);
查看当前使用的版本。
另外 v1.x 版本的相关说明参见: 使用说明 | 在线demo
2022.2月发布,提供多语言支持能力,使网页无需改动快速具备多语言切换能力。
2022.12月发布,增加更多的扩展方法。
translate.language.connector()
对句子的连接符单独进行适配<!-- -->
注释的区域,不进行翻译translate.listener.start()
可对当前页面变化的区域进行自动翻译,比如ajax加载数据后进行渲染translate.execute(...)
增加可传入翻译区域,传入的区域只是单纯做一次性翻译,不会影响 setDocuments(...)
的值translate.setAutoDiscriminateLocalLanguage();
用户第一次用时,可自动识别其所在国家的语种进行切换如下开源项目中已置入自动化翻译的能力:
kefu.js H5在线客服,引入一行js代码拿来即用!支持手机、电脑、APP、小程序。可一键部署自己私有SAAS云客服平台
Pear Admin Layui Pear Admin 是一款开箱即用的前端开发模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin
Layui 翻译组件
...
Featbit 一个100%开源的 Feature flags / Feature Management 平台工具
LinkWeChat LinkWeChat 是基于企业微信的开源 SCRM 系统,是企业私域流量管理与营销的综合解决方案。
IoTSharp IoTSharp 是一个 基于.Net Core 开源的物联网基础平台, 支持 HTTP、MQTT 、CoAp 协议
流之云 信息化、数字化服务提供商
当前v2.0版本还处于优化期,并非完美稳定版本,当前只测试了大部分网站能完美适配,但肯定会有遗漏,随着使用的网站不断增加,会逐步修复发现的bug。稳定版本预计将会再之后的三到四个月后发布。当前您使用v2版本时,可直接用我们的js源即可,如果您有本地化的需求,可再后面稳定版本发布后再进行本地化放置。
本人热爱开源这件事,如果您是某款开源框架的作者,想要在您开源项目中加入此多语言切换能力,但接入时遇到了困难,欢迎加入下面的QQ群,说明您是哪个开源软件的作者,我必将全力协助。愿意开源的朋友,都是值得尊敬且支持的。
本云服务器平台可私有化部署,如果您有这方面需求,也可以联系我,但这个部署耗时几小时到半天,我们也需要给同事发工资,疫情三年都比较艰难,所以部署这块没法无偿帮助了,提供有偿部署,收个几百的人工费,还望能理解。
如果您在使用过程中遇到任何异常情况,请详细说一下您遇到的问题。如果可以,请写下您的网站,以便我们可以更全面地测试,以便快速找到问题所在
作者微信:xnx3com
交流QQ群:181781514
github: https://github.com/xnx3/translate
gitee: https://gitee.com/mail_osc/translate
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。