iT邦幫忙

0

javascript實作i18n的方法?

如題
我現在看到實作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來顯示不同語言的字串

lkjmn1234 iT邦新手 5 級 ‧ 2020-08-13 11:53:14 檢舉
html 跟 javascript是兩個層面
你不能在html tag中導入javascript param
i18n的做法有很多,比如jquery datepicker也有中文化的版本,只要在JS裡註明
$.datepicker.setDefaults($.datepicker.regional["zh-TW"]);


方法很多,看你怎麼做而已,用JSON做i18n,只要把字串字典化就好
淺水員 iT邦研究生 2 級 ‧ 2020-08-13 12:38:41 檢舉
套件我還沒研究,不過真的要做應該還是有辦法。
另外 SEO 也是要考慮的一部分,前端渲染應該會影響到。

1 個回答

2
通靈亡
iT邦研究生 2 級 ‧ 2020-08-13 13:06:36

新版文件與原始碼

第一種: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">

感恩!

我要發表回答

立即登入回答