Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 784

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

$
0
0
上一個版本「相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版」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檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。



三、切換按鈕


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




更多實用工具:

Viewing all articles
Browse latest Browse all 784

Trending Articles