javascript實作i18n的方法?

javascript i18n

samdrivert 2020-08-13 11:47:25 ‧ 5285 瀏覽

如題
我現在看到實作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

japhenchen iT邦超人 1 級 ‧ 2020-08-13 12:34:00 檢舉

i18n的做法有很多，比如jquery datepicker也有中文化的版本，只要在JS裡註明
$.datepicker.setDefaults($.datepicker.regional["zh-TW"]);

方法很多，看你怎麼做而已，用JSON做i18n，只要把字串字典化就好

淺水員 iT邦大師 6 級 ‧ 2020-08-13 12:38:41 檢舉

套件我還沒研究，不過真的要做應該還是有辦法。
另外 SEO 也是要考慮的一部分，前端渲染應該會影響到。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

通靈亡

iT邦高手 1 級 ‧ 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">

回應 1
分享
檢舉

samdrivert iT邦新手 5 級 ‧ 2020-08-13 16:16:01 檢舉

感恩!

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