2013年5月5日

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

A+

(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 的內容,版面效果將變得無法預期。

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


更多實用工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。