I18n
Brick Next 的国际化基于 i18next 实现。
微应用的国际化配置
要为微应用配置国际化信息,首先,在 Visual Builder 的 I18n 菜单中配置翻译表,例如:
然后在编排中通过表达式调用相关的 API 根据用户当前选择的语言地区来显示对应的信息,例如:
brick: eo-button
properties:
buttonName: '<% I18N("BTN_SUBMIT") %>'
自动导入
有时候我们会先进行微应用的编排,后进行国际化配置,因此我们可以使用 i18next 提供的默认值能力。
例如,我们可以不用事先声明翻译表,在编排中直接使用:
- brick: eo-button
properties:
buttonName: '<% I18N("BTN_RESET", "重置") %>'
- brick: eo-button
properties:
buttonName: '<% I18N("BTN_SUBMIT", "提交") %>'
利用默认值功能,我们可以先行编排微应用,以应对编排前期的频繁调整,并快速交付 MVP 版本。
当微应用趋于稳定,准备发布公开版本时,再通过 Next Builder 提供的自动导入功能,快速生成翻译表。
点击界面右上角的“自动导入”按钮,系统将自动扫描微应用中对 I18N(...)
的调用,生成一张翻译表:
最后按需补充其他语言的翻译即可。
每个微应用使用自己独立的 namespace,因此 Key 只需在每个微应用内唯一即可。
微应用名称
微应用名称的国际化需要在应用编辑页面配置 Locales
属性,例如:
en:
name: Demo
zh:
name: 示例
运行时数据
有时候我们需要对运行时数据进行国际化转化。例如给定数据:
data:
title:
en: "Settings"
zh: "设置"
通过表达式 <% I18N_TEXT(data.title) %>
即可根据当前语言设置得到对应的 "Settings"
或 "设置"
。
构件的国际化配置
在 v3 架构下,每个构件都是互相独立的,因此国际化也按单个构件进行配置。
bricks/*/
src/
say-hello/
index.tsx # 构件代码
i18n.ts # 构件国际化配置
在 React 组件中使用国际化
在 React 组件中使用国际化:
import React from "react";
import { createDecorators } from "@next-core/element";
import { ReactNextElement } from "@next-core/react-element";
import { useTranslation, initializeReactI18n } from "@next-core/i18n/react";
import { K, NS, locales } from "./i18n.js";
initializeReactI18n(NS, locales);
const { defineElement } = createDecorators();
@defineElement("demo-basic.say-hello")
class SayHello extends ReactNextElement {
render() {
return <SayHelloComponent />;
}
}
export function SayHelloComponent() {
const { t } = useTranslation(NS);
return (
<div>
{t(K.HELLO)},{t(K.WORLD)}
</div>
);
}
export { SayHello };
export enum K {
HELLO = "HELLO",
WORLD = "WORLD",
}
const en: Locale = {
HELLO: "Hello",
WORLD: "World",
};
const zh: Locale = {
HELLO: "你好",
WORLD: "世界",
};
export const NS = "bricks/demo-basic/say-hello";
export const locales = { en, zh };
type Locale = { [key in K]: string };
在非 React 组件中使用国际化
在非 React 组件中使用国际化与上述示例类似,有少许差别:
import { i18n, initialize18n } from "@next-core/i18n";
import { K, NS, locales } from "./i18n.js";
initialize18n(NS, locales);
const t = i18n.getFixedT(null, NS);
console.log(t(K.HELLO));
复用国际化
如果有必要,某个构件想要复用同一个构件包内的其他构件的国际化配置,可以 import
相关文件并执行初始化即可。例如:
// ../say-goodbye/index.tsx
import { K, NS, locales } from "./i18n.js";
import { K as K2, NS as NS2, locales as locales2 } from "../say-hello/i18n.js";
initializeReactI18n(NS, locales);
initializeReactI18n(NS2, locales2);
export function SayGoodbyeComponent() {
const { t } = useTranslation(NS);
const { t: t2 } = useTranslation(NS2);
return (
<div>
{t(K.GOODBYE)},{t2(K2.WORLD)}
</div>
);
}
高级
插值
有时候一段文本会包含变量,并且不同语言可能有不同的组织方式,这时可以使用插值实现:
# Translations:
MODEL_MANAGEMENT:
zh: "{{ modelName }}管理"
en: "{{ modelName }} management"
# Usage:
brick: eo-page-title
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 的相关文档。