線上客服系統前端多國語言實現方案和程式碼

sheng_chao發表於2021-08-26

業餘時間用 .net core 寫了一個免費的線上客服系統。並在部落格園寫了一個系列的文章,寫介紹這個開發過程:

.net core 和 WPF 開發升訊威線上客服系統:目錄
https://go.shengxunwei.com/?linkid=c457a8fe-480e-444a-88a7-34cc7b8c7264

我把這款業餘時間寫的小系統丟在網上,陸續有人找我要私有化版本,我都給了,畢竟軟體業的初衷就是免費和分享,後來我索性就官方發了一個完全免費的私有化版直接給別人下載,並寫了詳細的說明書指導安裝,有興趣的朋友可以點選這裡:
https://docs.shengxunwei.com/Post/f7bc8496-14ee-4a53-07b4-08d8e3da6269/553293a8-dfa1-4282-bc3f-96c6c623fc9a

陸續有朋友問我可否為訪客端提供多國語言,如英文和日文用於外貿場景,我考慮了一些方案後,選擇了 i18n 的方案來實現,整個過程非常簡單,在完成了語言檔案的翻譯之後,實現多國語言的介面展示,幾乎只需要幾分鐘時間。

效果:


i18n(其來源是英文單詞 internationalization的首末字元i和n,18為中間的字元數)是“國際化”的簡稱。在資訊領域,國際化(i18n)指讓產品(出版物,軟體,硬體等)無需做大的改變就能夠適應不同的語言和地區的需要。對程式來說,在不修改內部程式碼的情況下,能根據不同語言及地區顯示相應的介面。 在全球化的時代,國際化尤為重要,因為產品的潛在使用者可能來自世界的各個角落。通常與i18n相關的還有L10n(“本地化”的簡稱)。

程式碼實現方法

在 jQuery 中,可以使用 jquery.i18n.properties.js 外掛來簡單快速的實現。

在專案中引用 jquery.i18n.properties.js 之後,新增 language.js 為自定義的 js 檔案,用於實現頁面邏輯,然後新增自己的語言檔案,比如:strings_en_US.properties 和 strings_en_ZH.properties。

例:strings_en_ZH.properties檔案:

send=傳送
cancel=取消

然後在 html 檔案中引用他們:

<label class="send"><!--傳送:--></label><input type="text">  
<label class="cancel"><!--取消:--></label><input type="text">  

接下來在 language.js 中實現語言切換即可。

var LANGUAGE_Index = "zh_CN"; 
  
jQuery(document).ready(function () {  
   
  
  LANGUAGE_Index = jQuery.i18n.normaliseLanguageCode({}); 
  loadProperties(LANGUAGE_Index);  
});  
  
  
$(".lan_select").change(function () {  
  
  
    if (($(".lan_select").val() === "英文") || ($(".lan_select").val() === "English")) {  
        LANGUAGE_Index = "en_US";  
  } else {  
        LANGUAGE_Index = "zh_CN";  
  }  
  
    loadProperties(LANGUAGE_Index);  
  
});  
  
  
function loadProperties(type) {  
    jQuery.i18n.properties({  
        name: 'strings', 
        path: 'Languages/', 
        mode: 'map', 
        language: type, 
        cache: false,  
        encoding: 'UTF-8',  
        callback: function () { 
            $('.lan_zh').html($.i18n.prop('lan_zh'));  
            $('.lan_en').html($.i18n.prop('lan_en'));  
            $('.username').html($.i18n.prop('username'));  
            $('.password').html($.i18n.prop('password'));  
        }  
    });  
}

完整原始碼

基於 jQuery 和現成的外掛,整個實現過程非常的簡單,完整的程式碼也可以下載我提供的私有化包之後,在 Resource 目錄中檢視,下載地址::
https://docs.shengxunwei.com/Post/f7bc8496-14ee-4a53-07b4-08d8e3da6269/553293a8-dfa1-4282-bc3f-96c6c623fc9a


我會繼續結合原始碼,分解介紹線上客服系統的程式碼實現細節,希望能夠打造: 開放、開源、共享。努力打造 .net 社群的一款優秀開源產品。

鐘意的話請給個贊支援一下吧,謝謝~

相關文章