diff --git a/demo/documentation/components/layout/enUS/absolute.md b/demo/documentation/components/layout/enUS/absolute.md
index e9b3df69d..ef6447ae4 100644
--- a/demo/documentation/components/layout/enUS/absolute.md
+++ b/demo/documentation/components/layout/enUS/absolute.md
@@ -1,7 +1,7 @@
 # Absolute
-All layout components can use absolute positioning. It can be used when you want content scrolling inside a box.
+All layout components can use absolute positioning. It can be used when you want content scrolling inside fixed area.
 
-<n-alert title="Caveat" type="warning">If you have set mode=`'absolute'` on sider and want the sider and its adjacent layout display in right manner, you should apply mode=`'absolute'` on layout too.</n-alert>
+<n-alert title="Caveat" type="warning">If you have set mode=`'absolute'` on sider and want the sider and its adjacent layout or layout-content to display in right manner, you should apply mode=`'absolute'` on layout or layout-content too.</n-alert>
 ```html
 <div style="width: 100%; height: 240px; position: relative">
   <n-layout mode="absolute">
diff --git a/demo/documentation/components/layout/enUS/index.md b/demo/documentation/components/layout/enUS/index.md
index 2b5589c33..53d1262fa 100644
--- a/demo/documentation/components/layout/enUS/index.md
+++ b/demo/documentation/components/layout/enUS/index.md
@@ -10,37 +10,36 @@ scrollbar
 collapse
 trigger-button
 show-sider-content
-debug
 ```
 ## Props
 ### Layout, Layout Content Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|use-native-scrollbar|`boolean`|`true`|If set to `false`, layout will use a naive-ui style scrollbar for content|
-|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it work as you expect.|
+|use-native-scrollbar|`boolean`|`true`|Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content|
+|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.|
 
 ### Layout Footer
 |Name|Type|Default|Description|
 |-|-|-|-|
 |bordered|`boolean`|`false`||
-|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it work as you expect.|
+|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.|
 
 ### Layout Header Props
 |Name|Type|Default|Description|
 |-|-|-|-|
 |bordered|`boolean`|`false`||
-|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it work as you expect.|
+|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to ma ke as you expect.|
 
 ### Layout Sider Props
 |Name|Type|Default|Description|
 |-|-|-|-|
 |bordered|`boolean`|`false`||
-|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it work as you expect.**Make sure its adjacent n-layout or n-layout-content mode set to `'absolute'` when its mode is `'absolute'`.**|
+|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect.**Make sure its adjacent n-layout or n-layout-content mode set to `'absolute'` when its mode is `'absolute'`.**|
 |collapsed-width|`number`|`48`||
 |width|`number`|`272`||
-|collapse-mode|`'transform' \| 'width'`|`'transform'`|If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. `'transform'` collapse mode is designed to work with `'absolute'` mode.|
+|collapse-mode|`'transform' \| 'width'`|`'transform'`|If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. `'transform'` collapse mode only work with sider in `'absolute'` mode.|
 |collapsed|`boolean`|`false`||
-|use-native-scrollbar|`boolean`|`true`|If set to `false`, layout will use a naive-ui style scrollbar for content.|
+|use-native-scrollbar|`boolean`|`true`|Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content|
 |show-content|`boolean`|`true`|If set to `false`, sider content will be invisible.|
 |show-trigger|`boolean`|`false`|Whether to show the built-in trigger button on sider.|
 
diff --git a/demo/documentation/components/layout/enUS/showSiderContent.md b/demo/documentation/components/layout/enUS/showSiderContent.md
index 0d01ef98a..74544bcf7 100644
--- a/demo/documentation/components/layout/enUS/showSiderContent.md
+++ b/demo/documentation/components/layout/enUS/showSiderContent.md
@@ -1,4 +1,5 @@
 # Hide Sider Content
