From 2cf8330e84255aab36f30000511a748007349b65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 9 Nov 2020 01:58:24 -0600 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=A1=A3=EF=BC=8C?= =?UTF-8?q?=E4=BD=BF=E5=85=B6=E7=AC=A6=E5=90=88=E7=8E=B0=E5=9C=A8=E7=9A=84?= =?UTF-8?q?=E6=8E=A8=E8=8D=90=E7=94=A8=E6=B3=95=20(#5646)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 4 +- docs/plugins/plugin-layout.md | 215 ++++++++++++---------------- docs/plugins/plugin-layout.zh-CN.md | 139 +++++++----------- docs/plugins/plugin-locale.md | 170 +++++++++++----------- docs/plugins/plugin-locale.zh-CN.md | 44 +++--- 5 files changed, 251 insertions(+), 321 deletions(-) diff --git a/.prettierrc b/.prettierrc index e6e0da3ca1ac..cb731ea34d60 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,7 +3,5 @@ "singleQuote": true, "trailingComma": "all", "proseWrap": "never", - "overrides": [ - { "files": ".prettierrc", "options": { "parser": "json" } } - ] + "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }] } diff --git a/docs/plugins/plugin-layout.md b/docs/plugins/plugin-layout.md index 6dc63e84d54d..36326a4ab888 100644 --- a/docs/plugins/plugin-layout.md +++ b/docs/plugins/plugin-layout.md @@ -1,217 +1,184 @@ ---- -translateHelp: true ---- - # @umijs/plugin-layout +## How to enable -## 启用方式 +The configuration is turned on. -配置开启。 +## Introduction -## 介绍 +In order to further reduce the cost of research and development, we tried to build the layout through the umi plug-in. You can have Ant Design's Layout through simple configuration, including navigation and sidebar. So that users do not need to care about the layout. -为了进一步降低研发成本，我们尝试将布局通过 umi 插件的方式内置，只需通过简单的配置即可拥有 Ant Design 的 Layout，包括导航以及侧边栏。从而做到用户无需关心布局。 +- The default is Ant Design's Layout [@ant-design/pro-layout](https://www.npmjs.com/package/@ant-design/pro-layout), which supports all its configuration items. +- The sidebar menu data is automatically generated according to the configuration in the route. +- By default, it supports 403/404 processing and Error Boundary for routing. +- Used together with @umijs/plugin-access plug-in, you can control routing permissions. +- Use with @umijs/plugin-initial-state and @umijs/plugin-model to display the default user login information. -- 默认为 Ant Design 的 Layout [@ant-design/pro-layout](https://www.npmjs.com/package/@ant-design/pro-layout)，支持它全部配置项。 -- 侧边栏菜单数据根据路由中的配置自动生成。 -- 默认支持对路由的 403/404 处理和 Error Boundary。 -- 搭配 @umijs/plugin-access 插件一起使用，可以完成对路由权限的控制。 -- 搭配 @umijs/plugin-initial-state 插件和 @umijs/plugin-model 插件一起使用，可以拥有默认用户登陆信息的展示。 +> Want a dynamic menu? Check here [Advanced usage of menu](https://beta-pro.ant.design/docs/advanced-menu-cn) -## 配置 +## Configuration -### 构建时配置 +### Build-time configuration -可以通过配置文件配置 `layout` 的主题等配置。 +The theme and other configurations of `layout` can be configured through the configuration file. -```ts +```tsx import { defineConfig } from 'umi'; export const config = defineConfig({ - layout:{ - name: 'Ant Design', + layout: { + name: 'Ant Design', locale: true, - } + }, }); ``` #### name -* Type: `string` -* Default: `name` in package.json +- Type: `string` +- Default: `name` in package.json -产品名，默认值为包名。 +Product name, the default value is the package name. #### logo -* Type: `string` -* default: Ant Design Logo +- Type: `string` +- default: Ant Design Logo -产品 Logo +Product Logo #### theme -* Type: `string` -* Default: `pro` +- Type: `string` +- Default: `pro` -指定 Layout 主题，可选 `pro` 和 `tech`（`tech` 仅在蚂蚁内部框架 Bigfish 中生效）。 +Specify Layout theme, optional `pro` and `tech` (`tech` only takes effect in Ant's internal framework Bigfish). #### locale -* Type: `boolean` -* Default: `false` +- Type: `boolean` +- Default: `false` -是否开始国际化配置。开启后路由里配置的菜单名会被当作菜单名国际化的 key，插件会去 locales 文件中查找 `menu.[key]`对应的文案，默认值为改 key。该功能需要配置 `@umijs/plugin-locale` 使用。 +Whether to start international configuration. After opening, the menu name configured in the route will be used as the key for the internationalization of the menu name. The plug-in will search the locales file for the corresponding copy of `menu.[key]`, and the default value is to change the key. This function needs to be configured with `@umijs/plugin-locale`. -### 运行时配置 +### Runtime configuration -Layout 插件允许通过运行时的配置退出登陆、自定义 ErrorBoundary 等功能。 +The Layout plug-in allows to log out and customize ErrorBoundary and other functions through runtime configuration. -```js +```tsx | pure // src/app.js -export const layout = { - logout: () => {}, // do something - rightRender:(initInfo)=> { return 'hahah'; },// return string || ReactNode; +export const layout = { + // do something + logout: () => {}, + // https://procomponents.ant.design/components/layout + rightRender: (initInfo) => { + return ; + }, // return string || ReactNode; }; ``` -除了下面的插件支持的特有配置外，运行时配置支持所有的构建时配置并透传给 `@ant-design/pro-layout`。 +In addition to the specific configurations supported by the plugins below, the runtime configuration supports all build-time configurations and transmits them to `@ant-design/pro-layout`. #### logout -* Type: `() => void` -* Default: `null` +- Type: `() => void` +- Default: `null` -用于运行时配置默认 Layout 的 UI 中，点击退出登录的处理逻辑，默认不做处理。 +In the UI that is used to configure the default Layout at runtime, the processing logic of clicking to log out will not be processed by default. -> 注：默认在顶部右侧并不会显示退出按钮，需要在运行配置中配合`@umijs/plugin-intial-state`的`getInitialState`返回一个对象，才可以显示 +> Note: By default, the exit button will not be displayed on the top right side. You need to cooperate with the `getInitialState` of `@umijs/plugin-intial-state` in the running configuration to return an object before it can be displayed #### rightRender -* Type: `(initialState) => React.ReactNode` -* Default: 展示用户名、头像、退出登录相关组件 +- Type: `(initialState) => React.ReactNode` +- Default: Display user name, avatar, logout related components -`initialState` 从 `@umijs/plugin-initial-state` 插件中获取，需要搭配一起使用。 +`InitialState`is obtained from the`@umijs/plugin-initial-state` plugin and needs to be used together. #### onError -* Type: `(error: Error, info: any) => void;` +- Type: `(error: Error, info: any) => void;` -发生错误后的回调（可做一些错误日志上报，打点等）。 +Callback after an error occurs (some error logs can be reported, management, etc.). #### ErrorComponent -* Type: `(error: Error) => React.ReactElement;` -* Default: Ant Design Pro 的错误页。 +- Type: `(error: Error) => React.ReactElement;` +- Default: Error page of Ant Design Pro. -发生错误后展示的组件。 +The component displayed after the error occurred. -### 扩展的路由配置 +### Extended routing configuration -Layout 插件会基于 umi 的路由，封装了更多的配置项，支持更多配置式的能力。新增： +The Layout plugin will encapsulate more configuration items based on umi's routing, and support more configuration capabilities. Added: -- 侧边栏菜单配置。 -- 布局路由级别展示/隐藏相关配置。 -- 与权限插件结合，配置式实现权限路由的功能。 +- Sidebar menu configuration. +- Layout routing level display/hide related configuration. +- Combined with the permission plug-in, the configuration type realizes the function of permission routing. -新增如下配置项： +Add the following configuration items: - menu - layout - access -示例如下： +Examples are as follows: ```typescript //config/route.ts -export const routes: IBestAFSRoute[] = [ +export const routes: IBestAFSRoute[] = [ { path: '/welcome', component: 'IndexPage', menu: { - name: '欢迎', // 兼容此写法 + name: 'Welcome', // compatible with this writing icon: 'testicon', }, - layout:{ - hideNav: true, - }, + // more features view + // https://beta-pro.ant.design/docs/advanced-menu + // Do not show top bar + headerRender: false, + // Do not show footer + footerRender: false, + // Do not show the menu + menuRender: false, + // Do not show the menu top bar + menuHeaderRender: false, + // Permission configuration, need to be used in conjunction with plugin-access access: 'canRead', - } -] + // hide child nodes + hideChildrenInMenu: true, + // hide yourself and child nodes + hideInMenu: true, + // The child item is raised up and still displayed, + flatMenu: true, + }, +]; ``` #### name -* Type: `string` +- Type: `string` -菜单上显示的名称，没有则不显示。 +The name displayed on the menu, otherwise it will not be displayed. #### icon -* Type: `string` - -菜单上显示的 Icon。 - -#### menu - -* Type: `false` | `IRouteMenuConfig` -* Default: `false` - -SideMenu 相关配置。默认为 false，表示在菜单中隐藏此项包括子项。 - -menu 的可配置项包括： - -1. name - -* Type: `string` -当前菜单名，无默认值，必选，不填则表示不展示。 - -2. icon - -* Type: `string` -当前菜单的左侧 icon，可选 antd 的 icon name 和 url，可选。 - -> icon name 为 组件名小写后去掉 `outlined` 或者 `filled` 或者 `twotone`，所得值。举例：`` 的 icon name 即： `user`。 - -3. hideChildren - -* Type: `boolean` -在菜单中隐藏他的子项，只展示自己。 - -4. flatMenu - -* Type: `boolean` -默认为false 在菜单中只隐藏此项，子项往上提，仍旧展示。 - - -#### layout - -* Type: false | IRouteLayoutConfig -* Default: false - -Layout 相关配置。 默认为 false， 默认展示选择的 layout 主题。 - -layout 的可配置项包括： - -1. hideMenu - -* Type: `boolean` -* Default: `false` +- Type: `string` -当前路由隐藏左侧菜单，默认不隐藏。 +The Icon displayed on the menu. -2. hideNav +> The icon name is the lower case of the component name and then remove the `outlined`or`filled`or`twotone`to obtain the value. Example: The icon name of``is: `user`. -* Type: `boolean` -* Default: `false` +#### flatMenu -当前路由隐藏导航头，默认不隐藏。 +- Type: `boolean` The default is false. Only this item is hidden in the menu, and the sub-items are raised up and still displayed. +- Default: `false` #### access -* Type: `string` +- Type: `string` -当 Layout 插件配合 `@umijs/plugin-access` 插件使用时生效。 +It takes effect when the Layout plugin is used in conjunction with the `@umijs/plugin-access` plugin. -权限插件会将用户在这里配置的 access 字符串与当前用户所有权限做匹配，如果找到相同的项，并当该权限的值为 false，则当用户访问该路由时，默认展示 403 页面。 +The permission plugin will match the access string configured by the user here with all the permissions of the current user. If the same item is found and the value of the permission is false, the 403 page will be displayed by default when the user accesses the route. diff --git a/docs/plugins/plugin-layout.zh-CN.md b/docs/plugins/plugin-layout.zh-CN.md index c50c37510dd0..4d7887a1d937 100644 --- a/docs/plugins/plugin-layout.zh-CN.md +++ b/docs/plugins/plugin-layout.zh-CN.md @@ -1,4 +1,3 @@ - # @umijs/plugin-layout ## 启用方式 @@ -15,48 +14,50 @@ - 搭配 @umijs/plugin-access 插件一起使用，可以完成对路由权限的控制。 - 搭配 @umijs/plugin-initial-state 插件和 @umijs/plugin-model 插件一起使用，可以拥有默认用户登陆信息的展示。 +> 想要动态菜单？查看这里 [菜单的高级用法](https://beta-pro.ant.design/docs/advanced-menu-cn) + ## 配置 ### 构建时配置 可以通过配置文件配置 `layout` 的主题等配置。 -```ts +```tsx import { defineConfig } from 'umi'; export const config = defineConfig({ - layout:{ - name: 'Ant Design', + layout: { + name: 'Ant Design', locale: true, - } + }, }); ``` #### name -* Type: `string` -* Default: `name` in package.json +- Type: `string` +- Default: `name` in package.json 产品名，默认值为包名。 #### logo -* Type: `string` -* default: Ant Design Logo +- Type: `string` +- default: Ant Design Logo 产品 Logo #### theme -* Type: `string` -* Default: `pro` +- Type: `string` +- Default: `pro` 指定 Layout 主题，可选 `pro` 和 `tech`（`tech` 仅在蚂蚁内部框架 Bigfish 中生效）。 #### locale -* Type: `boolean` -* Default: `false` +- Type: `boolean` +- Default: `false` 是否开始国际化配置。开启后路由里配置的菜单名会被当作菜单名国际化的 key，插件会去 locales 文件中查找 `menu.[key]`对应的文案，默认值为改 key。该功能需要配置 `@umijs/plugin-locale` 使用。 @@ -64,11 +65,15 @@ export const config = defineConfig({ Layout 插件允许通过运行时的配置退出登陆、自定义 ErrorBoundary 等功能。 -```js +```tsx | pure // src/app.js -export const layout = { - logout: () => {}, // do something - rightRender:(initInfo)=> { return 'hahah'; },// return string || ReactNode; +export const layout = { + // do something + logout: () => {}, + // https://procomponents.ant.design/components/layout + rightRender: (initInfo) => { + return ; + }, // return string || ReactNode; }; ``` @@ -76,8 +81,8 @@ export const layout = { #### logout -* Type: `() => void` -* Default: `null` +- Type: `() => void` +- Default: `null` 用于运行时配置默认 Layout 的 UI 中，点击退出登录的处理逻辑，默认不做处理。 @@ -85,21 +90,21 @@ export const layout = { #### rightRender -* Type: `(initialState) => React.ReactNode` -* Default: 展示用户名、头像、退出登录相关组件 +- Type: `(initialState) => React.ReactNode` +- Default: 展示用户名、头像、退出登录相关组件 `initialState` 从 `@umijs/plugin-initial-state` 插件中获取，需要搭配一起使用。 #### onError -* Type: `(error: Error, info: any) => void;` +- Type: `(error: Error, info: any) => void;` 发生错误后的回调（可做一些错误日志上报，打点等）。 #### ErrorComponent -* Type: `(error: Error) => React.ReactElement;` -* Default: Ant Design Pro 的错误页。 +- Type: `(error: Error) => React.ReactElement;` +- Default: Ant Design Pro 的错误页。 发生错误后展示的组件。 @@ -121,7 +126,7 @@ Layout 插件会基于 umi 的路由，封装了更多的配置项，支持更 ```typescript //config/route.ts -export const routes: IBestAFSRoute[] = [ +export const routes: IBestAFSRoute[] = [ { path: '/welcome', component: 'IndexPage', @@ -129,84 +134,50 @@ export const routes: IBestAFSRoute[] = [ name: '欢迎', // 兼容此写法 icon: 'testicon', }, - layout:{ - hideNav: true, - }, + // 更多功能查看 + // https://beta-pro.ant.design/docs/advanced-menu + // 不展示顶栏 + headerRender: false, + // 不展示页脚 + footerRender: false, + // 不展示菜单 + menuRender: false, + // 不展示菜单顶栏 + menuHeaderRender: false, + // 权限配置，需要与 plugin-access 插件配合使用 access: 'canRead', - } -] + // 隐藏子节点 + hideChildrenInMenu: true, + // 隐藏自己和子节点 + hideInMenu: true, + // 子项往上提，仍旧展示, + flatMenu: true, + }, +]; ``` #### name -* Type: `string` +- Type: `string` 菜单上显示的名称，没有则不显示。 #### icon -* Type: `string` +- Type: `string` 菜单上显示的 Icon。 -#### menu - -* Type: `false` | `IRouteMenuConfig` -* Default: `false` - -SideMenu 相关配置。默认为 false，表示在菜单中隐藏此项包括子项。 - -menu 的可配置项包括： - -1. name - -* Type: `string` -当前菜单名，无默认值，必选，不填则表示不展示。 - -2. icon - -* Type: `string` -当前菜单的左侧 icon，可选 antd 的 icon name 和 url，可选。 - > icon name 为 组件名小写后去掉 `outlined` 或者 `filled` 或者 `twotone`，所得值。举例：`` 的 icon name 即： `user`。 -3. hideChildren - -* Type: `boolean` -在菜单中隐藏他的子项，只展示自己。 - -4. flatMenu - -* Type: `boolean` -默认为false 在菜单中只隐藏此项，子项往上提，仍旧展示。 - - -#### layout - -* Type: false | IRouteLayoutConfig -* Default: false - -Layout 相关配置。 默认为 false， 默认展示选择的 layout 主题。 - -layout 的可配置项包括： - -1. hideMenu - -* Type: `boolean` -* Default: `false` - -当前路由隐藏左侧菜单，默认不隐藏。 - -2. hideNav - -* Type: `boolean` -* Default: `false` +#### flatMenu -当前路由隐藏导航头，默认不隐藏。 +- Type: `boolean` 默认为 false 在菜单中只隐藏此项，子项往上提，仍旧展示。 +- Default: `false` #### access -* Type: `string` +- Type: `string` 当 Layout 插件配合 `@umijs/plugin-access` 插件使用时生效。 diff --git a/docs/plugins/plugin-locale.md b/docs/plugins/plugin-locale.md index 6c8f615dbe7a..cb378e601a87 100644 --- a/docs/plugins/plugin-locale.md +++ b/docs/plugins/plugin-locale.md @@ -1,40 +1,35 @@ ---- -translateHelp: true ---- - # @umijs/plugin-locale +Internationalization plug-in, used to solve i18n problem. -国际化插件，用于解决 i18n 问题。 - -## 启用方式 +## How to enable -配置 `locale` 开启。 +Configure `locale` to enable. -## 介绍 +## Introduction -包含以下功能， +Contains the following functions, -### 约定式多语言支持 +### Conventional multi-language support -比如以下目录，项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换： +For example, in the following directory, the project has the internationalized language switch between `zh-CN` and `en-US`: ```bash + src + locales - - zh-CN.ts - - en-US.ts + -zh-CN.ts + -en-US.ts + pages ``` -多语言文件的命名规范：`<分割符（通过 baseSeparator 配置）>.js` +Naming convention for multi-language files: `.js` -多语言文件的内容规范：键-值组成的字面量，如下： +The content specification of multilingual files: key-value literal, as follows: ```javascript // src/locales/zh-CN.js export default { - WELCOME_TO_UMI_WORLD: '{name}，欢迎光临umi的世界', + WELCOME_TO_UMI_WORLD: '{name}, welcome to the world of umi', }; ``` @@ -45,29 +40,29 @@ export default { }; ``` -> 如果项目配置了 `singular: true` ，`locales` 要改成 `locale` +> If the project is configured with `singular: true`, `locales` should be changed to `locale` ### import from umi -@umijs/plugin-locale 基于 react-intl 封装，支持其所有的 api，详情可以看 [这里](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/api.md)。为了方便使用我们也添加了一些其他的功能，这里将会列举所有的 api，并且展示它的功能。 +@umijs/plugin-locale is based on the react-intl package and supports all its apis. For details, please see [here](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/api.md). In order to facilitate the use, we also added some other functions, here will list all the api, and show its functions. ### addLocale -动态的增加语言，增加语言之后可以通过 [getAllLocales](#getAllLocales) 获得列表。addLocale 三个参数。 +Add languages ​​dynamically. After adding languages, you can get the list through [getAllLocales](#getAllLocales). Three parameters of addLocale. -- `name` 语言的 key。例如 zh-TW -- `message` 语言的 id 列表。 例如：{ // id 列表 name: '妳好，{name}', } -- 相应的 `momentLocale` 和 `antd` 配置 +- The key of the `name` language. E.g. zh-TW +- The id list of `message` language. For example:`{ name:'Hello, {name}',}` +- Corresponding `momentLocale` and `antd` configuration ```tsx import zhTW from 'antd/es/locale/zh_TW'; -// 动态增加新语言 +// Dynamically add new languages addLocale( 'zh-TW', { - // id 列表 - name: '妳好，{name}', + // id list + name: 'Hello, {name}', }, { momentLocale: 'zh-tw', @@ -78,7 +73,7 @@ addLocale( ### getAllLocales -获取当前获得所有国际化文件的列表，默认会在 `locales` 文件夹下寻找类似 `en-US.(js|json|ts)` 文件。 +Get a list of all internationalized files currently obtained. By default, it will look for files similar to `en-US.(js|json|ts)` in the `locales` folder. ```tsx import { getAllLocales } from 'umi'; @@ -88,7 +83,7 @@ console.log(getAllLocales()); // [en-US,zh-CN,...] ### getLocale -`getLocale` 将获得当前选择的语言。 +`getLocale` will get the currently selected language. ```tsx import { getLocale } from 'umi'; @@ -98,7 +93,7 @@ console.log(getLocale()); // en-US | zh-CN ### useIntl -`useIntl` 是最常用的 api,它可以获得 `formatMessage` 等 api 来进行具体的值绑定。 +`UseIntl` is the most commonly used api, and it can obtain apis such as `formatMessage` for specific value binding. ```ts // en-US.json @@ -113,17 +108,17 @@ export default { import React, { useState } from 'react'; import { useIntl } from 'umi'; -export default function() { +export default function () { const intl = useIntl(); return ( @@ -133,29 +128,29 @@ export default function() { ### setLocale -设置切换语言，默认会刷新页面，可以通过设置第二个参数为 `false` ，来实现无刷新动态切换。 +Set the switching language, the page will be refreshed by default. You can achieve dynamic switching without refresh by setting the second parameter to `false`. ```tsx import { setLocale } from 'umi'; -// 刷新页面 +// refresh page setLocale('zh-TW', true); -// 不刷新页面 +// Do not refresh the page setLocale('zh-TW', false); ``` -![](https://user-images.githubusercontent.com/13595509/75084981-4e2c4680-555f-11ea-9ae2-4e6f953adcdc.gif) +![png](https://user-images.githubusercontent.com/13595509/75084981-4e2c4680-555f-11ea-9ae2-4e6f953adcdc.gif) -## 配置 +## Configuration -* Type: `object` +- Type: `object` -目录约定： +Directory convention: -### 构建时配置 +### Build-time configuration -开启 `locale: {}` 后，默认是如下配置： +After enabling `locale: {}`, the default configuration is as follows: ```js export default { @@ -165,61 +160,60 @@ export default { title: false, baseNavigator: true, baseSeparator: '-', - } -} + }, +}; ``` #### baseSeparator -* Type: `string` -* Default: `-` +- Type: `string` +- Default: `-` -国家（lang） 与 语言（language） 之间的分割符。 +The separator between country (lang) and language (language). -默认情况下为 `-`，返回的语言及目录文件为 `zh-CN`、`en-US`、`sk` 等。 +By default, it is `-`, and the returned language and catalog files are `zh-CN`, `en-US`,`sk`, etc. #### default -* Type: `string` -* Default: `zh-CN` +- Type: `string` -Default: `zh-CN` -默认语言，当检测不到具体语言时，展示 `default` 中指定的语言。 +Default language, when no specific language is detected, the language specified in `default` is displayed. -> 若 `baseNavigator` 指定为 `_`，`default` 默认为 `zh_CN`。 +> If `baseNavigator` is specified as `_`, `default` defaults to `zh_CN`. #### antd -* Type: `boolean` -* Default: false +- Type: `boolean` +- Default: false -开启后，支持 [antd 国际化](https://ant.design/docs/react/i18n-cn)。 +After opening, support [antd internationalization](https://ant.design/docs/react/i18n-cn). #### title -* Type: `boolean` -* Default: false +- Type: `boolean` +- Default: false -标题国际化。 +Title internationalization. -在项目中配置的 `title` 及路由中的 `title` 可直接使用国际化 key，自动被转成对应语言的文案，例如： +The `title` configured in the project and the `title` in the route can directly use the internationalization key and automatically be converted into the corresponding language copy, for example: -`locales` 目录下有： +Under the `locales` directory: ```js // src/locales/zh-CN.js export default { - 'site.title': '站点 - 标题', - 'about.title': '关于 - 标题', -} + 'site.title': 'Site-Title', + 'about.title': 'About-Title', +}; // src/locales/en-US.js export default { 'site.title': 'English Title', - 'about.title': 'About - Title', -} + 'about.title': 'About-Title', +}; ``` -项目配置如下： +The project configuration is as follows: ```js // .umirc.js @@ -234,32 +228,32 @@ export default { path: '/about', component: 'About', title: 'about.title', - } - ] -} + }, + ], +}; ``` -访问页面时： +When visiting the page: -- `/` 路由，标题在中文时为 `站点 - 标题`，英文时为 `English Title` -- `/about` 路由，标题在中文时为 `关于 - 标题`，英文时为 `About Title` +- `/` route, title is `site-title` in Chinese, `English Title` in English +- `/about` route, the title is `About-Title` in Chinese, and `About Title` in English #### baseNavigator -* Type: `boolean` -* Default: true +- Type: `boolean` +- Default: true -开启浏览器语言检测。 +Turn on browser language detection. -默认情况下，当前语言环境的识别按照：`localStorage` 中 `umi_locale` 值 > 浏览器检测 > [default](#default) 设置的默认语言 > 中文 +By default, the current locale is recognized as follows: `umi_locale`value in`localStorage`> browser detection> default language set by [default](#default)> Chinese -### 运行时配置 +### Runtime configuration -支持运行时对国际化做一些扩展与定制，例如自定义语言识别等。 +Support some extensions and customizations to internationalization at runtime, such as custom language recognition. #### getLocale -自定义语言获取逻辑，比如识别链接 `?locale=${lang}` 当做当前页面的语言。 +Customize language acquisition logic, such as identifying the link `?locale=${lang}` as the language of the current page. ```js // src/app.js @@ -271,18 +265,18 @@ export const locale = { const { locale = 'zh-CN' } = qs.parse(search, { ignoreQueryPrefix: true }); return locale; }, -} +}; ``` #### setLocale -自定义语言切换逻辑。其中有三个参数： +Custom language switching logic. There are three parameters: -- lang: 需要切换的语言 -- realReload: 是否需要刷新页面，这个是由页面调用 `setLocale(lang, true)` 透传。 -- updater：是否需要强制更新当前组件国际化状态。 +- lang: The language to be switched +- realReload: Whether the page needs to be refreshed, this is transparently transmitted by the page calling `setLocale(lang, true)`. +- updater: Whether it is necessary to forcibly update the internationalization status of the current component. -比如根据要切换的语言，跳转到相应 url： +For example, according to the language to be switched, jump to the corresponding url: ```js // src/app.js @@ -290,12 +284,12 @@ export const locale = { setLocale({ lang, realReload, updater }) { history.push(`/?locale=${lang}`); updater(); - } -} + }, +}; ``` ## FAQ -### 为什么不要直接使用 formatMessage 这个语法糖？ +### Why not just use formatMessage as a syntactic sugar? -虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 [`useIntl`](#useIntl) 或者 [`injectIntl`](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/api.md#injectintl-hoc)，可以实现同样的功能。 +Although formatMessage is very convenient to use, it is out of the life cycle of react. The most serious problem is that it cannot trigger dom to re-render when switching languages. In order to solve this problem, we refresh the browser when switching languages. The user experience is very poor, so we recommend you to use [`useIntl`](#useIntl) or [`injectIntl`](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/api.md#injectintl-hoc), can achieve the same function. diff --git a/docs/plugins/plugin-locale.zh-CN.md b/docs/plugins/plugin-locale.zh-CN.md index 1bfe8db8a22e..1206ee82406b 100644 --- a/docs/plugins/plugin-locale.zh-CN.md +++ b/docs/plugins/plugin-locale.zh-CN.md @@ -108,7 +108,7 @@ export default { import React, { useState } from 'react'; import { useIntl } from 'umi'; -export default function() { +export default function () { const intl = useIntl(); return (