diff --git a/docs/en-US/development/client/i18n.md b/docs/en-US/development/client/i18n.md index 5ea350bc6..49136d010 100644 --- a/docs/en-US/development/client/i18n.md +++ b/docs/en-US/development/client/i18n.md @@ -1,8 +1,8 @@ -# 国际化 +# Internationalization -客户端的国际化多语言基于 npm 包 [react-i18next](https://npmjs.com/package/react-i18next) 实现,在应用顶层提供了 `` 组件的包装,可以在任意位置直接使用相关的方法。 +Client-side internationalization for multiple languages is implemented based on the npm package [react-i18next](https://npmjs.com/package/react-i18next), which provides a wrapper for the `` component at the top level of the application, allowing the relevant methods to be used directly at any location. -添加语言包: +Adding language packages: ```tsx | pure import { i18n } from '@nocobase/client'; @@ -13,16 +13,16 @@ i18n.addResources('zh-CN', 'test', { }); ``` -注:这里第二个参数填写的 `'test'` 是语言的命名空间,通常插件自己定义的语言资源都应该按自己插件包名创建特定的命名空间,以避免和其他语音资源冲突。NocoBase 中默认的命名空间是 `'client'`,大部分常用和基础的语言翻译都放置在此命名空间,当没有提供所需语言时,可在插件自身的命名空间内进行扩展定义。 +Note: Here the second parameter filled in `'test'` is the language namespace, usually the plugin itself defines the language resources should create a specific namespace according to their own plugin package name, in order to avoid conflicts with other language resources. The default namespace in NocoBase is `'client'` and most common and basic language translations are placed in this namespace. When the required language is not provided, it can be defined by extension in the plugin's own namespace. -在组件中调用翻译函数: +To call the translation function in the component: ```tsx | pure import React from 'react'; import { useTranslation } from 'react-i18next'; export default function MyComponent() { - // 使用之前定义的命名空间 + // Use the previously defined namespace const { t } = useTranslation('test'); return ( @@ -33,7 +33,7 @@ export default function MyComponent() { } ``` -在 SchemaComponent 组件中可以直接使用模板方法 `'{{t()}}'`,模板中的翻译函数会自动被执行: +The template method `'{{t()}}'` can be used directly in the SchemaComponent component, and the translation functions in the template will automatically be executed. ```tsx | pure import React from 'react'; @@ -54,7 +54,7 @@ export default function MySchemaComponent() { } ``` -在某些特殊情况下也需要以模板的方式定义多语言时,可以使用 NocoBase 内置的 `compile()` 方法编译为多语言结果: +In some special cases where it is also necessary to define multilingualism as a template, the NocoBase built-in `compile()` method can be used to compile to multilingual results. ```tsx | pure import React from 'react'; @@ -71,9 +71,9 @@ export default function MyComponent() { } ``` -## 建议配置 +## Suggested configuration -以英文文案为 key,翻译为 value,这样的好处,即使多语言缺失,也会以英文显示,不会造成阅读障碍,如: +With English text as the key and translation as the value, the benefit of this, even if multiple languages are missing, it will be displayed in English and will not cause reading barriers, e.g. ```ts i18n.addResources('zh-CN', 'my-plugin', { @@ -82,22 +82,22 @@ i18n.addResources('zh-CN', 'my-plugin', { }); ``` -为了更方便管理多语言文件,推荐在插件中创建一个 `locale` 文件夹,并把对应语言文件都放置在其中方便管理: +To make it easier to manage multilingual files, it is recommended to create a `locale` folder in the plugin and place all the corresponding language files in it for easy management. ```bash |- /my-plugin |- /src |- /client - |- locale # 多语言文件夹 + |- locale # Multilingual folder |- zh-CN.ts |- en-US.ts ``` -## 示例 +## Example -### 客户端组件多语言 +### Client-side components with multiple languages -例如订单状态的组件,根据不同值有不同的文本显示: +For example, the order status component, with different text displays depending on the value. ```tsx | pure import React from 'react';