项目介绍
由于本人英文水平一般,所以经常使用谷歌流量器自带的翻译功能翻译网页,便于阅读英文文档。
但是翻译功能比较死板,会把代码部分的因为也一同翻译,导致代码无法阅读,实际上只需要翻译代码的注释部分,便于阅读即可。
技术介绍
- 通过查阅资料得知,在html5中,可以给标签添加
translate="no"
(值也可以为yes)属性,实现阻止浏览器翻译指定的标签内容。
兼容性
MDN中表示所有浏览器都无法很好支持,并且建议 使用
class="notranslate"
进行替代。但是经过测试,谷歌浏览器可以完美支持,其他的浏览器还没测试,应该谷歌内核的都没什么问题。如果想安全起见,可以用notranslate
类进行代替。
translate的默认值和作用域
默认值为:yes(未使用translate属性的时候,默认可以翻译)
作用域:优先使用局部设置的规则,例如body中设置为no,但是div中设置为yes,则除了设置为yes的div以外,其他的元素都不会被翻译。
具体实现
给浏览器安装油猴插件,并且创建脚本,油猴(Tampermonkey)插件安装教程可以自行百度,脚本的开发文档也不在这里赘述,网上都有教程。
脚本的具体代码实现如下:
// ==UserScript==
// @name github翻译
// @namespace http://tampermonkey.net/1312321
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://github.com/*
// @match https://*.github.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
window.onload=function(){
/*
将整个文档设置为不翻译
*/
var no_translate= document.querySelectorAll("body")
/*
指定需要翻译的部分,github中代码注释全部在.pl-c中
*/
var yes_translate= document.querySelectorAll("pre .pl-c,tbody .pl-c, span.markdown-title,article h3,article p,article li") //指定需要转码的部分代码注释部分
//更改节点信息
no_translate.forEach(function(item){
item.setAttribute("translate", "no")
})
yes_translate.forEach(function(item){
item.setAttribute("translate", "yes")
})
}
})();