Skip to main content

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(...) 的调用,生成一张翻译表:

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

note

每个微应用使用自己独立的 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 的相关文档