📝 Add documentation for Add Layout.

docs/_sidebar.md

@@ -4,6 +4,7 @@
   - [Configuration](configuration.md)
   - [API Configuration](API-configuration.md)
   - [I18n](i18n.md)
+  - [Layout](layout.md)
   - [Request](request.md)
 - Guide
   - [Deploy](deploy.md)

docs/configuration.md

@@ -39,7 +39,7 @@ You can do some custom configuration in `/src/utils/config.js`:
   Configuration? Which routes use which layout, unspecified route uses the default layout `Public`, the project currently has `Primary` and `Public` layouts,
      The default configuration is as follows：
   
-    ```js
+    ```javascript
         layouts: [
             {
                 name: 'primary',
@@ -57,7 +57,7 @@ You can do some custom configuration in `/src/utils/config.js`:
   
     - `exlude` - Specifies a list of routing rules that do not use this layout, which can be a regular expression or a string.
   
- > Note: `exlude` takes precedence over `include`, and the layout behind it has a higher priority than the previous layout. The development process may need to be combined with the layout in the `src/layouts` directory. For details, see [Using Layout]().
+ > Note: `exlude` takes precedence over `include`, and the layout previous it has a higher priority than the behind layout. The development process may need to be combined with the layout in the `src/layouts` directory. For details, see [Using Layout](./layout.md).
 
 ## i18n
 
@@ -65,7 +65,7 @@ You can do some custom configuration in `/src/utils/config.js`:
 
   Configure internationalization, the default configuration is as follows:
 
-  ```js
+  ```javascript
   i18n: {
       languages: [
         {

docs/layout.md

@@ -0,0 +1,60 @@
+# Layout
+
+## Add a new layout
+
+Take a new layout named `secondary` as an example to make the route starting with `seconday` use this layout.
+
+1. Add related configuration in `src/utils/config.js`. For details, please refer to [layouts](/configuration?id=layouts).
+
+   ```javascript
+   layouts: [
+           {
+               name: 'primary',
+               include: [/.*/],
+               exlude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
+           },
+           {
+               name: 'secondary',
+               include: [/(\/(en|zh))*\/seconday\/(.*)/],
+           },
+   ],
+   ```
+
+2. Add the `secondary` layout component to the `src/layouts/BaseLayout.js` file.
+
+   ```javascript
+   import SecondaryLayout from './SecondaryLayout'
+
+   const LayoutMap = {
+     Primary: PrimaryLayout,
+     Public: PublicLayout,
+     Secondary: SecondaryLayout,
+   }
+   ```
+
+3. Add the `SecondaryLayout.js` file to the `src/layouts/` directory.
+
+   ```javascript
+   import React from 'react'
+
+   export default ({ children }) => {
+     Return (
+       <div>
+         <h1>Seconday</h1>
+         {children}
+       </div>
+     )
+   }
+   ```
+
+4. Add a `seconday/index.js` file to the `src/pages/` directory.
+
+   ```javascript
+   import React from 'react'
+
+   export default ({ children }) => {
+     Return <div>Seconday page Content</div>
+   }
+   ```
+
+5. Finally, start the development mode `npm run start`, open [http://localhost:7000/seconday/](http://localhost:7000/seconday/) and you will see the page for the `seconday` layout.

docs/zh-cn/_sidebar.md

@@ -4,6 +4,7 @@
   - [配置项](zh-cn/configuration.md)
   - [接口配置](zh-cn/API-configuration.md)
   - [国际化](zh-cn/i18n.md)
+  - [布局](zh-cn/layout.md)
   - [http 请求](zh-cn/request.md)
 - 指南
   - [部署](zh-cn/deploy.md)

docs/zh-cn/configuration.md

@@ -39,7 +39,7 @@
     配置哪些路由使用哪种布局，未指定路由使用默认布局 `Public`，项目中目前有 `Primary` 和 `Public` 两种布局，
     默认配置如下：
   
-    ```js
+    ```javascript
         layouts: [
             {
                 name: 'primary',
@@ -57,7 +57,7 @@
   
     - `exlude` - 指定不使用该布局的路由规则列表，规则可为正则表达式或者字符串。
   
- > 注意：`exlude` 优先级高于 `include`，后面的布局优先级高于前面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局]()。
+ > 注意：`exlude` 优先级高于 `include`，前面的布局优先级高于后面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局](./layout.md)。
 
 ## i18n
 
@@ -65,7 +65,7 @@
 
   配置国际化，默认配置如下：
 
-  ```js
+  ```javascript
   i18n: {
       languages: [
         {

docs/zh-cn/layout.md

@@ -0,0 +1,60 @@
+# 布局
+
+## 新增布局
+
+以新增名为 `secondary` 的布局为例，使以 `seconday` 开头的路由都使用该布局。
+
+1. 在 `src/utils/config.js` 新增相关配置，参数详细请查看 [layouts](/zh-cn/configuration?id=layouts)。
+
+   ```javascript
+   layouts: [
+           {
+               name: 'primary',
+               include: [/.*/],
+               exlude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
+           },
+           {
+               name: 'secondary',
+               include: [/(\/(en|zh))*\/seconday\/(.*)/],
+           },
+   ],
+   ```
+
+2. 在`src/layouts/BaseLayout.js` 文件中新增 `secondary` 布局组件。
+
+   ```javascript
+   import SecondaryLayout from './SecondaryLayout'
+
+   const LayoutMap = {
+     primary: PrimaryLayout,
+     public: PublicLayout,
+     secondary: SecondaryLayout,
+   }
+   ```
+
+3. 在`src/layouts/` 目录中新增 `SecondaryLayout.js` 文件。
+
+   ```javascript
+   import React from 'react'
+
+   export default ({ children }) => {
+     return (
+       <div>
+         <h1>Seconday</h1>
+         {children}
+       </div>
+     )
+   }
+   ```
+
+4. 在`src/pages/` 目录中新增 `seconday/index.js` 文件。
+
+   ```javascript
+   import React from 'react'
+
+   export default ({ children }) => {
+     return <div>Seconday page Content</div>
+   }
+   ```
+
+5. 最后，启动开发模式 `npm run start`，打开 [http://localhost:7000/seconday/](http://localhost:7000/seconday/)，你将看到 `seconday` 布局的页面。