Tweak site (#440)

* style: optimize site style * test: fix eslint * update bigfish url * Add FAQ link of umi * document about proxy config close ant-design/ant-design-pro#7015 * Rename antd-4.0.en-Us.md to antd-4.0.en-US.md * update prolayout url * move layout-component into layout * fix document order
ant-design · Jul 16, 2020 · 6a4e83c · 6a4e83c
1 parent fb5e927
commit 6a4e83c
Show file tree

Hide file tree

Showing 23 changed files with 353 additions and 374 deletions.
diff --git a/blog/antd-4.0.en-Us.md → blog/antd-4.0.en-US.md b/blog/antd-4.0.en-Us.md → blog/antd-4.0.en-US.md
diff --git a/docs/block.en-US.md b/docs/block.en-US.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 14
 title: Block
 type: Development
 ---

diff --git a/docs/block.zh-CN.md b/docs/block.zh-CN.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 14
 title: 区块
 type: 开发
 ---

diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md
@@ -6,6 +6,8 @@ type: Introduction
 
 Before you ask a question, please check the following FAQ.
 
+Ant Design Pro is developed upon [Umi](https://umijs.org/), please seach in Umi [FAQ](https://github.com/umijs/umi/issues/1421) first.
+
 ### What is the difference between Ant Design React and Ant Design Pro?
 
 It can be understood that Ant Design React is a set of React component libraries, and Pro is a complete front-end scaffolding using this set of component libraries.

diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md
@@ -6,6 +6,8 @@ type: 入门
 
 提问之前，请先查阅下面的常见问题。
 
+Ant Design Pro 使用 [Umi](https://umijs.org/) 作为开发工具，建议你先查看 Umi 的[常见问题](https://github.com/umijs/umi/issues/1421)。
+
 ### Ant Design React 和 Ant Design Pro 有什么区别？
 
 可以理解为 Ant Design React 是一套 React 组件库，而 Pro 是使用了这套组件库的完整前端脚手架。

diff --git a/docs/getting-start-inner.en-US.md b/docs/getting-start-inner.en-US.md
@@ -6,7 +6,7 @@ type: Introduction
 
 ## Usage
 
-For Ant Financial Company User, [Bigfish](https://bigfish.alipay.com) is recommended as a front end overall solution, you can visit [Using Ant Design Pro](https://bigfish.alipay.com/doc/antdpro) to get start.
+For Ant Financial Company User, [Bigfish](https://bigfish.alipay.com) is recommended as a front end overall solution, you can visit [Getting Started](https://bigfish.antfin-inc.com/doc/getting-started) to get start.
 
 ## Note
 

diff --git a/docs/getting-start-inner.zh-CN.md b/docs/getting-start-inner.zh-CN.md
@@ -6,7 +6,7 @@ type: 入门
 
 ## 使用
 
-在蚂蚁金服内部，推荐使用 [Bigfish](https://bigfish.alipay.com) 作为前端整体解决方案。你可以直接访问 [使用 Ant Design Pro](https://bigfish.alipay.com/doc/antdpro) 开始使用。
+在蚂蚁金服内部，推荐使用 [Bigfish](https://bigfish.alipay.com) 作为前端整体解决方案。你可以直接访问 [快速上手](https://bigfish.antfin-inc.com/doc/getting-started) 开始使用。
 
 ## 注意
 

diff --git a/docs/layout-component.en-US.md b/docs/layout-component.en-US.md
diff --git a/docs/layout-component.zh-CN.md b/docs/layout-component.zh-CN.md
diff --git a/docs/layout.en-US.md b/docs/layout.en-US.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 1
 title: Layout
 type: Development
 ---
@@ -72,24 +72,106 @@ We extend some configuration for Ant Design Pro's nav menu and authority.
 - `hideInBreadcrumb`: whether hide itself in breadcrumb, default `false`.
 - `authority`: authority key, see more in [Authority Management](/docs/authority-management)。
 
-## Ant Design Components for layout
+[Layout](https://prolayout.ant.design) The component is a new component in Pro v4. Unlike the normal components, it is very heavy and integrates menus. Layout, header, breadcrumbs, set drawers and more.
+
+## Ant Design Pro Layout
+
+[ProLayout](https://prolayout.ant.design/) is a highly integrated React Component of Ant Design Pro. Looks this interface below:
+
+![](https://gw.alipayobjects.com/zos/antfincdn/qsgVmsWOrR/C8C775E0-6429-4B73-8CFD-F312ACCE9905.png)
+
+For title and logo, Layout provides the `title` and `logo` properties. If you have more customization requirements, you can try the `menuHeaderRender: (logo,title)=>ReactNode` property, `onMenuHeaderClick` allows you Override the default click event.
+
+```tsx
+<BasicLayout
+  {...defaultProps}
+  title="Remax"
+  logo="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*1NHAQYduQiQAAAAAAAAAAABkARQnAQ"
+  menuHeaderRender={(logo, title) => (
+    <div
+      id="customize_menu_header"
+      onClick={() => {
+        window.open('https://remaxjs.org/');
+      }}
+    >
+      {logo}
+      {title}
+    </div>
+  )}
+/>
+```
+
+If you need a custom menu, the `siderWidth` property controls the width of the menu on the right, and `menuRender` and `menuItemRender` let you customize the entire menu. `menuDataRender` can be used to customize menu data, which you can replace with data obtained from the server.
+
+```tsx
+<BasicLayout
+  menuDataRender={() => [
+    {
+      Path: '/',
+      Name: 'welcome',
+      Icon: 'smile',
+      Children: [
+        {
+          Path: '/welcome',
+          Name: 'one',
+          Children: [
+            {
+              Path: '/welcome/welcome',
+              Name: 'two',
+              Icon: 'smile',
+              Exact: true,
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+  menuItemRender={(menuItemProps, defaultDom) =>
+    menuItemProps.isUrl ? defaultDom : <a>open {defaultDom}</a>
+  }
+>
+    Hello World
+</BasicLayout>
+```
+
+## PageHeaderWrapper
 
-Ant Design currently provides two components for layout: [Layout](http://ant.design/components/layout/) and [Grid](http://ant.design/components/grid/).
+PageHeaderWrapper encapsulates the PageHeader component of ant design, adds tabList, and content. Fill in the title and breadcrumb based on the current route. It depends on the route property of the Layout. Of course you can pass in parameters to override the default values. PageHeaderWrapper supports all the attributes of [Tabs](https://ant.design/components/tabs-cn/) and [PageHeader](https://ant.design/components/page-header-cn/).
 
-## Grid Component
+> PageHeaderWrapper must be wrapped by ProLayout to automatically generate breadcrumbs and titles.
 
-Grid layout is widely used, one of its major benefits is responsiveness.
+## SettingDrawer
 
-Grid Component provided by Ant Design is tremendously powerful. you can set span, responsive columns, and optional `flex` layout. It covers a majority of use-cases: See [Grid](http://ant.design/components/grid/) for details.
+> Because SettingDrawer is too flexible and cooperates with [umi-plugin-antd-theme](https://github.com/chenshuai2144/umi-plugin-antd-theme) has serious performance problems. Therefore, we do not recommend using SettingDrawer in a formal environment. You need to use human flesh for dating and add it via `fetch: blocks`.
 
-## Layout Component
+SettingDrawer provides a graphical interface to set the layout configuration, which is convenient to show all the capabilities of Layout in the presentation environment.
 
-If you need more structured layout components, then [Layout](http://ant.design/components/layout/) is your best option. You only need to fill in the blanks to build professional layout. See [Layout](http://ant.design/components/layout/) for details.
+![](https://gw.alipayobjects.com/zos/antfincdn/iITLeL7TVb/6ED60335-2A24-4C13-91CE-FD782FB2D219.png)
 
-## Building layout components for specific use cases.
+[Setting the theme color](/docs/dynamic-theme) of the settingDrawer needs to be used with [umi-plugin-antd-theme](https://github.com/chenshuai2144/umi-plugin-antd-theme), otherwise the theme color configuration will not be displayed.
 
-Under most cases, we will build more specific components from the above ones, that includes navigation, sidebar, notification, titles etc., An example would be [BasicLayout](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/src/layouts/BasicLayout.tsx) from Ant Design Pro.
+## Nested Layout
 
-We put layout components inside `layouts`, parrallel to `pages` and `components`. It is worth noting that layout components has no fundamental difference from other components, just that it deals with layout.
+At some point it may be necessary to nest the layout, and Pro-Layout provides enough apis to support nesting.
+
+![](https://gw.alipayobjects.com/zos/antfincdn/F6Rhw6KYUt/C253E5E1-2790-4224-9D7F-C24F39AEF398.png)
+
+The code is configured as follows:
+
+```tsx
+<ProLayout
+  Layout="topmenu"
+  className="chenshuai2144"
+  disableMobile
+  rightContentRender={(rightProps) => <RightContent {...rightProps} {...settings} />}
+  contentStyle={{ margin: 0 }}
+>
+    {' '}
+  <ProLayout navTheme="light" menuHeaderRender={false} {...props} {...settings}>
+         <PageHeaderWrapper content="Welcome to your use">{props.children}</PageHeaderWrapper>
+      {' '}
+  </ProLayout>
+</ProLayout>
+```
 
-> Beside components provided by Ant Design React, you could try layout components from [communication recommendation](https://ant.design/docs/react/recommendation-cn).
+> Here you need disableMobile to disable the phone menu, otherwise it will behave abnormally under the phone.