diff --git a/src/css/injected-components.css b/src/css/injected-components.css
index e9b09728..aa9ae708 100644
--- a/src/css/injected-components.css
+++ b/src/css/injected-components.css
@@ -8,7 +8,7 @@
     }
   }
 
-  &[data-position="main:start"] {
+  &[data-position="content:start"] {
     margin-bottom: 35px;
 
     &>*:first-child {
@@ -20,7 +20,7 @@
     }
   }
 
-  &[data-position="main:end"] {
+  &[data-position="content:end"] {
     margin-top: 30px;
   }
 
diff --git a/src/css/markdown.css b/src/css/page-content.css
similarity index 99%
rename from src/css/markdown.css
rename to src/css/page-content.css
index 43fdac72..84980d83 100644
--- a/src/css/markdown.css
+++ b/src/css/page-content.css
@@ -1,4 +1,4 @@
-.markdown-body {
+.page-content {
   & > *:first-child {
     margin-top: 0;
   }
diff --git a/src/plugins/banner-footer/index.js b/src/plugins/banner-footer/index.js
index 5bd45c49..53293ea4 100644
--- a/src/plugins/banner-footer/index.js
+++ b/src/plugins/banner-footer/index.js
@@ -8,10 +8,16 @@ export default {
   extend(api) {
     const {banner, footer} = api.store.getters.config
     if (banner) {
-      api.registerComponent('main:start', getComponent(banner, 'docute-banner'))
+      api.registerComponent(
+        'content:start',
+        getComponent(banner, 'docute-banner')
+      )
     }
     if (footer) {
-      api.registerComponent('main:end', getComponent(footer, 'docute-footer'))
+      api.registerComponent(
+        'content:end',
+        getComponent(footer, 'docute-footer')
+      )
     }
   }
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 57d9f202..922a6d4f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,15 +21,12 @@
           </content-loader>
         </div>
         <div class="Content" v-else>
-          <InjectedComponents position="main:start" />
+          <InjectedComponents position="content:start" />
           <component v-if="pageTitle" :is="MarkdownTitle" class="page-title" />
-          <component
-            :class="{'has-page-title': pageTitle}"
-            :is="MarkdownBody"
-          />
+          <component :class="{'has-page-title': pageTitle}" :is="PageContent" />
           <EditLink />
           <PrevNextLinks />
-          <InjectedComponents position="main:end" />
+          <InjectedComponents position="content:end" />
         </div>
       </div>
     </div>
@@ -106,7 +103,7 @@ export default {
       }
     },
 
-    MarkdownBody() {
+    PageContent() {
       const {env} = this.$store.state
       const {componentMixins = []} = this.$store.getters.config
       const component = {
@@ -118,8 +115,8 @@ export default {
             return fn(Vue)
           })
         ],
-        name: 'MarkdownBody',
-        template: `<div class="markdown-body">${
+        name: 'PageContent',
+        template: `<div class="page-content">${
           this.$store.state.page.content
         }</div>`
       }
@@ -169,7 +166,8 @@ export default {
 }
 </script>
 
-<style src="../css/prism.css"></style> <style src="../css/markdown.css"></style>
+<style src="../css/prism.css"></style>
+<style src="../css/page-content.css"></style>
 
 <style scoped>
 .Main {
diff --git a/website/docs/plugin-api.md b/website/docs/plugin-api.md
index b5680aab..3a3a7954 100644
--- a/website/docs/plugin-api.md
+++ b/website/docs/plugin-api.md
@@ -44,8 +44,8 @@ Register a component at specific position:
 
 - `sidebar:start`: The start of sidebar.
 - `sidebar:end`: The end of sidebar.
-- `main:start`: The start of main area of the page.
-- `main:end`: The end of main area of the page.
+- `content:start`: The start of page content.
+- `content:end`: The end of page content.
 - `header-right:start`: The start of right nav in site header.
 - `header-right:end`: The end of right nav in site header.
 
diff --git a/website/docs/zh/plugin-api.md b/website/docs/zh/plugin-api.md
index 40b70cf1..7b69a40e 100644
--- a/website/docs/zh/plugin-api.md
+++ b/website/docs/zh/plugin-api.md
@@ -44,8 +44,8 @@ Register a component at specific position:
 
 - `sidebar:start`: The start of sidebar.
 - `sidebar:end`: The end of sidebar.
-- `main:start`: The start of main area of the page.
-- `main:end`: The end of main area of the page.
+- `content:start`: The start of page content.
+- `content:end`: The end of page content.
 - `header-right:start`: The start of right nav in site header.
 - `header-right:end`: The end of right nav in site header.