优维低代码:I18n 国际化

news2024/9/22 5:46:27

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


连载第三十四期

《高级指引:I18n 国际化》

Brick Next 的国际化基于 i18next 实现。

# 微应用的国际化配置

要为微应用配置国际化信息,首先,在 Next Builder 的 I18n 菜单中配置翻译表,例如:

然后在编排中通过求值表达式调用相关的 API 根据用户当前选择的语言地区来显示对应的信息,例如:

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

# 自动导入

有时候我们会先进行微应用的编排,后进行国际化配置,因此我们可以使用 i18next 提供的默认值能力。

例如,我们可以不用事先声明翻译表,在编排中直接使用:

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

利用默认值功能,我们可以先行编排微应用,以应对编排前期的频繁调整,并快速交付 MVP 版本。

当微应用趋于稳定,准备发布公开版本时,再通过 Next Builder 提供的自动导入功能,快速生成翻译表。

点击界面右上角的“自动导入”按钮,系统将自动扫描微应用中对 I18N(...) 的调用,生成一张翻译表:

最后按需补充其他语言的翻译即可。

⊙ NOTE

每个微应用使用自己独立的 namespace,因此 Key 只需在每个微应用内唯一即可。

# 微应用名称

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

en:
  name: Demo
zh:
  name: 示例

# 运行时数据

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

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

⊙ NOTE

每个构件包使用自己独立的 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 }) %>'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/141535.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第8季3:使用字库字符实现区域显示

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、代码框架分析 在第8季2&#xff1a;OSD实验演示与代码分析中&#xff0c;我们分析了SAMPLE_RGN_CreateVideoRegion函数&#xff0c;该函数完成了左下角的logo区域显示、右下角的时间区域显示&a…

Ubuntu18.04安装教程

Ubuntu18.04安装教程# 阿里云源 deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-updates ma…

【Vue+Springboot】综合程序设计后端部分实现(含跨越访问)

文章目录1、功能展示2、前端部分&#xff1a;VueAPI3、后端部分&#xff1a;Springboot1、功能展示 大致分为用户管理&#xff0c;商品管理&#xff0c;收藏管理&#xff0c;购物车管理&#xff0c;订单管理五个模块。 2、前端部分&#xff1a;VueAPI Vue 使用 axios 库进行网…

如何在Unity中实现MVC模式?

MVC是什么&#xff1f; ​ MVC即Model View Controller&#xff0c;是模型(model)【数据层】&#xff0d;视图(view)【表现层】&#xff0d;控制器(controller)【逻辑层】的缩写。主要应用于网站开发&#xff0c;在游戏开发方面&#xff0c;因为不同游戏的需求、功能不尽相同&…

数字化转型迫在眉睫,企业应该如何面对?

火热的数字化转型&#xff0c;在国企、央企公布数字化转型规划后&#xff0c;进一步向各行各业开始扩散&#xff0c;吸引了很多对于数字化并不熟悉的企业。这些企业大多没有一个确定的目标&#xff0c;只是想要让企业完成转型改革&#xff0c;所以对于怎样做没有什么好的规划。…

Unity3d C#实现基于SocketIOUnity的与后端(node.js为例)Socket通信功能(含工程)

#前言 该功能主要是项目上的需求&#xff0c;按后端的需求就是我们通过SocketIO进行通信&#xff0c;之前游戏通信功能大多是基于原始的Socket进行封装&#xff0c;需要对包体进行设计&#xff0c;还需要粘包拆包等系列操作&#xff0c;属实有点麻烦。这次尝试了SocketIOUnity的…

Exynos_4412——RTC实验

目录 一、ADC小作业 二、RTC简介 三、Exynos_4412下的RTC控制器 四、RTC中的寄存器 五、RTC编程 六、RTC小作业 一、ADC小作业 电压在1501mv~1800mv时&#xff0c;LED2、LED3、LED4、LED5点亮 电压在1001mv~1500mv时&#xff0c;LED2、LED3、LED4点亮 电压在501mv~1000m…

什么是芯片老化测试?芯片老化测试系统NSAT-2000解决方案

随着半导体电子技术的进步&#xff0c;老化测试已成为保证产品质量的关键流程。除了半导体元件外&#xff0c;PCB、IC 和处理器部件也都需要在老化条件下进行测试。本篇文章纳米软件Namisoft小编将带大家分享一下关于芯片老化测试系统的相关知识。 一、什么是芯片老化测试&…

