優(yōu)維低代碼技術(shù)專欄，是一個全新的、技術(shù)為主的專欄，由優(yōu)維技術(shù)委員會成員執(zhí)筆，基于優(yōu)維7年低代碼技術(shù)研發(fā)及運維成果，主要介紹低代碼相關(guān)的技術(shù)原理及架構(gòu)邏輯，目的是給廣大運維人提供一個技術(shù)交流與學(xué)習(xí)的平臺。

連載第三十四期

(資料圖片)

《高級指引：I18n 國際化》

▽

Brick Next 的國際化基于 i18next 實現(xiàn)。

#微應(yīng)用的國際化配置

要為微應(yīng)用配置國際化信息，首先，在 Next Builder 的 I18n 菜單中配置翻譯表，例如：

然后在編排中通過求值表達(dá)式調(diào)用相關(guān)的 API 根據(jù)用戶當(dāng)前選擇的語言地區(qū)來顯示對應(yīng)的信息，例如：

brick: basic-bricks.general-buttonproperties:  buttonName: "<% I18N("BTN_SUBMIT") %>"

#自動導(dǎo)入

有時候我們會先進(jìn)行微應(yīng)用的編排，后進(jìn)行國際化配置，因此我們可以使用 i18next 提供的默認(rèn)值能力。

例如，我們可以不用事先聲明翻譯表，在編排中直接使用：

- brick: basic-bricks.general-button  properties:    buttonName: "<% I18N("BTN_RESET", "重置") %>"- brick: basic-bricks.general-button  properties:    buttonName: "<% I18N("BTN_SUBMIT", "提交") %>"

利用默認(rèn)值功能，我們可以先行編排微應(yīng)用，以應(yīng)對編排前期的頻繁調(diào)整，并快速交付 MVP 版本。

當(dāng)微應(yīng)用趨于穩(wěn)定，準(zhǔn)備發(fā)布公開版本時，再通過 Next Builder 提供的自動導(dǎo)入功能，快速生成翻譯表。

點擊界面右上角的“自動導(dǎo)入”按鈕，系統(tǒng)將自動掃描微應(yīng)用中對I18N(...)的調(diào)用，生成一張翻譯表：

最后按需補充其他語言的翻譯即可。

⊙ NOTE

每個微應(yīng)用使用自己獨立的 namespace，因此 Key 只需在每個微應(yīng)用內(nèi)唯一即可。

#微應(yīng)用名稱

微應(yīng)用名稱的國際化需要在應(yīng)用編輯頁面配置Locales屬性，例如：

en:  name: Demozh:  name: 示例

#運行時數(shù)據(jù)

有時候我們需要對運行時數(shù)據(jù)進(jìn)行國際化轉(zhuǎn)化。例如給定數(shù)據(jù)：

data:  title:    en: "Settings"    zh: "設(shè)置"

通過表達(dá)式<% I18N_TEXT(data.title) %>即可根據(jù)當(dāng)前語言設(shè)置得到對應(yīng)的"Settings"或"設(shè)置"。該能力在brick_next: 2.24.18開始支持。

#構(gòu)件的國際化配置

在自動生成的構(gòu)件代碼中，我們已經(jīng)預(yù)置了國際化配置示例。

構(gòu)件的國際化配置主要分為三步：

首先，在bricks/YOUR-PKG/src/i18n/constant.ts中添加 key，例如：

export enum K {  LOGIN = "LOGIN",  LOGOUT = "LOGOUT",}

然后，在./src/i18n/locales/*.ts中添加對應(yīng)的翻譯文本，例如：

const locale: Locale = {  [K.LOGIN]: "登錄",  [K.LOGOUT]: "登出",};

最后，調(diào)用相關(guān)的 API 根據(jù)用戶當(dāng)前選擇的語言地區(qū)來顯示對應(yīng)的信息，例如：

import { useTranslation } from "react-i18next";import { NS_BASIC_BRICKS, K } from "../../i18n/constants";function LoginForm() {  const { t } = useTranslation(NS_BASIC_BRICKS);  return {t(K.LOGIN)};}

⊙ NOTE

每個構(gòu)件包使用自己獨立的 namespace，因此 Key 只需在每個構(gòu)件包內(nèi)唯一即可。

更多信息請參考底層使用的第三方庫 react-i18next。

#高級

#插值

有時候一段文本會包含變量，并且不同語言可能有不同的組織方式，這時可以使用插值實現(xiàn)：

# Translations:MODEL_MANAGEMENT:  zh: "{{ modelName }}管理"  en: "{{ modelName }} management"# Usage:brick: basic-bricks.micro-viewproperties:  pageTitle: "<% I18N("MODEL_MANAGEMENT", { modelName: CTX.myModelName }) %>"

#復(fù)數(shù)

有些語言（例如英語）復(fù)數(shù)會有詞形變化：

# Translations:TOTAL_ITEMS:  zh: "共 {{ modelName }} 項"  en: "{{ count }} item"TOTAL_ITEMS_plural:  en: "{{ count }} items"# Usage:brick: divproperties:  textContent: "<% I18N("TOTAL_ITEMS", { count: CTX.itemsCount }) %>"