0
点赞
收藏
分享

微信扫一扫

优维低代码实践:国际化

逸省 2023-10-08 阅读 51

优维低代码实践:国际化_插值

优维低代码实践:国际化_插值_02

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

优维低代码实践连载第20期

《国际化》

Visual Builder依赖的底层框架Brick Next的国际化功能是基于 i18next 实现的。在Visual Builder编排过程中,可以使用国际化的功能去完善界面。

微应用的国际化配置

构件属性

国际化的配置分为两种方式:

a.提前配置国际化翻译表内容

国际化->新建Key->Build & Push

优维低代码实践:国际化_运维_03

优维低代码实践:国际化_运维_04

调用国际化翻译表内容

buttonName: <% I18N("BTN_SUBMIT") %>

优维低代码实践:国际化_应用名称_05

b.在编排中使用默认值配置方式,后期自动导入,生成国际化翻译表

使用 i18next 提供的默认值能力,先进行微应用的编排,后进行国际化配置。

优维低代码实践:国际化_应用名称_06

国际化->自动导入->Build & Push

优维低代码实践:国际化_运维_07

微应用名称

微应用名称的国际化需要在应用编辑页面配置 Locales 属性,例如:

en:
  name: Demo
zh:
  name: 示例

优维低代码实践:国际化_应用名称_08

运行时数据

有时候我们需要对运行时数据进行国际化转化。例如给定数据:

data:
  title:
    en: "Settings"
    zh: "设置"

通过表达式 <% I18N_TEXT(data.title) %> 即可根据当前语言设置得到对应的 "Settings" 或 "设置"。该能力在 brick_next: 2.24.18 开始支持。

构件开发的国际化配置

在自动生成的构件代码中,我们已经预置了国际化配置示例。

构件的国际化配置主要分为三步:

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

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

然后,在 ./src/i18n/locales/*.ts 中添加对应的翻译文本,例如:

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

最后,调用相关的 API 根据用户当前选择的语言地区来显示对应的信息,例如:

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>;
}

ps:每个构件包使用自己独立的 namespace,因此 Key 只需在每个构件包内唯一即可。

更多信息请参考底层使用的第三方库 react-i18next。

高级

插值

有时候一段文本会包含变量,并且不同语言可能有不同的组织方式,这时可以使用插值实现:

# Translations:
MODEL_MANAGEMENT:
  zh: "{{ modelName }}管理"
  en: "{{ modelName }} management"


# Usage:
brick: basic-bricks.micro-view
properties:
  pageTitle: '<% I18N("MODEL_MANAGEMENT", { modelName: CTX.myModelName }) %>'

复数

有些语言(例如英语)复数会有词形变化:

# Translations:
TOTAL_ITEMS:
  zh: "共 {{ modelName }} 项"
  en: "{{ count }} item"
TOTAL_ITEMS_plural:
  en: "{{ count }} items"


# Usage:
brick: div
properties:
  textContent: '<% I18N("TOTAL_ITEMS", { count: CTX.itemsCount }) %>'

更多复数配置方式请参考 i18next 的相关文档。

举报

相关推荐

0 条评论