+Sometimes you don't want to see content inside sider after it's collapsed.
 ```html
 <n-switch v-model="collapsed" />
 <n-layout style="height: 240px;">
diff --git a/demo/documentation/components/layout/enUS/triggerButton.md b/demo/documentation/components/layout/enUS/triggerButton.md
index 6d65e2613..ae55e2a89 100644
--- a/demo/documentation/components/layout/enUS/triggerButton.md
+++ b/demo/documentation/components/layout/enUS/triggerButton.md
@@ -1,4 +1,5 @@
 # Trigger Button
+A trigger button, for free.
 ```html
 <n-switch v-model="collapsed" />
 <n-layout style="height: 240px;">
diff --git a/demo/documentation/components/layout/zhCN/absolute.md b/demo/documentation/components/layout/zhCN/absolute.md
index 2310d528c..cdb581393 100644
--- a/demo/documentation/components/layout/zhCN/absolute.md
+++ b/demo/documentation/components/layout/zhCN/absolute.md
@@ -1,7 +1,7 @@
-# 绝对
-所有布局组件可以使用绝对定位。可用于让内容在盒内滚动。
+# 绝对定位模式
+所有布局组件可以使用 Absolute 定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。
 
-<n-alert title="警告" type="warning">为保证侧边栏及其相邻布局正确显示，它们均需设置mode="absolute"。</n-alert>
+<n-alert title="警告" type="warning">如果你在 Sider 上设定了 mode=`'absolute'`，那么为了旁边的 Layout 和 Layout Content 正常显示，他们也要被设定为 mode=`'absolute'`</n-alert>
 ```html
 <div style="width: 100%; height: 240px; position: relative">
   <n-layout mode="absolute">
diff --git a/demo/documentation/components/layout/zhCN/basic.md b/demo/documentation/components/layout/zhCN/basic.md
index 2ffe8fa3f..9552b9a9e 100644
--- a/demo/documentation/components/layout/zhCN/basic.md
+++ b/demo/documentation/components/layout/zhCN/basic.md
@@ -1,47 +1,47 @@
-# 基础
+# 基础用法
 ```html
 <n-layout>
   <n-layout-header>
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout-content>
-    Cool Content
+    酷的内容
   </n-layout-content>
   <n-layout-footer>
-    Cool Footer
+    酷的页脚
   </n-layout-footer>
 </n-layout>
 <br>
 <n-layout>
   <n-layout-header>
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout>
     <n-layout-sider>
-      Cool Sider
+      酷的边栏
     </n-layout-sider>
     <n-layout-content>
-      Cool Content
+      酷的内容
     </n-layout-content>
   </n-layout>
   <n-layout-footer>
-    Cool Footer
+    酷的页脚
   </n-layout-footer>
 </n-layout>
 <br>
 <n-layout>
   <n-layout-sider>
-    Cool Sider
+    酷的边栏
   </n-layout-sider>
   <n-layout>
     <n-layout-header>
-      Cool Header
+      酷的页头
     </n-layout-header>
     <n-layout-content>
-      Cool Content
+      酷的内容
     </n-layout-content>
     <n-layout-footer>
-      Cool Footer
+      酷的页脚
     </n-layout-footer>
   </n-layout>
 </n-layout>
