如題
我現在看到實作i18n的方式好像
都是透過vue或react之類的框架
或是透過webpack這樣工具去做i18n
如果是一個純粹的js前端網站該如何實現i18n呢?
我有找到一個叫做i18next的套件
透過類似這樣的api
i18next.t('key')
i18next.t('appName.message')
i18next.t('appName.description')
把不同語言的key的內容顯示出來
但是我不能把字串直接綁定到html
比如說這個是google chrome extensions的例子
類似這樣
<header title="__MSG_title__">__MSG_appName__</header>
還是必須要在透過js操作dom來顯示不同語言的字串
第一種:HTML5 Selector
第二種:JQueryPlugin
使用方式跟舊版大致相同
在官網文件有提到綁定到html標籤的文字、屬性以及data的方法:
https://i18next.github.io/i18next/pages/doc_jquery.html
假設你的資料和初始化設定:
var resources = {
"tw": ...,
"en": {
"translation": {
"content": {
"test": "<h1>Hello My Friend !</h1> "
}
}
}
}
i18n.init({"resStore": resources}, function( t ) {
$('.i18n').i18n();
});
修改標籤屬性:
<div data-i18n="[title]content.test"></div>
<input data-i18n="[placeholder]content.test" value="name">
修改標籤的內容(連同裡面的HTML標籤):
<div class="i18n" data-i18n="[html]content.test">