(原創) 如何為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翻譯與魔匠靈通