如何设计一个能用google翻译多语言的站点

很多时候，我们需要做一个多语言的站点，cosbeta认为目前多语言网站的解决方案比较多，比如：

1. 做几个不同的分站，通过用户第一次的选择将用户定位到相应语言的分站；
2. 编辑网站内容的时候，添加多种语言，然后通过用户的选择从数据库中获取对应的语言；
3. 添加一个google翻译按钮，用户自行选择google翻译查看不同语言的版本；
4. 利用google 翻译接口，通过js实时翻译网页文字，cosbeta今天打算要介绍的就是这种方法；

上面4种方法的优缺点我这里就不多描述了，相信大家都很清楚了。应客户的要求，再加上翻译方便和翻译的通用性的需求，cosbeta决定用第4种方法为客户解决多语言的问题。

最开始cosbeta的解决办法是想通过程序模拟客户端去直接读取google对当前页面翻译的内容，从而实现页面的多语言版本。比如用户访问http://storyday.com?p=1，当用户需要访问日语版时，cosbeta就将此页面通过php发送给google的网页翻译接口，然后将翻译的结果读取出来，显示在当前的页面上。然而后来cosbeta发现这种方式是不可取的，一方面google对客户端的限制比较严格，用php模拟客户端可能会导致数据获取的失败，另外一方面，google并没有推荐这种方式，所以很容易导致翻译失效。

后来cosbeta就转向了google的翻译API，配上jquery对Dom灵活的操作，很容易就解决了这个问题。

首先制作页面的时候，我将所有需要翻译的tag都添加了一个css，名为multilang,比如<a href=”#” class=”multilang”>关于我们</a>，在网页的末尾用jquery遍历dom，逐一翻译然后替代原来的文本，按照下面的步骤操作，展示一个例子给大家：

1. 添加google ajax api到网页的顶端,
   
   (show/hide)plain text
   1. <script src="http://www.google.com/jsapi?key=GOOGLEAPI" type="text/javascript"></script>
   2. <script language="Javascript" type="text/javascript">
   3. //<![CDATA[
   4. google.load("jquery", "1.2.6");
   5. google.load("language", "1");
   6. //]]>
   7. </script>
   这段代码同时将google的翻译接口和jquery js库引入了网页当中。代码中的GOOGLEAPI需要在这里申请。
2. 给所有需要翻译的标签添加class=”multilang”，若是标签里面已经有class=”xxx”只需要变成 class=”xxx multilang”即可;
3. 添加读写cookie的JS代码，目的是为了记住当前用户语言的选择：
   
   (show/hide)plain text
   1. var aCookie = document.cookie.split("; ");
   2. function createCookie(name,value,days) {
   3. if (days) {
   4. var date = new Date();
   5. date.setTime(date.getTime()+(days*24*60*60*1000));
   6. var expires = "; expires="+date.toGMTString();
   7. }
   8. else var expires = "";
   9. document.cookie = name+"="+value+expires+"; path=/";
   10. }
   11. function readCookie(CookieEleName)
   12. {
   13. var cookieValue = "";
   14. if( aCookie ==null ) return cookieValue;
   15. for (var i=0; i < aCookie.length; i++){
   16. var CookieArray = aCookie[i].split("=");
   17. if (CookieEleName == CookieArray[0]){
   18. cookieValue = unescape(decodeURI(CookieArray[1]));
   19. }
   20. }
   21. return cookieValue;
   22. }
   23.  
4. 撰写google翻译函数
   
   (show/hide)plain text
   1. function trans(obj,lang){//调用google 翻译
   2. google.language.translate(obj.html(), "", lang, function(result) {
   3. if (!result.error) {
   4. var container = document.getElementById("translation");
   5. obj.html( result.translation );
   6. }
   7. });
   8. }
   9. function transMe(lang){//遍历dom，翻译整个页面
   10. $(".multilang").each(function(i){
   11. trans($(this),lang);    });
   12. }
   13. function initLang(){//定义初始化翻译，在页面调用的时候翻译
   14. var lang=readCookie('lang');
   15. if( lang.length > 1){
   16. transMe(lang);
   17. }}
   18. function Sl(l){createCookie('lang',l,1000);transMe(l);}//定义函数sl=switchlanguage翻译本页，在需要翻译的地方调用这个js函数即可
   19.  
5. 引入上面的js，在页面最顶端
   (show/hide)plain text
   1. <script>window.onload=initLang;</script>
6. 至此，便可以随心所欲翻译页面了。其实原理很简单：1.引入jquery和google 翻译库 2.编写翻译函数，用户点击对应语言的时候翻译当前页，并且记录当前的lang到cookie 3.初始化页面的时候根据cookie选择性的翻译当前页面。

下面的iframe是案例：

来源：oschina

链接：https://my.oschina.net/u/187928/blog/34592