(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='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 的內容，版面效果將變得無法預期。
不過相信大部分部落格不會像本站一樣，裝了一堆雜七雜八的東西，那麼翻譯頁面就不會有太大差異。而如何讓本站翻譯頁面的版面保持完整，也將是下一個努力的目標。
更多實用工具：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。