2013年5月5日

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

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

Wayne Fu 0 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaRaPe62M0q8_CWTmDa5m7F1O3d991jjQ-9YroKMQ7tvVu8mzf40IPd_umA4jP21I2e-8AkJihdeBi7ojV93snmRGZ-bAVy5zA2RWVIlv2FHs3xVoM-F0Was2wEyTR9k2If4GuUEAfO7S/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 的內容,版面效果將變得無法預期。

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


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP