利用Google翻译实现网站国际化——js插件

先说背景

网站已经使用常见的方式实现中英国际化，即每种语言写一套对应的语言文件，但后期要求实现多国语言国际化，如果还按照之前的方式，工作量大，要把人写疯。
且不便于维护，某个词改了统统都要改。

因此有没有一种简单易用的及时翻译插件，类似于谷歌浏览器自带的翻译工具那种，一点即可全文翻译。

最后在网上找到了一些，要么没有文档介绍，要么就需要npm安装，nodejs支持啥的，但是我对前端并不精通，就继续找，最后找到了谷歌插件，简单易用。

使用方法，在页面加入以下代码即可

<!--把button放在右下角-->
<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
<script>
function googleTranslateElementInit() {

	new google.translate.TranslateElement(
		{
            //pageLanguage: 'en',
			layout: google.translate.TranslateElement.InlineLayout.SIMPLE
		}, 
		'google_translate_element'
	);

}
</script>
<!--谷歌被墙，原来是translate.google.com，现在用cn-->
<script src="//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

没错，这样就行了，来看看页面效果：

效果非常好。

但是有些小问题，pageLanguage: 'en'这个参数设了没用，而且因为直接访问的google资源，时不时会加载失败，所以我把一些资源下载下来作了一些修改：

还有这里给出我修改后的本地js：https://download.csdn.net/download/wokuailewozihao/10625151

基本上只是修改了各个js的加载路径，然后element_main.js就是那个翻译main_zh-CN.js的信息，因为我设置pageLanguage没用就直接改了，有空的同学可以研究下，没闲心的直接用就是了

=========================================追更20180914============================================

今天又遇见一个问题，记录下，是关于清除cookie的。

由于原生google翻译插件样式不太友好，所以自己用代码追加覆盖原来的样式,

改成一个工具栏，并且去除原来顶部的操作框，

去除这个顶部操作框

改成这种

源码全是混淆过的，所以这里直接进行dom操作对原样式进行覆盖

工具栏html,只是个例子
<div id="toolbox" class="toolbox" @click="hideFeedback()">
    <ul @click.stop>
        <li id="google_translate_element">
        </li>
        <li class="qr-code">
            <img src="${staticPath}/static/images/app.svg"/>
            <p>APP</p>
        </li>
        <div class="qr-code-wrap">
            <img src="${staticPath}/static/images/QR-Code.jpg"/>
        </div>
        <li @click.capture="toFeedback()">
            <img src="${staticPath}/static/images/feedback.svg"/>
            <p>Feedback</p>
        </li>
        <li @click.capture="scrollTop()">
            <img src="${staticPath}/static/images/scrolltop.svg"/>
            <p>Top</p>
        </li>
    </ul>
    <div id="feedback" v-show="feedbackShow">
        <div class="shade-bg"></div>
        <div class="signin-wrap">
            <div class="signin-container">
                <div class="signin-content" @click.stop>
                    <div class="signin-header">Feedback</div>
                    <div class="signin-body">
                        <form class="signin-form">
                            <label>` + i18n['feedbackContent'] + `</label>
                            <textarea name="feedbackContent"  v-model="feedbackContent" placeholder="please input feedback content..."></textarea>
                            <div class="submit" @click="feedbackSubmit">` + i18n['button.feedbackSubmit'] + `</div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

var googleTranslate;
            googleTranslate = new google.translate.TranslateElement(
                {
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                },
                'google_translate_element'
            );
            $("#span_chose_language").remove();
            $("#google_translate_element").children("div").removeClass("goog-te-gadget").removeClass("skiptranslate");
            $("#google_translate_element").find("div").attr("style","padding:0px");
            $(".skiptranslate").attr("style","visibility:visible;display:none;");
            //$("body").attr("style","top:0;margin:0;");
            $("body").css({top:0,margin:0,'min-height': ''});

同时修改element_main.js，搜索40px，搜到  ;a?(O(this.b.a.body,"top","40px"), 将40px改成0px，就可以将顶部操作框去除

但是去了顶部操作框后，必须加一个清除翻译的按钮，经测试发现，谷歌翻译插件的翻译生命周期存于cookie中，

所以这里我加了一个清除按钮，访问页面时先getCookie("googtrans")，如果有值就添加一个按钮

<template v-if="googtrans && googtrans!=''"><div class="lang-change" @click="cleartrans"><span>ClearG</span></div></template>

点击按钮就清除cookie并且刷新

...
cleartrans: function(){
    delCookie("googtrans");
    window.location.reload();
}
...
//这里一定要注意，cookie三要素：时间，路径，域名，
//删除cookie直接把时间设为过去的时间即可

function getCookie(name) {
		var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
		if (arr = document.cookie.match(reg))
			return unescape(arr[2]);
		else
			return null;
	}

    function delCookie(name) {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() - Days * 24 * 60 * 60 * 30);

        //这里一定要注意，如果直接访问ip的话，不用注明域名domain
        //但访问的是域名例如www.baidu.com时，翻译插件的cookie同时存在于一级和二级域名中
        //即删除翻译cookie时要把domain=www.baidu.com和domain=.baidu.com两个cookie一起删除才行
        var domain = document.domain;
        var domainIsIp = false;
        var dd = domain.split(".");
        if(dd.length==4){
        	domainIsIp=true;
        }
        document.cookie = name + "='';path=/;expires="+ exp.toUTCString();
        if(domainIsIp==false){
        	domain="."+dd[1]+"."+dd[2];
        	document.cookie = name + "='';domain="+domain+";expires="+exp.toGMTString()+";path=/";
        }
	}

大功告成~

利用Google翻译实现网站国际化——js插件

猜你喜欢