你在这里

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

下面的iframe是案例:

原文链接:如何设计一个能用google翻译多语言的站点
 

 

articles: 
评分: 

猜你喜欢

评论

原来还有这么一种办法呐  我一直以为 多语言就是后台来配置  学习了

扫一扫关注Drupal社区公众号LoveDrupal

qrcode_for_gh_037d374f7de5_258.jpg