diff --git a/demo/documentation/components/layout/zhCN/border.md b/demo/documentation/components/layout/zhCN/border.md
index 6fc16ba3e..99d106997 100644
--- a/demo/documentation/components/layout/zhCN/border.md
+++ b/demo/documentation/components/layout/zhCN/border.md
@@ -1,18 +1,18 @@
-# 边框
+# 使用边框
 ```html
 <n-layout>
   <n-layout-sider bordered>
-    Cool Sider
+    酷的边栏
   </n-layout-sider>
   <n-layout>
     <n-layout-header bordered>
-      Cool Header
+      酷的页头
     </n-layout-header>
     <n-layout-content>
-      Cool Content
+      酷的内容
     </n-layout-content>
     <n-layout-footer bordered>
-      Cool Footer
+      酷的页脚
     </n-layout-footer>
   </n-layout>
 </n-layout>
diff --git a/demo/documentation/components/layout/zhCN/collapse.md b/demo/documentation/components/layout/zhCN/collapse.md
index 2b7be166d..c8604459e 100644
--- a/demo/documentation/components/layout/zhCN/collapse.md
+++ b/demo/documentation/components/layout/zhCN/collapse.md
@@ -8,7 +8,7 @@
 <n-switch v-model="collapsed" />
 <n-layout style="height: 240px;">
   <n-layout-header style="height: 64px;">
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout>
     <n-layout-sider
@@ -20,21 +20,21 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <p>Sider Sider Sider Sider Sider Sider</p>
+      <p>边栏 边栏 边栏 边栏 边栏</p>
     </n-layout-sider>
     <n-layout>
       <n-layout-content>
-        <span>Content</span>
+        <span>内容</span>
       </n-layout-content>
       <n-layout-footer>
-        <n-h1>Footer</n-h1>
+        <n-h1>页脚</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
 </n-layout>
 <n-layout style="height: 240px;">
   <n-layout-header mode="absolute" style="height: 64px;">
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout mode="absolute" style="top: 64px;">
     <n-layout-sider
@@ -47,12 +47,12 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <n-h1>Sider</n-h1>
+      <n-h1>边栏</n-h1>
     </n-layout-sider>
     <n-layout 
       mode="absolute"
     >
-      <span>Content</span>
+      <span>内容</span>
     </n-layout>
   </n-layout>
 </n-layout>
diff --git a/demo/documentation/components/layout/zhCN/index.md b/demo/documentation/components/layout/zhCN/index.md
index cad5a9235..5b95be10f 100644
--- a/demo/documentation/components/layout/zhCN/index.md
+++ b/demo/documentation/components/layout/zhCN/index.md
@@ -1,5 +1,7 @@
-# 布局
+# 布局 Layout
+布局是用来布局的。
 <!--single-column-->
+## 演示
 ```demo
 basic
 border
@@ -8,5 +10,42 @@ scrollbar
 collapse
 trigger-button
 show-sider-content
-debug
 ```
+## Props
+### Layout, Layout Content Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条|
+|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute`  模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
+
+### Layout Footer
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|bordered|`boolean`|`false`||
+|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute`  模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
+
+### Layout Header Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|bordered|`boolean`|`false`||
+|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute`  模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
+
+### Layout Sider Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|bordered|`boolean`|`false`||
+|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute`  模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示。**当 Sider 的 mode 是 `absolute` 的时候，需要确保它旁边的 Layout 或者 Layout Content 的 mode 被设为 `absoulte`**|
+|collapsed-width|`number`|`48`||
+|width|`number`|`272`||
+|collapse-mode|`'transform' \| 'width'`|`'transform'`|如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度。`'transform'` 的 collapse-mode 只适用于 `'absolute'` mode 的 Sider|
+|collapsed|`boolean`|`false`||
+|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条|
+|show-content|`boolean`|`true`|如果设为 `false`，Sider 的内容将会变透明。|
+|show-trigger|`boolean`|`false`|内置的触发按钮是否展示|
+
+## Events
+### Layout Sider Events
+|名称|参数|介绍|
+|-|-|-|
+|expand|`()`||
+|collapse|`()`||
\ No newline at end of file
diff --git a/demo/documentation/components/layout/zhCN/scrollbar.md b/demo/documentation/components/layout/zhCN/scrollbar.md
index 4bd7e9222..a29ead9a0 100644
--- a/demo/documentation/components/layout/zhCN/scrollbar.md
+++ b/demo/documentation/components/layout/zhCN/scrollbar.md
@@ -1,23 +1,23 @@
 # 使用内置滚动条
-有时原生滚动条与naive-ui的样式不协调。可以（在侧边栏、布局或内容）使用naive-ui内置的滚动条。
+有时原生滚动条与 naive-ui 的样式不协调。可以（在 Sider、Layout 或 Layout Content）使用 naive-ui内置的滚动条。
 ```html
 <n-layout style="height: 480px;">
     <n-layout-header style="height: 64px;">
