讓 Google 網頁翻譯工具以(國旗)超連結執行

(Pic from: securityledger.com)「Google 翻譯」除了提供多國語言線上翻譯的服務，另外也提供小工具可安裝在部落格，能將網頁內容轉換成指定的語言。

以 Blogger 為例，在後台即可新增官方提供的「翻譯」小工具。如果網頁內容不複雜，沒有太多的 javascript，那麼這個小工具的執行速度不太會延遲；但如果像本站裝了很多 hack，載入速度可能就是悲劇了。

本文要介紹的安裝方式，可讓「Google 翻譯」以超連結的方式執行，如同本站右上角的國旗圖案，如此就不需花費任何載入時間。以下先說明原理，想直接安裝請跳「三、綜合安裝」。


一、Google 翻譯的超連結結構

根據這篇「Useful Google Translate Addresses」，綜合文章與留言內容得到一個最佳解，在瀏覽器貼上以下格式的網址，可顯示單一網頁的翻譯內容：

http://translate.google.com/translate?u=http://wfu-san11.blogspot.com/&langpair=zh-TW|en&hl=en&ie=UTF8
以上藍字的參數說明如下：

• 「http://wfu-san11.blogspot.com/」：網址字串可改為想要翻譯的頁面之網址。
• 「langpair=zh-TW|en」：前一個參數代表原語言，後一個參數代表翻譯語言，中間必須用 "|" 隔開。
• 「hl=en」：代表顯示註解時使用的語言，與上一點的翻譯語言參數相同比較恰當。

至於語言參數的設定，可參考「Google 翻譯官網」。



二、製作超連結

瞭解原理後，就能使用 js 來自動產生每個頁面的超連結，例如要在網頁放一個中翻英的超連結，可準備一個英國國旗的圖案，js 程式碼如下：

<script>
//<![CDATA[
document.write("<a href='http://translate.google.com/translate?u=http://" + top.location.hostname + top.location.pathname + "&langpair=zh-TW|en&hl=en&ie=UTF8' target='_blank'><img src='http://3.bp.blogspot.com/-lPe1MfSK7zs/UXaYYpJ-lJI/AAAAAAAAGiU/FIBrY3aIhW0/s1600/eng.jpg' title='translate to English'></a>");
//]]>
</script>
以上藍字的圖片網址可置換為自己的圖片，把程式碼放到網頁的自訂位置即可。



三、綜合安裝

如果想放多個國旗超連結，如本站右上角，或是文末也提供了一組效果，可使用以下的程式碼安裝：


可將以上程式碼放在網頁想顯示的位置即可(部落格需支援 js)；若是 Blogger 可放在「HTML/Javascript」小工具，或是貼到範本中想顯示的位置即可。若不清楚要放到 Blogger 範本中的什麼位置，可參考「Blogger 範本各區塊程式碼」系列文。

若想修改參數、增加或減少翻譯的語言，請對照以上的行號參考以下的修改說明：

F：依序填入由左到右要顯示的翻譯語言, 每種語言的參數請參考「Google 翻譯官網」(或參考後面的對照表)。

每個字串放在雙引號內, 用小寫逗號隔開, 最後一個字串之後不要有逗號。


G：依序填入由左到右、滑鼠經過的提示翻譯文字(只限英文), 例如 F 行填入 "en" 時，G 行對照的字串可填入 "English"，以此類推(可參考後面的對照表)。

每個字串放在雙引號內, 用小寫逗號隔開, 最後一個字串之後不要有逗號。


H：依序填入由左到右要顯示的圖片網址, 每個字串放在雙引號內, 用小寫逗號隔開, 最後一個字串之後不要有逗號。

I：每個圖片與右邊圖片的間隔(px值)。


如果想要有現成的國旗圖案範例，本文的國旗圖案來源為「World Flag Icons for Windows」這個網頁，可用圖片編輯軟體自行編修。

以下順便列出「Google 翻譯官網」一些常用的翻譯語言參數：

• English：en
• Japanese：ja
• Chinese Simplified：zh-CN
• Spanish：es
• German：de
• French：fr
• Italian：it
• Korean：ko

四、小結



以上三個國旗圖案可測試效果；使用本文的方法，可省下「Google 翻譯」載入的時間，而缺點是，如果網站裝了不少 hack、工具(就像本站一樣)，那麼翻譯網頁往往無法處理 js 的內容，版面效果將變得無法預期。

不過相信大部分部落格不會像本站一樣，裝了一堆雜七雜八的東西，那麼翻譯頁面就不會有太大差異。而如何讓本站翻譯頁面的版面保持完整，也將是下一個努力的目標。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理