客服系统经常用于海外业务,或跨境电商独立站,所以界面上需要支持多语言。
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: "メッセージを送信する",
// 其他日语文本...
},
// 其他语言...
};