国际化

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 组件中使用国际化

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 的相关文档。