-      Cool Header
+      酷的页头
     </n-layout-header>
     <n-layout mode="absolute" style="top: 64px; bottom: 64px;">
       <n-layout-sider mode="absolute" :use-native-scrollbar="false">
-        Cool Sider
+        酷的边栏
       </n-layout-sider>
       <n-layout mode="absolute" :use-native-scrollbar="false">
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
-        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
+        <n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
       </n-layout>
     </n-layout>
     <n-layout-footer mode="absolute" style="height: 64px">
-      Cool Footer
+      酷的页脚
     </n-layout-footer>
   </n-layout>
 ```
diff --git a/demo/documentation/components/layout/zhCN/showSiderContent.md b/demo/documentation/components/layout/zhCN/showSiderContent.md
index 74c6ddefa..3da80d5d1 100644
--- a/demo/documentation/components/layout/zhCN/showSiderContent.md
+++ b/demo/documentation/components/layout/zhCN/showSiderContent.md
@@ -1,9 +1,10 @@
 # 隐藏侧边栏内容
+有时候收起边栏后，你不想看到里面有什么。
 ```html
 <n-switch v-model="collapsed" />
 <n-layout style="height: 240px;">
   <n-layout-header style="height: 64px;">
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout>
     <n-layout-sider
@@ -16,21 +17,21 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <n-h1>Sider</n-h1>
+      <n-h1>酷的边栏</n-h1>
     </n-layout-sider>
     <n-layout>
       <n-layout-content>
-        <span>Content</span>
+        <span>内容</span>
       </n-layout-content>
       <n-layout-footer>
-        <n-h1>Footer</n-h1>
+        <n-h1>页脚</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
 </n-layout>
 <n-layout style="height: 240px;">
   <n-layout-header mode="absolute" style="height: 64px;">
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout mode="absolute" style="top: 64px;">
     <n-layout-sider
@@ -44,12 +45,12 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <n-h1>Sider</n-h1>
+      <n-h1>边栏</n-h1>
     </n-layout-sider>
     <n-layout 
       mode="absolute"
     >
-      <span>Content</span>
+      <span>内容</span>
     </n-layout>
   </n-layout>
 </n-layout>
diff --git a/demo/documentation/components/layout/zhCN/triggerButton.md b/demo/documentation/components/layout/zhCN/triggerButton.md
index d01323ce6..6fcf1b5f8 100644
--- a/demo/documentation/components/layout/zhCN/triggerButton.md
+++ b/demo/documentation/components/layout/zhCN/triggerButton.md
@@ -1,9 +1,10 @@
 # 触发按钮
+免费附赠一个触发按钮。
 ```html
 <n-switch v-model="collapsed" />
 <n-layout style="height: 240px;">
   <n-layout-header style="height: 64px;">
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout>
     <n-layout-sider
@@ -15,21 +16,21 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <n-h1>Sider</n-h1>
+      <n-h1>边栏</n-h1>
     </n-layout-sider>
     <n-layout style="padding: 24px;">
       <n-layout-content>
-        <span>Content</span>
+        <span>内容</span>
       </n-layout-content>
       <n-layout-footer>
-        <n-h1>Footer</n-h1>
+        <n-h1>页脚</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
 </n-layout>
 <n-layout style="height: 240px;">
   <n-layout-header mode="absolute" style="height: 64px;">
-    Cool Header
+    酷的页头
   </n-layout-header>
   <n-layout mode="absolute" style="top: 64px;">
     <n-layout-sider
@@ -42,17 +43,17 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <n-h1>Sider</n-h1>
+      <n-h1>边栏</n-h1>
     </n-layout-sider>
     <n-layout 
       mode="absolute"
       style="padding: 24px;"
     >
       <n-layout-content>
-        <span>Content</span>
+        <span>内容</span>
       </n-layout-content>
       <n-layout-footer>
-        <n-h1>Footer</n-h1>
+        <n-h1>页脚</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
diff --git a/package.json b/package.json
index 175401269..c9a8d12f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "",
   "main": "index.js",
   "scripts": {