實現網站中英文切換的三種方法
前言
現在很多公司喜歡把網站做成中英文切換，比如某零食官網
那麼問題來了，一般實現中英文切換有哪些方法呢？下面我總結了三種方法（因技術水平有限，若有錯誤，歡迎留言指正）
解決方法
方法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