[實作筆記] 前端置多語系 i18next

前情提要

多語系是國際化的專案很重要的一部份,
這次有機會接觸到國際化的前端的案子,
記錄一下前端主流的 i18next 如何設定。

設定

  1. 安裝 i18n

    1
    2
    3
    4
    5
    # npm
    $ npm install i18next --save

    # yarn
    $ yarn add i18next
  2. 準備多語系 JSON 檔, 為 Key-Value 形式, Value 為 string
    允許巢狀, 範例如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    {
    "zh": {
    "Week":{
    "Monday":"周一",
    "Tuesday":"周二",
    "Wednesday":"周三",
    "Thursday":"周四",
    "Friday":"周五",
    "Saturday":"周六",
    "Sunday":"周日"
    }
    },
    "es": {
    "Week":{
    "Monday":"Monday",
    "Tuesday":"Tuesday",
    "Wednesday":"Wednesday",
    "Thursday":"Thursday",
    "Friday":"Friday",
    "Saturday":"Saturday",
    "Sunday":"Sunday"
    }
    }
    }
  3. 起始設定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import i18next from 'i18next';
    import resources from './resources'; // 載入上一步的 JSON 檔

    i18next.init({
    lng: 'zh', // 預設語言
    debug: true,
    resources: resources
    });

    // 使用方式
    document.getElementById('output').innerHTML = i18next.t('Week.Sunday');
  4. 追加 React 設定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import React from "react";
    import i18n from "i18next";
    import { useTranslation, initReactI18next } from "react-i18next";
    import resources from './resources'; // 載入上一步的 JSON 檔

    i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
    resources: resources,
    lng: "en", // if you're using a language detector, do not define the lng option
    fallbackLng: "en",
    interpolation: {
    escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    }
    });

    在 React 中使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import ReactDOM from "react-dom";
    function App() {
    const { t } = useTranslation();
    return <h2>{t('Week.Sunday')}</h2>;
    }

    // append app to dom
    ReactDOM.render(
    <App />,
    document.getElementById("root")
    );

其它 Framework 請參考

參考

(fin)

Please enable JavaScript to view the Gitalk. :D
Please enable JavaScript to view the LikeCoin. :P
Please enable JavaScript to view the LikeCoin. :P