I18n 时

Kibana依赖于几个UI框架(ReactJS和AngularJS)和需要在不同环境中本地化(浏览器和节点JS). 国际化引擎具有框架不可知性和消耗性 kibana的所有部分(ReactJS,AngularJS和NodeJS). 为了简化在UI框架中的国际化,额外的抽象是: 围绕I18n引擎建造: react-intl 用于反应和自定义 angularJS 组件. 反应- 插入围绕内存信息格式, (中文(简体) ), 因此 React 和 AngularJS 框架都使用相同的引擎和相同的消息语法.

本地化文件

本地化文件为JSON文件.

使用注释可以帮助理解应用程序的哪个部分用于本地化密钥。还有 namespaces 用于简化消息位置搜索。例如,如果我们将翻译 /management/sections/objects/_objects.html 文件,我们应该使用这样的消息路径 : 'management.objects.objectsTitle'。。。 .

每个 Kibana 插件有一个单独的文件夹, 翻译文件位于

{path/to/plugin}/translations/{locale}.json

地点 locale 实值 ISO 639 语言代码。。。 .

例如:

src/legacy/core_plugins/kibana/translations/fr.json

引擎扫描 x-pack/legacy/plugins/*/translations, (中文(简体) ), src/core_plugins/*/translations, (中文(简体) ), plugins/*/translations 财务报告和审定财务报表 src/legacy/ui/translations 初始化文件夹,所以不需要注册翻译文件.

引擎使用一个 config/kibana.yml 用于本地化解析进程的文件。如果语言是通过 i18n.locale 选项在 config/kibana.yml 然后它将成为基地语言,否则 i18n 引擎将返回 en编辑 en 语言也将被使用如果无法为基础非英语语言找到翻译.

我们的技术要求之一是模板中有默认信息自己,那些留言将永远是英文, 所以我们不必保留 en.json 文件在仓库中。我们可以从 defaultMessage编号定义内行.

说明: 定义于 i18n.locale 用于翻译文件的文件应完全匹配,例如. i18n.locale: zh 财务报告和审定财务报表 .../translations/zh-CN.json 无法匹配将使用默认的英文翻译,但 i18n.locale: zh-CN 财务报告和审定财务报表.../translations/zh-CN.json 或者说 i18n.locale: zh 财务报告和审定财务报表 .../translations/zh.json 将如所预期的那样发挥作用.

说明: 地方应该像 zh-CN 地点 zh - 小写双字母或三字母ISO-639代码财务报告和审定财务报表 CN - 大写双字母ISO-3166代码(可选). ISO-639号标准财务报告和审定财务报表 ISO-3166 标准代码应当与 - 字符键.

I18n 发动机

I18n 引擎是平台不可知抽象,有助于提供地产提供直接翻译的方法.

以下是这个引擎曝光的公众API:

addMessages(messages: Map<string, string>, [locale: string]) - 提供一种登记方式用引擎翻译
getMessages() - 返回当前语言的信息
setLocale(locale: string) - 告诉引擎使用哪一种语言语言密钥
getLocale() - 返回当前区域
setDefaultLocale(locale: string) - 告诉图书馆哪一种语言会退缩缺少翻译时
getDefaultLocale() - 返回默认区域
setFormats(formats: object) - 提供一套选择基础物. 详细解释见下文一节
getFormats() - 返回当前格式
getRegisteredLocales() - 返回有翻译的语境序列
translate(id: string, { values: object, defaultMessage: string, description: string }) – 说吧 – 由 id 翻译消息 . description 是将提取的可选上下文注释 i18n 工具,并添加为翻译消息旁边的评论 defaultMessages.json。。。 .
init(messages: Map<string, string>) - 启动引擎

I18n发动机内部

引擎使用 ICU Message 语法, 并对所有的 QQR 语言工作定义了复数化规则。这是围绕 intl-messageformat 软件包它暴露了 IntlMessageFormat 课。向构建器提供信件作为字符串消息,或预分解的 AST 对象.

import IntlMessageFormat from 'intl-messageformat';

const msg = new IntlMessageFormat(message, locales, [formats]);

字符串 message 解析,然后在内部存储优化用于 format() 方法生成向用户显示的格式化字符串.

const output = msg.format(values);

formats 参数在 IntlMessageFormat 构造器允许格式化编号使用 Intl.NumberFormat 财务报告和审定财务报表 Intl.DateTimeFormat, (中文(简体) ), 页:1.

const msg = new IntlMessageFormat('The price is: {price, number, USD}', 'en-US', {
  number: {
    USD: {
      style   : 'currency',
      currency: 'USD',
    },
  },
});

const output = msg.format({ price: 100 });

console.log(output); // => "The price is: $100.00"

在这个例子中,我们正在定义一个美元数字格式样式基础 Intl.NumberFormat 作为选择. 给您可以找到用作格式原型的默认格式选项提供给建筑师.

创建实例 IntlMessageFormat 很贵的. 格式化缓存库只是为了更容易创建缓存格式用于协助其再利用的特定类型的实例。在头罩,此软件包根据所通过参数创建缓存密钥给纪念建筑师.

import memoizeIntlConstructor from 'intl-format-cache';

const getMessageFormat = memoizeIntlConstructor(IntlMessageFormat);

香草联署材料

Intl-messageformat 软件包假设: 输入全球对象存在于运行时. Intl 存在于所有现代浏览器和Node.js 0.10+. 为装入i18n 引擎在节点.js,我们应该简单地 import 此模块(在节点.js中数据与图书馆一起装入所有200+语言),并通过翻译信件输入 init 方法 :

import { i18n } from '@kbn/i18n';

i18n.init(messages);

一个常见的用法是将一串常数国际化。这个我们如何做到这一点的例子:

import { i18n } from '@kbn/i18n';

export const HELLO_WORLD = i18n.translate('hello.wonderful.world', {
  defaultMessage: 'Greetings, planet Earth!',
});

还有一个有参数的例子:

import { i18n } from '@kbn/i18n';

export function getGreetingMessage(userName) {
  return i18n.translate('hello.wonderful.world', {
    defaultMessage: 'Greetings, {name}!',
    values: { name: userName },
    description: 'This is greeting message for main screen.'
  });
}

我们还可以使用i18n引擎暴露出的所有方法 (见 I18n 发动机 (详见上文一节).

反应

反应- 插入库用于内部化反应部分应用. 它提供了反应组件和一个格式化的 API 日期、数字和字符串,包括复数化和处理翻译.

React Intl使用提供商模式将一个i18n上下文范围到一棵组件树上. IntlProvider 组件用于为树设置 i18n 上下文。之后,我们能够使用 FormattedMessage 用于翻译信件的组件. IntlProvider 应当将反应app的根组件(每个反应渲染方法的内侧)包起来.

为了翻译信件,我们需要使用 I18nProvider 组成部分在引擎盖下使用I18n引擎:

import React from 'react';
import ReactDOM from 'react-dom';
import { I18nProvider } from '@kbn/i18n/react';

ReactDOM.render(
  <I18nProvider>
    <RootComponent>
      ...
    </RootComponent>
  </I18nProvider>,
  document.getElementById('container')
);

之后,我们可以使用 FormattedMessage 内部组件 RootComponent数字 :

import React, { Component } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';

class RootComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: 'Eric',
      unreadCount: 1000,
    };
  }

  render() {
    const {
      name,
      unreadCount,
    } = this.state;

    return (
      <p>
        <FormattedMessage
          id="welcome"
          defaultMessage="Hello {name}, you have {unreadCount, number} {unreadCount, plural,
            one {message}
            other {messages}
          }"
          values={{name: <b>{name}</b>, unreadCount}}
        />
        ...
      </p>
    );
  }
}

可以选择通过 description 输入 FormattedMessage 组件. 此道具是可选的上下文注释,将由 i18n 工具取出 ,并添加到翻译信件旁边的评论 defaultMessages.json

注: 尽可能减少多重性的机会 I18nProvider react 树中的组件,请尝试使用 I18nProvider 仅可以包裹您渲染的最顶端组件, 例如, 传递给 reactDirective 或者说 ReactDOM.render。。。 .

格式调整

FormattedRelative 期望若干属性( 更多阅读) 这里,包括:

value 可以被分析为日期,
formats 应该是其中之一 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds' (此选项配置于 formats.ts(中文(简体) )
包括:.

若为 formats 不提供, 则将自动选择 :
x seconds ago 页:1 x < 60, (中文(简体) ), 1 minute ago 页:1 60 <= x < 120等 (中文(简体) ).

<FormattedRelative
  value={Date.now() - 90000}
  format="seconds"
/>

初步结果: 90 seconds ago

<FormattedRelative
  value={Date.now() - 90000}
/>

初步结果: 1 minute ago

React 中的属性翻译

长期计划是依靠 FormattedMessage 财务报告和审定财务报表 i18n.translate() 通过静态导入 i18n 从 @kbn/i18n 软件包. 避免使用 injectI18n 并依赖 i18n.translate() 换句话说.

React 包装器提供了一种能力,通过它使用道具将强制格式的API注入React 组件 injectI18n 高阶组件。当您的 React 组件需要将数据格式化为一个不适合 React 元素的字符串值时,应当使用此功能; 例如, a title 或者说 aria 属性。为了使用它,你应该用 injectI18n 高阶组件。将通过以下方式向包裹的组件提供格式化的API: props.intl。。。 .

将组件作为纯函数 :

import React from 'react';
import { injectI18n, intlShape } from '@kbn/i18n/react';

export const MyComponent = injectI18n({ intl }) => (
  <input
    type="text"
    placeholder={intl.formatMessage(
      {
        id: 'welcome',
        defaultMessage: 'Hello {name}, you have {unreadCount, number}\
{unreadCount, plural, one {message} other {messages}}',
        description: 'Message description',
      },
      { name, unreadCount }
    )}
  />
));

MyComponent.WrappedComponent.propTypes = {
  intl: intlShape.isRequired,
};

作为类反应组件 :

import React from 'react';
import { injectI18n, intlShape } from '@kbn/i18n/react';

export const MyComponent = injectI18n(
  class MyComponent extends React.Component {
    static propTypes = {
      intl: intlShape.isRequired,
    };

    render() {
      const { intl } = this.props;

      return (
        <input
          type="text"
          placeholder={intl.formatMessage({
            id: 'kbn.management.objects.searchPlaceholder',
            defaultMessage: 'Search',
          })}
        />
      );
    }
  }
);

角 JS 语言

长期计划是依靠 i18n.translate() 通过静态导入 i18n 从 @kbn/i18n 软件包. 避免使用 i18n 过滤器和 i18n 服务注入控制器、指令、服务.

AngularJS 包装器有4个实体: 翻译 provider, (中文(简体) ), service, (中文(简体) ), directive 财务报告和审定财务报表 filter。指令和过滤器都使用翻译 service 引擎盖下装有i18n引擎.

翻译 provider 用于 service 配置和有下列方法:

addMessages(messages: Map<string, string>, [locale: string]) - 提供一种登记方式图书馆翻译
setLocale(locale: string) - 告诉图书馆使用哪一种语言语言密钥
getLocale() - 返回当前区域
setDefaultLocale(locale: string) - 告诉图书馆哪一种语言会退缩缺少翻译时
getDefaultLocale() - 返回默认区域
setFormats(formats: object) - 提供一套关于基础物的选项
getFormats() - 返回当前格式
getRegisteredLocales() - 返回有翻译的语境序列
init(messages: Map<string, string>) - 启动引擎

翻译 service 只提供一种方法:

i18n(id: string, { values: object, defaultMessage: string, description: string }) – 说吧 – 由 id 翻译信件

翻译 filter 用于属性翻译并有下列语法:

{{ ::'translationId' | i18n: { values: object, defaultMessage: string, description: string } }}

地点:

translationId - 待翻译的id
values - 转换的数值
defaultMessage - 除非翻译成功,否则将使用(最后文本) 英文的回落,用于生成 en.json(中文(简体) )
description - 由 i18n 工具提取的可选上下文注释 ,并添加到翻译信件旁边的评论 defaultMessages.json

翻译 directive 语法如下:

<ANY
  i18n-id="{string}"
  i18n-default-message="{string}"
  [i18n-values="{object}"]
  [i18n-description="{string}"]
></ANY>

地点:

i18n-id - 待翻译的id
i18n-default-message - 除非翻译成功,否则将使用
i18n-values - 转换的数值
i18n-description - 由 i18n 工具提取的可选上下文注释 ,并添加到翻译信件旁边的评论 defaultMessages.json

如果 HTML 渲染为 i18n-values 中需要值键 i18n-values 对象应该有 html_ 前缀。否则,该值将插入到信件中,而不包含 HTML 渲染.
示例

<p
  i18n-id="namespace.id"
  i18n-default-message="Text with an emphasized {text}."
  i18n-values="{
    html_text: '<em>text</em>',
  }"
></p>

角质 I18n 模块被放置到 autoload 模块,所以这将是自动装入。之后,我们可以在Angular模板中使用i18n指令:

<span
  i18n-id="welcome"
  i18n-default-message="Hello!"
></span>

为了在AngularJS中翻译属性,我们应该使用 i18nFilter数字 :

<input
  type="text"
  placeholder="{{ ::'kbn.management.objects.searchAriaLabel' | i18n: {
    defaultMessage: 'Search { title } Object',
    values: { title }
  } }}"
>

I18n 工具

为了简化本地化进程,实施了一些额外的工具:

用于校验所有翻译的工具有可转换字符串,并从模板中提取默认信件
用于校验翻译文件并将其整合到 Kibana 的工具

I18n 工具文档

@cybernetex/kbn-i18n

I18n 时

本地化文件

I18n 发动机

I18n发动机内部

香草联署材料

反应

格式调整

React 中的属性翻译

角 JS 语言

I18n 工具

版本与发布记录

关于 @cybernetex/kbn-i18n 的常见问题

@cybernetex/kbn-i18n 是什么？

如何安装 @cybernetex/kbn-i18n？

@cybernetex/kbn-i18n 支持 TypeScript 吗？

@cybernetex/kbn-i18n 支持 ESM 还是 CommonJS？

@cybernetex/kbn-i18n 可以商用吗？

@cybernetex/kbn-i18n 的下载量有多少？

@cybernetex/kbn-i18n 还在维护吗？