diff --git a/components/Common.vue b/components/Common.vue
index 0c509c0..fa5dec0 100644
--- a/components/Common.vue
+++ b/components/Common.vue
@@ -32,6 +32,7 @@
           <slot></slot>
           <Comments :isShowComments="isComment"/>
         </div>
+        <Footer class="footer" />
       </div>
     </transition>
     <GA></GA>
@@ -40,13 +41,14 @@
 
 <script>
 import Navbar from '@theme/components/Navbar.vue'
+import Footer from '@theme/components/Footer.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import { resolveSidebarItems } from '../util'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
 
 export default {
-  components: { Sidebar, Navbar, Password },
+  components: { Sidebar, Navbar, Password, Footer },
 
   props: ['sidebar', 'isComment'],
 
diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000..943109f
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="footer-wrapper">
+    <span>
+      <i class="iconfont reco-theme"></i>
+      <a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
+    </span>
+    <span v-if="$themeConfig.record">
+      <i class="iconfont reco-beian"></i>
+      <a>{{ $themeConfig.record }}</a>
+    </span>
+    <span>
+      <i class="iconfont reco-copyright"></i>
+      <a>
+        <span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
+        {{ year }}
+        &nbsp;&nbsp;
+        <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
+      </a>
+    </span>
+    <span v-show="$themeConfig.commentsSolution === 'valine'">
+      <i class="iconfont reco-eye"></i>
+      <AccessNumber idVal="/" />
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    year () {
+      return new Date().getFullYear()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .footer-wrapper {
+    padding: 2.5rem;
+    border-top: 1px solid $borderColor;
+    text-align: center;
+    color: lighten($textColor, 25%);
+    > span {
+      margin-left 1rem
+      > i {
+        margin-right .5rem
+      }
+    }
+  }
+
+@media (max-width: $MQMobile) {
+  .footer {
+    text-align: left!important;
+    > span {
+      display block
+      margin-left 0
+      line-height 2rem
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/Home.vue b/components/Home.vue
index 90c0802..cad7db6 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -28,39 +28,11 @@
     </div>
 
     <Content class="home-center" custom/>
-
-    <div class="footer">
-      <span>
-        <i class="iconfont reco-theme"></i>
-        <a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
-      </span>
-      <!-- <span>
-        <i class="iconfont reco-other"></i>
-        <a>{{ $themeConfig.author || $site.title }}</a>
-      </span> -->
-      <span v-if="$themeConfig.record">
-        <i class="iconfont reco-beian"></i>
-        <a>{{ $themeConfig.record }}</a>
-      </span>
-      <span>
-        <i class="iconfont reco-copyright"></i>
-        <a>
-          <span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
-          {{ year }}
-          &nbsp;&nbsp;
-          <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
-          </a>
-      </span>
-      <span v-show="$themeConfig.commentsSolution === 'valine'">
-        <i class="iconfont reco-eye"></i>
-        <AccessNumber idVal="/" />
-      </span>
-    </div>
   </div>
 </template>
 
 <script>
-import NavLink from '@theme/components/NavLink/'
+import NavLink from '@theme/components/NavLink.vue'
 
 export default {
   components: { NavLink },
@@ -70,9 +42,6 @@ export default {
     }
   },
   computed: {
-    year () {
-      return new Date().getFullYear()
-    },
     data () {
       return this.$frontmatter
     },
@@ -172,20 +141,6 @@ export default {
     }
   }
 
-  .footer {
-    padding: 2.5rem;
-    border-top: 1px solid $borderColor;
-    text-align: center;
-    color: lighten($textColor, 25%);
-    load-start()
-    > span {
-      margin-left 1rem
-      > i {
-        margin-right .5rem
-      }
-    }
-  }
-
   &.reco-hide {
   .hero {
     img {
@@ -211,9 +166,6 @@ export default {
     load-start()
     padding 0
   }
-  .footer {
-    load-start()
-  }
 }
 
   &.reco-show {
@@ -240,9 +192,6 @@ export default {
     .home-center {
       load-end(0.48s)
     }
-    .footer {
-      load-end(0.56s)
-    }
   }
 }
 
@@ -257,14 +206,6 @@ export default {
       padding: 0 2.5rem;
     }
   }
-  .footer {
-    text-align: left!important;
-    > span {
-      display block
-      margin-left 0
-      line-height 2rem
-    }
-  }
 }
 
 @media (max-width: $MQMobileNarrow) {
diff --git a/components/HomeBlog.vue b/components/HomeBlog.vue
index c06f7ed..21dc5d9 100644
--- a/components/HomeBlog.vue
+++ b/components/HomeBlog.vue
@@ -51,30 +51,6 @@
     </div>
 
     <Content class="home-center" custom/>
-
-    <div class="footer">
-      <span>
-        <i class="iconfont reco-theme"></i>
-        <a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
-      </span>
-      <span v-if="$themeConfig.record">
-        <i class="iconfont reco-beian"></i>
-        <a>{{ $themeConfig.record }}</a>
-      </span>
-      <span>
-        <i class="iconfont reco-copyright"></i>
-        <a>
-          <span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
-          {{ year }}
-          &nbsp;&nbsp;
-          <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
-        </a>
-      </span>
-      <span v-show="$themeConfig.commentsSolution === 'valine'">
-        <i class="iconfont reco-eye"></i>
-        <AccessNumber idVal="/" />
-      </span>
-    </div>
   </div>
 </template>
 
@@ -113,9 +89,6 @@ export default {
       })
       return num
     },
-    year () {
-      return new Date().getFullYear()
-    },
     data () {
       return this.$frontmatter
     },
@@ -313,19 +286,6 @@ export default {
       }
     }
   }
-
-  .footer {
-    padding: 2.5rem;
-    border-top: 1px solid $borderColor;
-    text-align: center;
-    color: lighten($textColor, 25%);
-    > span {
-      margin-left 1rem
-      > i {
-        margin-right .5rem
-      }
-    }
-  }
 }
 
 .reco-hide {
@@ -354,9 +314,6 @@ export default {
     load-start()
     padding 0
   }
-  .footer {
-    load-start()
-  }
 }
 
 .reco-show {
@@ -383,9 +340,6 @@ export default {
   .home-center {
     load-end(0.56s)
   }
-  .footer {
-    load-end(0.64s)
-  }
 }
 
 @media (max-width: $MQMobile) {
@@ -424,14 +378,6 @@ export default {
       }
     }
   }
-  .footer {
-    text-align: left!important;
-    > span {
-      display block
-      margin-left 0
-      line-height 2rem
-    }
-  }
 }
 
 @media (max-width: $MQMobileNarrow) {
diff --git a/package.json b/package.json
index 4c6d7c0..3fd174b 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@vuepress-reco/vuepress-plugin-pagation": "^1.0.3",
     "@vuepress-reco/vuepress-plugin-screenfull": "^1.0.0",
     "@vuepress-reco/vuepress-plugin-ga": "^1.0.2",
-    "@vuepress-reco/vuepress-plugin-comments": "^1.0.2",
+    "@vuepress-reco/vuepress-plugin-comments": "^1.0.3",
     "@vuepress/plugin-medium-zoom": "1.2.0",
     "@vuepress/plugin-blog": "1.3.0",
     "leancloud-storage": "3.13.2",