利用Google翻译实现网站国际化——js插件
文章描述了很多作者的思路，显得繁琐和冗余，若无兴趣请直接下载资源，查阅最终解决方案
==========================最终解决方案==========================
代码静态化已经全部完成(包括面板语言文件)，已添加完备的注释，请直接查阅；
下载插件js谷歌翻译插件
代码给出了一个自定义按钮的示例，和原始方式，所有代码均有完整的注释，请放心查阅和修改
代码预览
先说背景
- 网站已经使用常见的方式实现中英国际化，即每种语言写一套对应的语言文件，但后期要求实现多国语言国际化，如果还按照之前的方式，工作量大。
- 且不便于维护，某个词改了统统都要改。
//推荐一个github项目：https://github.com/hujingshuang/MTrans
因此有没有一种简单易用的及时翻译插件，类似于谷歌浏览器自带的翻译工具那种，一点即可全文翻译。
最后在网上找到了一些，要么没有文档介绍，要么就需要npm安装，nodejs支持啥的，但是我对前端并不精通，就继续找，最后找到了谷歌插件(官方已经不再维护更新：https://translate.google.com/manager/website/)，简单易用。
使用方法，在页面加入以下代码即可
//更新一下2019-04-10
一个简单的demo，现已整合部分静态资源，加快访问速度，请在文章底部下载
我爱你
没错，这样就行了，来看看页面效果：
demo效果：
真实项目效果：
效果非常好。
==========================追更20180914==========================
今天又遇见一个问题，记录下，是关于清除cookie的。
由于原生google翻译插件样式不太友好，所以自己用代码追加覆盖原来的样式,
改成一个工具栏，并且去除原来顶部的操作框（参数autoDisplay：false即可，如无效请看文章底部的其他处理方法），
去除这个顶部操作框
改成这种
工具栏html,只是个例子
-
-
APP
-
Feedback
-
Top
Feedback
var googleTranslate;
googleTranslate = new google.translate.TranslateElement(
{
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay:false
},
'google_translate_element'
);但是去了顶部操作框后，必须加一个清除翻译的按钮，经测试发现，谷歌翻译插件的翻译生命周期存于cookie中，
所以这里我加了一个清除按钮，访问页面时先getCookie("googtrans")，如果有值就添加一个按钮
点击按钮就清除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=/";
}
}
大功告成~
==========================2019-01-26追更==========================
有网友比较关心样式和初始化语言的问题，因为虽然功能不错但是原样式太丑了，这里统一回复一下怎么改样式，首先注意几点：
1、原版插件不再维护更新，之前给过一份静态资源但评价不太好，且源码混淆严重，阅读困难，修改不易，请自行下载修改静态资源
2、关于初始化语言，因为pageLanguage: 'zh-CN'这个参数就是用来指定当前页面的初始语言，一开始就是英文页面那当然是en
3、有网友表示autoDisplay:false无法去除顶部横幅，这里给出其他方法，通过控制台分析html，然后使用自己的style覆盖掉原来的样式即可
4、语言翻译生命周期是存在cookie中的，清除修改翻译语言什么的，可以直接修改cookie，但是记得操作cookie后要刷新页面才会生效
==========================2019-08-15统一回复样式问题==========================
根据评论，原样式有如图三个问题
解决方式如下（因缺失API官方文档，都是无奈之下的强制操作，源码大部分逻辑操作在element_main.js中）：
===============2019-10-23继续更新一个问题翻译面板的语言，感谢csdn网友ITmanba的提示和帮助=================
其实这个是由这两个资源决定的
=====================静态化资源下载=======================
请到文章顶部链接下载
按照压缩包内的html示例调用即可，
这里只将部分耗时较长的js和容易请求失败的文件放在了本地，其他的png，gif还是通过网络访问的
翻译后控制台还是会一些报错，请求访问失败，不影响正常使忽略即可