(原創) 如何為Blog加上簡體中文(繁體中文)翻譯? (Web) (CSS) (JavaScript)

Abstract
雖然簡體中文和繁體中文本一家，不過若能提供同時提供繁體中文和簡體中文的服務，對於讀者將是一大福音。

Introduction
目前我在Blog上方多了簡體中文的即時翻譯，如下圖所示

博客園並沒有提供繁體中文轉簡體中文的服務，而是我自己加上去的，但這是如何做到的呢?

這有兩個問題必須解決：
1.如何將『简体中文』四個字放在『管理』之後 ? 讓這個服務看起來好像與原來博客園的服務整合在一起。
2.如何使用Google Translate將繁體中文轉成簡體中文(或簡體中文轉成繁體中文) ?

第一個不甚成功的版本(使用CSS的絕對位置)
由於我們沒有.aspx的source code，所以無法直接在管理之後加上『简体中文』四個字，只能在有限的地方，如『公告』、『頁首』與『頁尾』這三處加上HTML或者JavaScript，所以直覺的想用CSS的絕對位置來做。

1  < span  style ="position:absolute;top:194px;left:335px;color:#ACCCB1" > :: </ span >
2  < a  id ="cn"  href ="http://oomusou.cnblogs.com"  style ="position:absolute;top:196px;left:352px;color:white;font-size:12px" > 简体中文 </ a >
3  < script  type ="text/javascript" >
4   e = (document.charset || document.characterSet);
5   document.getElementById( " cn " ).href  =   ' http://translate.google.com/translate?u= ' +  document.URL + ' &hl=zh-TW&langpair=zh-TW|zh-cn ' + ' &tbb=1&ie= ' + e;
6  </ script >

我在公告區加了以上代碼，由於我是在IE7調適，IE7看起來很漂亮，但可惜在IE6位置不太正常，更遑論FireFox了，JavaScript的部分為使用Google Translate的部分，稍後我會做說明。

第二個使用成功的版本(IE6、IE7、FireFox測試成功)
以下是完整的程式碼

 1  < script  type ="text/javascript" >
 2  e = (document.charset || document.characterSet);
 3  url  =   ' http://translate.google.com/translate?u= ' +  document.URL + ' &hl=zh-TW&langpair=zh-TW|zh-cn ' + ' &tbb=1&ie= ' + e;
 4 
 5  p  =  document.getElementById( " Header1_MyLinks1_Admin " ).parentNode;
 6  dot  =  document.createTextNode( "  ::  " );
 7  p.appendChild(dot);
 8  anchor  =  document.createElement( " A " );
 9  anchor.setAttribute( " href " , url);
10  txt  =  document.createTextNode( " 简体中文 " );
11  anchor.appendChild(txt);
12  p.appendChild(anchor);
13  </ script >

Step 1：
將『简体中文』四個字放在『管理』之後
初步的想法是：若我們能用JavaScript找到『管理』這個字，並且用JavaScript動態的加上『简体中文』，這樣就不需再指定絕對位置了。

第5行

p  =  document.getElementById( " Header1_MyLinks1_Admin " ).parentNode;

我們利用getElementById("Header1_MyLinks1_Admin")找到『管理』這兩個字，我怎麼知道要找這個ID呢?我是利用Internet Explorer Developer Toolbar這個工具，這是Microsoft所提供免費工具，大體上若要對Blog作變裝，或者自己做skin開發，這個工具是少不了的，它能讓我們觀察HTML內的架構。

第6行

dot  =  document.createTextNode( "  ::  " );
p.appendChild(dot);

動態加上『管理 』與『简体中文』中間的『::』。

第8行

anchor  =  document.createElement( " A " );
anchor.setAttribute( " href " , url);
txt  =  document.createTextNode( " 简体中文 " );

動態建立『简体中文』。

12行

p.appendChild(anchor);

動態的將『简体中文』加上。

Step 2：
使用Google Translate
第3行

url = 'http://translate.google.com/translate?u='+ document.URL+' &hl =zh-TW &langpair =zh-TW|zh-cn'+' &tbb =1 &ie ='+e;

要使用Google Translate要傳入幾個參數
u ：要翻譯的url
hl：來源url的語言
langpair：來源語言|目標語言，如要繁中轉簡中就是zh-tw|zh-cn，若要簡中轉繁中就是zh-cn|zh-tw
ie：傳入網頁的encoding，可用29行

e = (document.charset || document.characterSet);

得到目前網頁的encoding。

Conclusion
若你也想替你的Blog加上繁體轉簡體，簡體轉繁體，可以採用這種方式，甚至你想利用Google Translate翻譯成英文亦可，不過翻譯成英文的效果並不是很好，畢竟中英文差異太大，假如那麼好，那大學英文系就可以不用招生了，哈。

See Also
(原創) 為什麼W3C DOM不提供insertAfter? (Web) (JavaScript)
(原創) 如何使Blog以Tree的方式顯示隨筆分類? (Web) (JavaScript)
(原創) 如何在Blog內任意處動態產生Google AdSense廣告? (Web) (CSS) (JavaScript)

Reference
Internet Explorer Developer Toolbar
Google Translate
简睿随笔的迈向国际化；帮网页添加翻译功能：使用Google翻译与魔匠灵通