3 Star 2 Fork 156

jason.fy / translate

forked from 鬼画符 / translate 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.cn.md 17.05 KB
一键复制 编辑 原始数据 按行查看 历史
鬼画符 提交于 2023-02-09 09:34 . 更新 readme vip 的链接

translate.js

两行js实现html全自动翻译。
无需改动页面、无语言配置文件、无API Key、对SEO友好!

当前为中文文档 | See English Documents

特性

  • 使用极其简单。 无需任何前期准备,直接加入几行代码即可拥有多种语言全自动切换能力。
  • 不增加工作量。 无需另行改造页面本身,也没有各种语言都要单独配置的语言文件,更不需要你对页面本身要显示的文字区域进行代码调用,我认为那样对技术人员实在是太不友好了。而且它也不需要你到某某网站申请什么key,它本身就是开放的,拿来即用。
  • 极其灵活扩展。 您可指定它只翻译某些指定区域、切换语言时显示下拉框还是通过摆放多个切换语言按钮进行、可指定某些特定的元素不进行翻译忽略……
  • 自动匹配语种。 自动根据用户所在的国家切换其国家所使用的语种
  • 瞬间翻译能力。 内置缓存预加载机制,只要翻译过的网页,再次看时会达到瞬间翻译的效果,给用户的感觉就是,这个页面本来就是这种语言的,而不是经过第三方翻译的。
  • 永久免费使用。 本人热衷开源,有开源项目二三十个,这个项目的初衷就是使网页传播打破语言界限,世界是一家!当然如果您项目比较大,日访问量到了百万级千万级的,我们还是建议您私有化部署。
  • 搜索引擎友好。 完全不影响你本身网站搜索引擎的收录。爬虫所爬取的网页源代码,它不会对其进行任何改动,你可完全放心。

在线体验

http://res.zvo.cn/translate/demo.html

先拿别人的网站动手试试

效果

  1. 随便打开一个网页
  2. 右键 - 审查元素
  3. 粘贴入以下代码:
    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);
  4. Enter 回车键 , 执行
  5. 在当前网页的左上角,就出现了一个大大的切换语言,切换试试看。

快速使用

在网页最末尾, </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>

更多扩展用法

指定切换语言的select选择框的位置

你想在你页面什么地方显示,就吧下面这个放到哪即可。

<div id="translate"></div>

主要是这个 id="translate" 切换语言的按钮会自动赋予这个id里面。当然你也不一定非要是div的,也可以这样

<span id="translate"></span>

CSS美化切换语言按钮

可使用css来控制切换语言选择的显示位置及美观。如:

<style>
.translateSelectLanguage{
	position: absolute;
	top:100px;
	right:100px;
}
</style>

这就是控制切换语言的 <select> 标签

设定是否自动出现 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>

翻译时忽略指定的tag标签

translate.ignore.tag.push('span'); //翻译时追加上自己想忽略不进行翻译的tag标签,凡是在这里面的,都不进行翻译。

翻译时追加上自己想忽略不进行翻译的tag标签,凡是在这里面的,都不进行翻译。
如果你想查看当前忽略哪些tag标签,可直接执行 console.log(translate.ignore.tag); 进行查看 注意,这行要放到 translate.execute(); 上面

翻译时忽略指定的class值

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(); 上面

js主动切换语言

比如点击某个链接显示英文界面

<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(); 上面

对页面动态渲染的文本进行自动翻译

正常情况下,极大可能会有这种需求:

  1. 页面中需要通过ajax请求后端服务器获取数据,然后再将数据渲染展示出来。
  2. 页面中的弹出提示 (就比如 msg.jsmsg.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

v1.0

2022.2月发布,提供多语言支持能力,使网页无需改动快速具备多语言切换能力。

v2.0

2022.12月发布,增加更多的扩展方法。

  1. 可自定义忽略的Tag标签,进行翻译时会忽略之
  2. 可自定义忽略的class,进行翻译时会忽略之
  3. 默认内置 class="ignore" 为忽略的class,可在某个标签上增加此属性,即可使其跳过不进行翻译。
  4. 增加缓存机制,翻译一次后会将结果进行缓存,翻译过后,再查看,会达到秒翻译的结果,极大提高体验度。
  5. 增加局部翻译的能力,可支持自定义翻译的区域。
  6. 优化 input 输入框的 placeholder 的内容不翻译的问题
  7. 优化本地使用(file协议)时无法测试的问题。现在本地也能正常使用及测试了。
  8. 修复翻译时会莫名其妙多了无数层font标签的问题
  9. 修复翻译时,像是中文翻译为韩语,鼠标多经过几次会将其翻译的韩语重复翻译导致翻译结果不准确的问题。
  10. 开放翻译云服务平台接口 http://api.translate.zvo.cn/doc/index.html

v2.1

  1. 本地语种时默认赋予使用v2版本翻译
  2. 增加 translate.language.connector() 对句子的连接符单独进行适配
  3. 增加如果是被 <!-- --> 注释的区域,不进行翻译
  4. 增加英文 README 文档
  5. 增加对图片alt、meta关键词及描述的翻译
  6. 优化判断本地语种跟要翻译的目标语种是否一样,如果是一样,那就不需要进行任何翻译
  7. 增加 translate.listener.start() 可对当前页面变化的区域进行自动翻译,比如ajax加载数据后进行渲染
  8. translate.execute(...) 增加可传入翻译区域,传入的区域只是单纯做一次性翻译,不会影响 setDocuments(...) 的值
  9. 加入任务队列机制,彻底解决翻译时非常小概率有文字遗漏不翻译的问题。
  10. 增加 translate.setAutoDiscriminateLocalLanguage(); 用户第一次用时,可自动识别其所在国家的语种进行切换

v2.2

  1. 开放后端翻译服务接口的私有化一键部署,并开源。
  2. 大幅优化句子翻译的准确性,达到百度翻译、谷歌翻译的程度
  3. 增加可配置对某个元素指定id忽略其不进行翻译
  4. 增加单独针对连接符识别判断,以提高翻译准确度
  5. 增加可针对 translate.request.api.host 单独配置,以私有化部署
  6. 增加 inspector_v2.js ,用于v2版本的快速转换体验,并将readme中的快速体验默认便是使用此v2版本。
  7. 增加 translate.language.autoRecognitionLocalLanguage(); 如果未手动设置当前网页的语种,会自动识别语种
  8. 增加 translate.language.getLocal() 用户获取当前网页的语种(如果未设置,自动根据网页当前显示的文字进行识别语种)
  9. 增加 translate.selectLanguageTag.selectOnChange 用于提供重写select onchange 事件,以便更好扩展
  10. 优化中英文混合时翻译的一些意外问题
  11. 优化meta - keywords 替换的问题
  12. 优化转英文时如果英文有',比如 let's 这种的情况
  13. 优化 ignore 对忽略class name有多情况下的判断
  14. 开放后端翻译服务接口文档,以便更好自有扩展及使用
  15. 修复tag有时失效的问题,比如监听状态下局部翻译情况

这些开源项目正在使用

如下开源项目中已置入自动化翻译的能力:
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

高级服务

当前translate.js是基于js来对当前html进行翻译,绝大多数场景足够使用。但如果你查看页面源代码,会发现源代码并不会变,处于未翻译状态。如果你想针对页面源代码本身直接进行翻译,可以点此查阅我们这个扩展版本

1
https://gitee.com/feiyit/translate.git
git@gitee.com:feiyit/translate.git
feiyit
translate
translate
master

搜索帮助