网站实现多语言功能 谷歌百度翻译切换网页语种

不少网站开发需求都会要多语言功能，严格意义上完美多语言网站，需要根据访问者地区语言自动识别，然后呈现相应的相应的语种网站。这也是很多大型站点的解决方案，但是对于普通小网站而言，一个语种的网站就需要耗费大量时间去更新维护，更别说多个语言啦。那有什么方法可以比较简便的实现网站的翻译功能，答案是有的，就是使用翻译API进行翻译，不过这类翻译API特点是不够准确，不能更具语境表达准确的意思，但是可以辅助不多的其他语种的用户需求，让他们能看到网站内容还是可以的。

第一种，使用百度翻译API

百度翻译API需要注册申请（https://fanyi-api.baidu.com/）然后拿到ID和key，百度的翻译也是有限制的，如果可以升级为企业用户可以满足大多数需求场景。这里介绍的方式使用是两种语言之间的翻译转换，原理是通过逐个内容翻译后替换为原来，代码种是获取类目“fy”的标签也就是需要翻译的文本内容，翻译后再给替换实现网页的翻译功能，这种方式确定是慢，因为要逐个去翻译后替换，需要等待时间，为了用户体验可以做个遮罩层，等待全部翻译替换完全后再隐藏遮罩层。

function fanyi_api(obj,str,newLanguage,type){
	let appid = 'xxxxx';   // 百度翻译API的appid
	let key = 'xxxx';   // 百度翻译API的key
	let from = 'en';
	let salt = (new Date).getTime();
	let query = str;
	let to = newLanguage;
	let str1 = appid + query + salt + key;
	let sign = md5(str1);
	let flag = false;
	$.ajax({
		url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
		type: 'get',
		dataType: 'jsonp',
		data: {
			q: query,
			appid: appid,
			salt: salt,
			from: from,
			to: to,
			sign: sign
		},
		success: function(e) {
			if(type ==1){
				obj.html(e.trans_result[0].dst);

			}else if(type ==2){
				obj.attr('placeholder',e.trans_result[0].dst);
			}else{
				obj.html(e.trans_result[0].dst);
			}
		}
	});
}

定义翻译函数，在需要翻译的元素绑定即可如翻译为中文需要调用fanyi(‘zh’)

function fanyi(newLanguage){
	$(".fy").each(function(){
		var obj = $(this);
		var str = $(this).html();
		fanyi_api(obj,str,newLanguage,1);
	});
}

翻译完成，即加载完全后遮罩层隐藏

//判断加载完毕
document.onreadystatechange = function(){
		if(document.readyState=="complete"){     
			 $('.loadbox').hide();
		}else{
			console.log('no');
		}
}

第二种，谷歌翻译API

这种也是使用的比较多的，也是相对来说比较好的解决方案因为其比较准确智能，谷歌的翻译功能使用简便，不足之处就是会产生一个如下图的小按钮，对于一些网站而言不是太美观。

谷歌翻译API的使用直接在需要翻译的页面引入下面代码，其中的一些主要设置也给注释清除了。

<div id="google_translate_element"></div>
<script type="text/javascript">
	function googleTranslateElementInit() {
		let langname = navigator.language ? navigator.language.split('-')[0].toLowerCase() : 'en'; //动态获取用户的语种，可以动态赋值到pageLanguage
		console.log(langname);
		new google.translate.TranslateElement({
			pageLanguage: 'en', //页面语种
			includedLanguages: 'zh-CN,zh-TW,en',  //期望翻译的语种，如果不设置默认全部语种
			autoDisplay: false,
			gaTrack: true,
			layout: google.translate.TranslateElement.InlineLayout.SIMPLE
		}, 'google_translate_element');
	}
</script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

ID为”google_translate_element“的div标签是就是那个小图标下拉框的实体，可以通过样式布局将其放在网页合适位置，一般都是在网页的右上角。

如果不设置includedLanguages则默认全部语种，点击下拉得到类似下面的语种选择面板

只是需要其中的几种，就需要设置为国家/地区代码，像上面种“zh-CN,zh-TW,en“，分别就是中文简体，中文繁体，英文；如果还有其他语种，而用不知道怎么表示可以百度”谷歌翻译 语种代码” 参考（https://b.julym.com/original/74.html）填写上即可。上面的代码设置好只会显示中文简体，中文繁体，英文语种。