Loading...

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

下面的iframe是案例:

标签:,
发表于 2009-03-02 12:55:34 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    feed url
    下一篇: 新的撞墙现象 »
    已经有17位大师动手指导 拒绝低俗
    • 1楼 mybg 在2009.03.02 14:20发表评论如下: 回复

      原来可以这样,学习了,以后有用!

      • 2楼 任平生 在2009.03.02 15:41发表评论如下: 回复

        从英文翻译回中文的时候变成了
        “这是一个漂亮的江东”
        囧。。。

      • 3楼 fisio 在2009.03.02 18:36发表评论如下: 回复

        反复翻译之后就走样了,哈哈~

        • 4楼 Leeiio 在2009.03.02 19:49发表评论如下: 回复

          呃,註冊的api是 AJAX Search API 密钥?

          • 4楼附属品 江东 在2009.03.02 19:55发表评论如下: 回复

            API是统一的,从哪里注册都一样,只要域名固定

          • 5楼 Leeiio 在2009.03.02 20:12发表评论如下: 回复

            似乎執行起來效率不高?每段文本包裹的標籤都必須加上class=”multilang”,似乎不能翻譯子元素?

            • 6楼 Fengshen.Name 在2009.03.02 20:17发表评论如下: 回复

              江东确实是个帅哥!O(∩_∩)O哈哈~

              • 6楼附属品 江东 在2009.03.02 20:19发表评论如下: 回复

                狗朋友啊,今天我们家那只多多嘴巴快速肿了,刚开像一只狮子了,还好,现在自动消肿了

                • 6楼附属品 Fengshen.Name 在2009.03.10 02:23发表评论如下: 回复

                  作为狗友,我在此对你进行强烈谴责,没有照顾好狗。O(∩_∩)O哈哈~

              • 7楼 leesum 在2009.03.03 09:52发表评论如下: 回复

                不错···Try下···

                • 8楼 mmc 在2009.03.23 22:26发表评论如下: 回复

                  不错的方法

                  • 9楼 louise 在2009.07.23 14:31发表评论如下: 回复

                    多谢,正好用到了,拿去用了哈

                    • 10楼 亚美利加的雨 在2009.07.30 16:23发表评论如下: 回复

                      江东前辈,我完全按照您的方法把代码移到DISCUZ 7.0的GBK版中试了一下,没有成功。IE状态栏提示“网页有错误”。详情是

                      错误:’showId.Style.display’为空或不是对象。
                      代码:0

                      请问我该如何解决?
                      我把您的示例lang.htm 上传到服务器,把密钥改成我自己的是可以用的。

                      • 11楼 亚美利加的雨 在2009.07.30 16:27发表评论如下: 回复

                        我是把script和style部份都复制到模板文件header.htm 的head中.
                        并把国旗按钮和“江东很帅”等内容复制到body里。

                        不知道我这样做是不是有什么问题?

                        • 12楼 河南人 在2010.12.31 17:19发表评论如下: 回复

                          江东,你帅死了

                          评论分页: 1
                          (Required)
                          (Required, not published)
                          如果留言未显示无需重复留言,我将为你恢复!