开发工具篇第十二讲:常用开发库 - Lombok工具库详解

开发工具篇第十二讲&#xff1a;常用开发库 - Lombok工具库详解 Lombok是一款非常实用Java工具&#xff0c;可用来帮助开发人员消除Java的冗长代码&#xff0c;尤其是对于简单的Java对象&#xff08;POJO&#xff09;。实际上我并不推荐使用Lombok&#xff08;不主动使用它&…

CANoe测试TC8

OPEN联盟发布的TC8是目前行业内关于车载以太网的标准测试规范之一。 CANoe环境需要硬件和软件: 硬件是CANoe设备&#xff0c;用来连接电脑和DUT&#xff0c;TC8测试的是以太&#xff0c;那么CANoe设备必须支持以太才行&#xff0c;目前VN5640以上都是支持的。 软件需要安装CANo…

对git rebase 和git merge的理解

一、是什么 在使用 git 进行版本管理的项目中&#xff0c;当完成一个特性的开发并将其合并到 master 分支时&#xff0c;会有两种方式&#xff1a; git mergegit rebase git rebase 与 git merge都有相同的作用&#xff0c;都是将一个分支的提交合并到另一分支上&#xff0c;…

物联网技术在地下综合管廊智能化建设中的应用实例分析

摘 要:物联网是21世纪传感技术、通信技术、信息技术的应用大集成利用物联网技术实现地下综合管廊的智能化管理符合经济和城市规划发展的需要分析了物联网技术的特点及地下综合管廊建设中物联网技术的应用并结合物联网技术在地下综合管廊建设的应用实例对物联网技术在地下综合…

Qt扫盲-Windows任务栏使用总结

Qt扫盲-Windows任务栏使用总结一、概述二、覆盖图标和进度指示器三、跳转列表四、缩略图工具栏一、概述 任务栏为用户提供了访问桌面上打开的应用程序的权限。Windows自动在任务栏上创建用于访问应用程序窗口的按钮。 从 Windows 7到Windows10 都有效果。就是在任务栏上的一个…

基于springboot框架个人博客管理系统

一、项目简介 本项目是一套基于springboot框架实现的个人博客管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&a…

头歌:UDP Ping程序实现 客户端创建UDP套接字

头歌平台&#xff1a;头歌实践教学平台 (educoder.net)创建数据包套接字套接字 Socket 实质上提供了主机间进程通信的连接点。进程通信之前&#xff0c;双方首先必须各自创建一个连接点,否则是没有办法建立联系并相互通信的。一个完整的 Socket {协议,本地地址,本地端口,远程地…

在 React 中使用 i18next

1. 安装依赖 npm i i18next react-i18next i18next-browser-languagedetectori18next 提供了翻译的基本能力。react-i18next 是 i18next 的一个插件&#xff0c;用来降低 react 的使用成本。i18next-browser-languagedetector 是用来检测浏览器语言的插件。 2. 在src下创建i18…

.net core 中使用confluent kafka构建生产者

创建.net 6 API安装依赖包 创建kafka生产者 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Confluent.Kafka; using Confluent.Kafka.Admin; using KafkaHelper.Config; using Microsoft.Exte…

Cuk拓扑产生负压

1、基础拓扑的输入输出电流连续情况 1>Buck电路 图中绿色波形为输入端的电流&#xff08;测的图中MOS上的电流&#xff09;&#xff0c;蓝色的输出端的电流&#xff08;图中电感L4的电流&#xff09;&#xff0c;可以看出输入端电流不连续&#xff0c;输出端电流连续。 2&…

Revit中项目特别大如何将项目完整的体现在图纸中?

一、Revit中项目特别大如何将项目完整的体现在图纸中? 遇到项目特别大&#xff0c;在一张图纸是放置不下时&#xff0c;如图1所示&#xff0c;怎样才能将项目完整的体现在图纸当中? 在遇到特别大的项目可能会在图纸中放不下&#xff0c;在这种情况下我们要用拼接线来处理。在…

【JavaEE】SSM框架

文章目录一、Spring1、Spring相关概念1.1 Spring Framework系统架构1.2 核心概念(lOC、lOC容器、Bean、DI)2、入门案例2.1 IOC入门案例2.2 DI入门案例3、lOC相关内容3.1 bean配置3.2 bean实例化3.3 bean的生命周期3.3.1 控制bean生命周期执行的方法3.3.2 bean销毁时机4、DI相关…