客服系统经常用于海外业务,或跨境电商独立站,所以界面上需要支持多语言。
static/js/functions.js 中的checkLang()函数是检测函数。

  • 首先,从URL参数 “lang” 中获取语言,如果存在且在支持的语言列表中,则返回该语言。
  • 其次,从本地存储(LocalStorage)中获取语言设置,如果存在,则返回该语言。
  • 如果无法从URL参数和本地存储中获取语言,会尝试从浏览器的 navigator.language 属性获取语言。
  • 最后,如果以上步骤都无法确定语言,则默认返回 “cn”(中文)。
    根据上面返回的语种,动态加载对应的语言包文件,例如:/static/js/lang/en.js
    如果有不存在的语种,可以随时在语种文件 /static/js/lang/语种缩写.js ,url参数中传入语种缩写lang=xx
//检测语种
function checkLang(){
    let lang = getQuery("lang") || getLocalStorage("lang");
    if(!lang){
        switch (navigator.language) {
            case "en-US":
                lang= "en";
                break;
            default:
                lang= "cn";
        }
    }
    loadJsFile("lang/"+lang+".js");
    return lang;
}

前端界面上的元素,根据语言包对象,展示对应的文案

var KEFU_LANG = {
    // 中文简体
    cn: {
        welcomeMessage: "欢迎使用客服聊天!",
        sendMessage: "发送消息",
        // 其他中文简体文本...
    },
    // 英文
    en: {
        welcomeMessage: "Welcome to the live chat!",
        sendMessage: "Send message",
        // 其他英文文本...
    },
    // 日语
    jp: {
        welcomeMessage: "チャットをご利用いただきありがとうございます!",
        sendMessage: "メッセージを送信する",
        // 其他日语文本...
    },
    // 其他语言...
};
01-07 14:05