(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」:代表顯示註解時使用的語言,與上一點的翻譯語言參數相同比較恰當。
二、製作超連結
瞭解原理後,就能使用 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 的內容,版面效果將變得無法預期。
不過相信大部分部落格不會像本站一樣,裝了一堆雜七雜八的東西,那麼翻譯頁面就不會有太大差異。而如何讓本站翻譯頁面的版面保持完整,也將是下一個努力的目標。