如何設計一個能用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是案例：