导语：优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
优维低代码实践连载第20期
《国际化》
▽
Visual Builder依赖的底层框架Brick Next的国际化功能是基于 i18next 实现的。在Visual Builder编排过程中，可以使用国际化的功能去完善界面。 微应用的国际化配置 构件属性 国际化的配置分为两种方式： a.提前配置国际化翻译表内容 国际化->新建Key->Build & Push 调用国际化翻译表内容 b.在编排中使用默认值配置方式，后期自动导入，生成国际化翻译表 使用 i18next 提供的默认值能力，先进行微应用的编排，后进行国际化配置。 国际化->自动导入->Build & Push 微应用名称 微应用名称的国际化需要在应用编辑页面配置 Locales 属性，例如： 运行时数据 有时候我们需要对运行时数据进行国际化转化。例如给定数据： 通过表达式 <% I18N_TEXT(data.title) %> 即可根据当前语言设置得到对应的 "Settings" 或 "设置"。该能力在 brick_next: 2.24.18 开始支持。 构件开发的国际化配置 在自动生成的构件代码中，我们已经预置了国际化配置示例。 构件的国际化配置主要分为三步： 首先，在 bricks/YOUR-PKG/src/i18n/constant.ts 中添加 key，例如： 然后，在 ./src/i18n/locales/*.ts 中添加对应的翻译文本，例如： 最后，调用相关的 API 根据用户当前选择的语言地区来显示对应的信息，例如： ps:每个构件包使用自己独立的 namespace，因此 Key 只需在每个构件包内唯一即可。 更多信息请参考底层使用的第三方库 react-i18next。 高级 插值 有时候一段文本会包含变量，并且不同语言可能有不同的组织方式，这时可以使用插值实现： 复数 有些语言（例如英语）复数会有词形变化： 更多复数配置方式请参考 i18next 的相关文档。
buttonName: <% I18N("BTN_SUBMIT") %> 
en: name: Demozh: name: 示例
data: title: en: "Settings" zh: "设置"export enum K { LOGIN = "LOGIN", LOGOUT = "LOGOUT",}const locale: Locale = { [K.LOGIN]: "登录", [K.LOGOUT]: "登出",};import { useTranslation } from "react-i18next";import { NS_BASIC_BRICKS, K } from "../../i18n/constants";
function LoginForm() { const { t } = useTranslation(NS_BASIC_BRICKS); return <Button>{t(K.LOGIN)}</Button>;}# Translations:MODEL_MANAGEMENT: zh: "{{ modelName }}管理" en: "{{ modelName }} management"
# Usage:brick: basic-bricks.micro-viewproperties: pageTitle: '<% I18N("MODEL_MANAGEMENT", { modelName: CTX.myModelName }) %>'# Translations:TOTAL_ITEMS: zh: "共 {{ modelName }} 项" en: "{{ count }} item"TOTAL_ITEMS_plural: en: "{{ count }} items"
# Usage:brick: divproperties: textContent: '<% I18N("TOTAL_ITEMS", { count: CTX.itemsCount }) %>'
