使用jquery.i18n實現國際化多語言顯示

前端小問題發表於2020-11-13
jQuery

問題描述：
有時候你寫的頁面需要相容多國語言，不同的國家瀏覽不同的語言。這種方法並不需要重新請求資料庫拿資料，只需要更改文案之後頁面會自動根據瀏覽器語言自動切換。

實現方法：
1，首先需要獲取到瀏覽器的語言。當然還需要引入jquery.i18n.js 和jquery.js。

//	begin i18n獲取瀏覽器語言
		jQuery(document).ready(function() {
			var language;
			language = jQuery.i18n.normaliseLanguageCode({}); //獲取瀏覽器的語言  
			if(language == 'zh-MO' || language == 'zh_TW' || language == 'zh-rHK') {
				language = 'zh_HK';
			}

			if(language.indexOf("zh_HANT") != -1) {
				language = "zh_HK";

			}
			if(language == 'zh_CN' || language == 'zh_CH' || language == 'zh_AE') {
				language = 'zh';
			}
			// 這個就是將i18n翻譯後的語言轉換出來的函式
			loadProperties(language);
			console.log(language);
			$(document).attr("title", $.i18n.prop('rechargeFAQ_title'));
			$("meta[name='Keywords']").attr('content', $.i18n.prop('keywords'));
			$("meta[name='Description']").attr('content', $.i18n.prop('description'));
			// ar翻轉頁面
			if(language == 'ar') {
				$("html").css("direction", "rtl");

				$(".recharge-h3").css("padding-right", "0.32rem");
			}
		});

2，你需要配置 i18n 的函式配置。我這裡封裝了一個函式。

//用於頁面初始化之後載入頁面
function loadProperties(language) {
	jQuery.i18n.properties({ // 載入資瀏覽器語言對應的資原始檔
		name: 'multi', // 資原始檔名稱
		path: './i18n/', // 資原始檔路徑
		cache: true,
		language: language, //zh中文  en英文
		mode: 'map', // 用 Map 的方式使用資原始檔中的值
		callback: function() { // 載入成功後設定顯示內容
			//   $(document).attr("title",$.i18n.prop('login.title'));

			var insertEle = $(".i18n");
			insertEle.each(function() {
				// 根據i18n元素的 ID 獲取內容寫入頁面熱
				// $(this).html($(this).attr('id'));
				try {
					if(typeof($(this).attr("placeholder"))!="undefined"){
						 $(this).attr("placeholder",$.i18n.prop($(this).attr('id'))); 
					}else if(typeof($(this).attr("button"))!="undefined"){
						$(this).attr("button",$.i18n.prop($(this).attr('id'))); 
					}else {
						$(this).html($.i18n.prop($(this).attr('id')));
					}
				} catch(e) {

					console.log("key不存在，請在配置檔案中配置對應的key：" + $(this).attr('id'));
				}
			});
		}
	});
};

3，使用方法
首先需要建一個資料夾。資料夾的名字跟第二步中path配置的要一樣。至於資料夾下的multi檔案都是固定的格式。i18n_en.json中_後面的是語言的簡寫，en代表的是英文，你需要相容哪種語言就要新增一種該語言的json檔案，
在這裡插入圖片描述
4，json檔案中的資料樣式如下：
等號前面的是頁面中元素上的id標識，後面的是這個元素中應該顯示的資料。

