實現網站中英文切換的三種方法
前言
現在很多公司喜歡把網站做成中英文切換,比如某零食官網
那麼問題來了,一般實現中英文切換有哪些方法呢?下面我總結了三種方法(因技術水平有限,若有錯誤,歡迎留言指正)
解決方法
方法1:(中英文各做一份,然後用不同的資料夾區分開來,點選切換語言時,連結跳轉到不同資料夾就行了)
優點:各自的版本是分離開來的,比較穩定,不會出現互相干擾(共用資料庫資料的除外)
缺點:修改一個樣式或功能,要把變更的操作(程式碼邏輯、更換圖片、修改樣式等)在所有的語言版本上重複一次,加重了工作量場景:個人認為符合下面2種場景可以考慮使用這種方法
注:如果切換的語言版本很少,並且本身網站不復雜(比如電商網站不推薦)
整體內容相對固定,佈局比較簡潔,扁平化,改動不會太頻繁的(比如新聞類網站不推薦)
方法2:(藉助 jquery 外掛——jquery.i18n.properties)
詳見:https://blog.csdn.net/aixiaoyang168/article/details/49336709
注:看樓下評論感覺這個博主挺好的,對提問的人也會給予解答
方法3:(使用微軟字典整站翻譯)
詳見:https://blog.csdn.net/CSDN_LQR/article/details/78026254
注:因為怕麻煩又技術渣,所以用的這種方法。如果你問我為什麼不用谷歌整站翻譯,因為要 FQ , FQ, FQ
Demo(下面程式碼為方法③原文示例程式碼,我修改了顯示內容和引用了jquery CDN)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p { text-align: center; } </style> </head> <body> <button id="change">中英文切換</button><br /> <p>變變變</p> <div id=""> 開心一天是一天,不開心一天也是一天,為何不放下不開心,選擇開心呢 </div> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="js/language.js"></script> <script> $("#change").click(function() { translate(); }) </script> </body> </html>
下面是我根據方法三,用微軟字典整站翻譯實現中英文切換的 Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button id="change">中英文切換</button><br /> <p style="text-align: center;">變變變</p> <div> 「塗塗: 程式設計師有三寶:悶騷,加班,修電腦。 產品經理有三寶:山寨,改版,再推倒; 老闆有三寶:忽悠,找錢,洗大腦。 SE有三寶:扯蛋,規格,CCB。 專案經理有三寶:進度,流程,做報表。 客戶有三寶,我要,我要,我還要! 運營經理有三寶:資料,活動,搞渠道; 市場經理有三寶:調研,策劃,狂跳槽 編輯有三寶:選題,加班,被斃稿。 客戶經理有三寶:能吹,勤快,酒量好! 運營三寶:黃圖,抽獎,軟文稿; 產品經理有三寶:原型,扯皮,愛吐槽。 團隊經理有三寶:團建,開會,評績效。 HR有三寶:招聘、培訓、價值觀輔導 獵頭顧問有三寶:JD,CV,電話擾。 部門經理有三寶:K人、畫餅、吹成效...... 諮詢師有三寶:方案,畫餅,做簡報 運營經理有三寶:註冊,活躍,真實沒有效。 運營專員有三寶,需求,資料,寫戰報 敏捷教練有三寶:看板,迭代,狂佈道。 我記得程式設計師三寶是錢多,話少,死得早; 推廣人員有三寶~活動~美女~抽獎好! SQA有三寶:質疑,挑刺,寫報告。…… 程式碼民工有三寶:Bug,Debug,Newbug。 設計人員有三寶:畫圖,加班,被指點 商務經理有三寶:談判,換量,到處跑; 測試人員有三寶:較真,溫柔,撒撒嬌。 甲方有三寶:出納,會計,大領導。 運維三寶必然是:活多,覺少,人品好;重啟,重灌,換電腦;隨叫隨到、通宵不倒、常看《IT運維之道》。」 ————————— </div> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="js/language.js"></script> <script src="js/microsoft.js"></script> <script> $("#change").click(function() { translate(); }) </script> </body> </html>
language.js原始碼
$(function(){ // do something var script=document.createElement("script"); script.type="text/javascript"; script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**"; document.getElementsByTagName('head')[0].appendChild(script); var value = sessionStorage.getItem("language"); document.onreadystatechange = function () { if (document.readyState == 'complete') { if(value==="1"){ Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000); } } } function onProgress(value) { } function onError(error) { } function onComplete() { $("#WidgetFloaterPanels").hide(); } function onRestoreOriginal() { } }); function translate(){ var value = sessionStorage.getItem("language"); if(value==="1"){ sessionStorage.setItem("language", "0"); }else{ sessionStorage.setItem("language", "1"); } window.location.reload();//重新整理當前頁面. }
①:上面language.js中寫死了中文轉英文(zh-CHS轉en),如果專案需要其他語言的轉換,直接對language.js進行自定義擴充套件即可
②:微軟字典整站翻譯CDN原始碼(也就是我上面的microsoft.js)
http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**
補充:不過這方法有個小問題,就是每次點選切換語言後,會有彈出框和hover效果,如下圖
彈出框: hover效果:
後經過一番查詢,終於找到了解決辦法
注:要去掉翻譯後出現的彈框和hover效果,不能直接引用 language.js 裡面引入的微軟字典整站翻譯CDN連結
要把CDN的原始碼拷貝下來,單獨放到一個js檔案裡在引入,
同時,修改原始碼裡面的 Pb = "inline-block" 和 B = "block" 分別改成 Pb = "none" 和 B = "none"
完整程式碼已上傳至github,有需要的小夥伴歡迎下載:https://github.com/tujingyu/Chinese-and-English-change