2014年12月11日

讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

A+
上一個版本「相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版」FB 留言 Herman Tsao 詢問「能做成依瀏覽器語言做自動轉換嗎?」,其實偵測訪客的瀏覽器語言設定是做得到的,我們應該有這樣的經驗,某些安裝 Google 翻譯的網站,能得知我們的預設語言,在畫面上自動顯示 "是否翻譯為 xxx 語言" 這類訊息。藉由這樣的偵測功能,就完成了本文的這個小工具升級版。

那麼讀者的問題或許會是:「那還需要這個小工具嗎,使用 Google 翻譯不就好了?」的確如此,不過 Google 翻譯用久了,就會發現以下不方便之處:

  • 畫面上方會被 Google 翻譯強制佔用一定的高度,而破壞版面
  • Google 翻譯耗費的時間還滿久的

因此,如果只需要簡繁自動轉換(或切換)的話,這個小工具的切換速度可用 "光速" 來形容,比 Google 翻譯強太多了。以下先說明原理,想直接安裝請跳至「二、安裝程式碼」。



一、運作原理


1. js 偵測語言設定

原本認為用 js 偵測語言設定不難,搞定跨瀏覽器的語法設定就行了,例如以下程式碼:

var language = window.navigator.userLanguage || window.navigator.language;

2. 藉助伺服器端

深入瞭解後知道這不是最佳解,在這個 Stack Overflow 討論串「JavaScript for detecting browser language preference」,以上的程式碼只排第二名,原來每個瀏覽器的設計方式不一,用 js 所取得的語言設定,可能只是部分瀏覽器的系統設定值。若使用者變更了偏好的語言設定,js 並不一定能取得改變後的參數。

因此最謹慎的作法,是由 http request 的訊息之中,擷取有關語言設定的字串。但這件事使用純粹前端的 js 做不到,必須藉助第三方伺服器的輔助才行,而衍生的問題就是,使用外部伺服器的服務,必須面臨會有不穩、或流量限制的風險。


3. 解決方案

最終 WFU 採取「2. 藉助伺服器端」為主,當偵測到伺服器暫時失效時,使用「1. js 偵測語言設定」為輔,算是最佳的折衷方式。


4. 簡繁切換原理

如果需要瞭解為何這個小工具能夠快速的進行簡繁切換,請參考「相容各大瀏覽器的全網頁簡繁快速轉換語法」、「更新版」的說明。



二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

如安裝過舊版本,請先移除原本的程式碼。接著請到後台「範本」→「編輯 HTML」,游標點進範本區塊,再搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

D:這個參數跟舊版本的意義不同,這個新版本由於會自動偵測語言設定,此處的參數只會作用在訪客預設語言 "非繁體、非簡體" 的狀況。例如一個住在美國的華人訪客,預設語言可能是英文,那麼這裡設定的參數可讓他的網頁文字以繁體或簡體顯示。

H:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。



三、切換按鈕


安裝本文的新版小工具後,基本上就不太需要切換按鈕了。不過如果仍然想在網頁上提供訪客簡繁切換按鈕的話,一樣可按照「上一版」→「三、安裝文字按鈕」或「四、安裝圖片按鈕」的步驟來進行即可,可前往以下網頁看效果:



更多實用工具:

7 則留言:

  1. 原本繁體的「網誌」在經過繁簡轉換兩次之後會變成「網志」,「標籤」會變成「標簽」,有沒有辦法解決呢??

    回覆刪除
    回覆
    1. 這個算是正常現象了,而真的要避免這個情形,也是有辦法作到,就是程式要重寫了。

      由於本篇已經是第三個版本,在沒有大量需求產生的前提下,短期內沒有更新版本的計畫囉~

      刪除
    2. 進行兩次轉換,本來就是原文。 這是因為WFU是用了一個按鈕進行的功能。 如果分2個小按鈕,那就好區分了。 你可以看我的 https://hexiezuo.blogspot.com 嘿嘿!! 恢復原文是點擊2次。這沒錯的!

      刪除
    3. << 請注意!以下為會員限定內容,請先加入會員>>

      請先登入 Facebook 即可免費加入會員,閱覽隱藏內容

      但是我的Facebook賬號被封鎖了!! 怎麼辦?

      刪除
    4. 再申請一個 FB 帳號(或想辦法生一個帳號) 加入會員

      刪除
  2. 這個工具很好。唯一遺憾的是,不能兼容HTTPS,原因好像是本文JS文件中的第10行程式碼,在設計時並未考慮到HTTPS!!

    回覆刪除
    回覆
    1. 這是很久以前寫的工具,因為網站提供的工具太多了,無暇一一改成 https,您瞭解原理的話,可自行修改程式碼即可 ^^

      刪除

張貼留言注意事項:

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