EnterID	=	點選輸入 FaceCast ID
select-specifications	=	點選選擇充值規格
check-account	=	核對充值賬號
whatID	=	什麼是 FaceCast ID ？
getID	=	輸入 FaceCast ID
maskgetID = 輸入 FaceCast ID
toastTips-format-error	=	輸入格式有誤
toastTips-no-exist	=	該ID不存在
toastTipsPlease	=	請先核對充值賬號
common-problem	=	常見問題
transaction-succeeded	=	交易成功
transaction-failed	=	交易失敗
transaction-cancel	=	交易取消
whether-account	=	1.我充值後怎麼檢視是否到賬？
answer-whether-account	=	充值後可回到 APP 的【我的】-【錢包】中檢視鑽石
no-account	=	2.充值後若是沒有到賬怎麼辦？
answer-no-account	=	請在 APP 的【訊息】-【官方訊息】-【反饋與幫助】中提交您的問題，並提供以下資訊，我們的客服將為您提供幫助。
recharge-money	=	1.充值金額和賬戶 ID
recharge-time	=	2.充值的時間和日期
recharge-shot	=	3.支付成功的螢幕截圖
recharge-wrong	=	3.充錯賬戶，充錯金額怎麼辦
answer-recharge-wrong	=	請您在輸入支付密碼前，務必仔細確認充值賬戶 ID 和充值金額資訊後再進行購買。錯充金額無法退還，錯充賬戶您可嘗試與實際充值的 ID 使用者聯絡，與對方協商是否願意補償您的充值。
refund	=	4.退款
answer-refund	=	抱歉！FaceCast 目前不支援任何形式的退款。
buy-enter-link	=	購買鑽石可通過連結進行充值，<a class="web-link" href="https://pay.facecast.live/" >https://pay.facecast.live</a> 將連結複製在手機瀏覽器中開啟，進入購買頁面，核對賬號後，選擇相應的規格並使用合適的支付方式進行支付即可～ 優惠多多！
buy-notice-a	=	注意: <a>pay.facecast.live</a> 是 FaceCast 唯一官方購買鑽石網址
replace	=	更換
sureBtn	=	確定
pay-style	=	選擇支付方式
goBack	=	回到首頁
toastTips	=	輸入 FaceCast ID
rechargeFAQ_title	=	常見問題
PayStatusSuccess_title	=	交易成功
PayStatusFail_title	=	交易失敗
PayStatusCancel_title	=	交易取消
Diamonds_title	=	FaceCast 鑽石充值官方網站
buy-notice	=	注意  pay.facecast.live 是 FaceCast 唯一官方購買鑽石網站，客服諮詢請進入【訊息】-【官方訊息】-【反饋與幫助】
RechargeHelp_title	=	充值幫助
openAPP	=	開啟 FaceCast APP
buy-diamonds-tit	=	購買鑽石服務
description	=	FaceCast 唯一官方鑽石充值網站 ， FaceCast 是一款國際化社交軟體，全球超過150多個國家和地區的使用者正在使用 FaceCast
keywords	=	FaceCast 充值,FaceCast 鑽石充值,FaceCast 官方充值,FaceCast 官方充值網站
wxPay = 請確認微信支付是否已完成
Completed = 已完成支付
failedPay = 支付遇到問題,重新支付
toastTips-no-complete = 支付未完成，請重新支付

5，頁面中的應用。
需要同時給元素新增id和class，這個 id 是第四條中提到的等號前面的id。這個類是一個統一的，只要你需要新增多語言相容你就需要在這個元素中新增一個 i18n 的類。

<body style="background: #F7F7F7;">
		<h3 class="recharge-h3 i18n" id="common-problem"></h3>
		<div class="recharge-text mar-btm">
			<p class="text-link i18n" id="whether-account"></p>
			<p class="text-tips i18n" id="answer-whether-account"></p>
			<hr class="hr-line" />
			<p class="text-link i18n" id="no-account"></p>
			<p class="text-tips i18n" id="answer-no-account"></p>
			<p class="text-tips i18n" id="recharge-money"></p>
			<p class="text-tips i18n" id="recharge-time"></p>
			<p class="text-tips i18n" id="recharge-shot"></p>
			<hr class="hr-line" />
			<p class="text-link i18n" id="recharge-wrong"> </p>
			<p class="text-tips i18n" id="answer-recharge-wrong"></p>
			<hr class="hr-line" />
			<p class="text-link i18n" id="refund"></p>
			<p class="text-tips i18n" id="answer-refund"></p>
		</div>
		<!-- Google Tag Manager (noscript) -->
		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKG5ZCG"
		height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
		<!-- End Google Tag Manager (noscript) -->
	</body>

相關文章