Update i18n.md

This commit is contained in:
Zhou 2022-11-08 14:13:35 +08:00 committed by GitHub
parent 4101256cc0
commit 530bd87ce3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,8 +1,8 @@
# 国际化
# Internationalization
客户端的国际化多语言基于 npm 包 [react-i18next](https://npmjs.com/package/react-i18next) 实现,在应用顶层提供了 `<I18nextProvider>` 组件的包装,可以在任意位置直接使用相关的方法。
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 `<I18nextProvider>` 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(<languageKey>)}}'`,模板中的翻译函数会自动被执行:
The template method `'{{t(<languageKey>)}}'` 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';