diff --git a/components/Common.vue b/components/Common.vue
index afbaf77..96f71d7 100644
--- a/components/Common.vue
+++ b/components/Common.vue
@@ -4,39 +4,7 @@
     :class="pageClasses"
     @touchstart="onTouchStart"
     @touchend="onTouchEnd">
-    <div v-if="absoluteEncryption">
-      <transition name="fade">
-        <LoadingPage v-if="firstLoad" />
-        <Password v-else-if="!isHasKey" />
-        <div v-else>
-          <Navbar
-          v-if="shouldShowNavbar"
-          @toggle-sidebar="toggleSidebar"/>
-
-          <div
-            class="sidebar-mask"
-            @click="toggleSidebar(false)"></div>
-
-          <Sidebar
-            :items="sidebarItems"
-            @toggle-sidebar="toggleSidebar">
-            <slot
-              name="sidebar-top"
-              slot="top"/>
-            <slot
-              name="sidebar-bottom"
-              slot="bottom"/>
-          </Sidebar>
-
-          <Password v-if="!isHasPageKey" :isPage="true"></Password>
-          <div v-else>
-            <slot></slot>
-            <Comments :isShowComments="shouldShowComments"/>
-          </div>
-        </div>
-      </transition>
-    </div>
-    <div v-else>
+    <div v-if="!absoluteEncryption">
       <transition name="fade">
         <LoadingPage v-show="firstLoad" class="loading-wrapper" />
       </transition>
@@ -70,6 +38,38 @@
         </div>
       </div>
     </div>
+    <div v-else>
+      <transition name="fade">
+        <LoadingPage v-if="firstLoad" />
+        <Password v-else-if="!isHasKey" />
+        <div v-else>
+          <Navbar
+          v-if="shouldShowNavbar"
+          @toggle-sidebar="toggleSidebar"/>
+
+          <div
+            class="sidebar-mask"
+            @click="toggleSidebar(false)"></div>
+
+          <Sidebar
+            :items="sidebarItems"
+            @toggle-sidebar="toggleSidebar">
+            <slot
+              name="sidebar-top"
+              slot="top"/>
+            <slot
+              name="sidebar-bottom"
+              slot="bottom"/>
+          </Sidebar>
+
+          <Password v-if="!isHasPageKey" :isPage="true"></Password>
+          <div v-else>
+            <slot></slot>
+            <Comments :isShowComments="shouldShowComments"/>
+          </div>
+        </div>
+      </transition>
+    </div>
   </div>
 </template>
 
diff --git a/components/Home.vue b/components/Home.vue
index d699467..dabb4c7 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -3,40 +3,40 @@
     <div class="hero">
       <ModuleTransition>
         <img
-          v-if="data.isShowHeroImage !== false && recoShowModule"
-          :style="heroImageStyle"
-          :src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
+          v-if="recoShowModule && $frontmatter.heroImage"
+          :style="heroImageStyle || {}"
+          :src="$withBase($frontmatter.heroImage)"
           alt="hero">
       </ModuleTransition>
+      <ModuleTransition delay="0.04">
+        <h1 v-if="recoShowModule && $frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
+      </ModuleTransition>
       <ModuleTransition delay="0.08">
-        <h1 v-if="data.isShowTitleInHome !== false && recoShowModule">{{ data.heroText || $title || '午后南杂' }}</h1>
+        <p v-show="recoShowModule" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
       </ModuleTransition>
       <ModuleTransition delay="0.16">
-        <p v-if="recoShowModule" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
-      </ModuleTransition>
-      <ModuleTransition delay="0.24">
-        <p class="huawei" v-if="$themeConfig.huawei === true && recoShowModule">
+        <p class="huawei" v-if="recoShowModule && $themeConfig.huawei === true">
           <i class="iconfont reco-huawei" style="color: #fc2d38"></i>
           &nbsp;&nbsp;&nbsp;华为，为中华而为之！
         </p>
       </ModuleTransition>
-      <ModuleTransition delay="0.32">
-        <p class="action" v-if="data.actionText && data.actionLink && recoShowModule">
+      <ModuleTransition delay="0.24">
+        <p class="action" v-if="recoShowModule && $frontmatter.actionText && $frontmatter.actionLink">
           <NavLink class="action-button" :item="actionLink"/>
         </p>
       </ModuleTransition>
     </div>
 
-    <ModuleTransition delay="0.4">
-      <div class="features" v-if="data.features && data.features.length && recoShowModule">
-        <div v-for="(feature, index) in data.features" :key="index" class="feature">
+    <ModuleTransition delay="0.32">
+      <div class="features" v-if="recoShowModule && $frontmatter.features && $frontmatter.features.length">
+        <div v-for="(feature, index) in $frontmatter.features" :key="index" class="feature">
           <h2>{{ feature.title }}</h2>
           <p>{{ feature.details }}</p>
         </div>
       </div>
     </ModuleTransition>
-    <ModuleTransition delay="0.48">
-      <Content class="home-center" v-if="recoShowModule" custom/>
+    <ModuleTransition delay="0.4">
+      <Content class="home-center" v-show="recoShowModule" custom/>
     </ModuleTransition>
   </div>
 </template>
@@ -44,23 +44,22 @@
 <script>
 import NavLink from '@theme/components/NavLink'
 import ModuleTransition from '@theme/components/ModuleTransition'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
+  mixins: [moduleTransitonMixin],
   components: { NavLink, ModuleTransition },
   computed: {
-    data () {
-      return this.$frontmatter
-    },
 
     actionLink () {
       return {
-        link: this.data.actionLink,
-        text: this.data.actionText
+        link: this.$frontmatter.actionLink,
+        text: this.$frontmatter.actionText
       }
     },
 
     heroImageStyle () {
-      return this.data.heroImageStyle || {
+      return this.$frontmatter.heroImageStyle || {
         maxHeight: '200px',
         margin: '6rem auto 1.5rem'
       }
diff --git a/components/HomeBlog.vue b/components/HomeBlog.vue
index 62d3618..8d3c99f 100644
--- a/components/HomeBlog.vue
+++ b/components/HomeBlog.vue
@@ -1,15 +1,23 @@
 <template>
   <div class="home-blog">
-    <div
-      class="hero"
-      :style="{
-        background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
+    <div class="hero" :style="{ ...bgImageStyle }">
+      <div
+        class="mask"
+        :style="{
+      background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div>
       <ModuleTransition>
-        <h1 v-if="recoShowModule">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
+        <img
+          v-if="recoShowModule && $frontmatter.heroImage"
+          :style="heroImageStyle || {}"
+          :src="$withBase($frontmatter.heroImage)"
+          alt="hero">
+      </ModuleTransition>
+      <ModuleTransition delay="0.04">
+        <h1 v-if="$frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
       </ModuleTransition>
 
       <ModuleTransition delay="0.08">
-        <p v-if="recoShowModule" class="description">
+        <p v-show="recoShowModule" class="description">
           {{ $description || 'Welcome to your vuePress-theme-reco site' }}
         </p>
       </ModuleTransition>
@@ -24,7 +32,7 @@
     </div>
 
     <ModuleTransition delay="0.24">
-      <div v-if="recoShowModule" class="home-blog-wrapper">
+      <div v-show="recoShowModule" class="home-blog-wrapper">
         <div class="blog-list">
           <!-- 博客列表 -->
           <note-abstract
@@ -39,19 +47,7 @@
             @getCurrentPage="getCurrentPage" />
         </div>
         <div class="info-wrapper">
-          <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
-          <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
-          <div class="num">
-            <div>
-              <h3>{{$recoPosts.length}}</h3>
-              <h6>文章</h6>
-            </div>
-            <div>
-              <h3>{{$tags.list.length}}</h3>
-              <h6>标签</h6>
-            </div>
-          </div>
-          <hr>
+          <PersonalInfo/>
           <h4><i class="iconfont reco-category"></i> 分类</h4>
           <ul class="category-wrapper">
             <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
@@ -71,7 +67,7 @@
     </ModuleTransition>
 
     <ModuleTransition delay="0.36">
-      <Content v-if="recoShowModule" class="home-center" custom/>
+      <Content v-show="recoShowModule" class="home-center" custom/>
     </ModuleTransition>
   </div>
 </template>
@@ -82,11 +78,13 @@ import FriendLink from '@theme/components/FriendLink'
 import NoteAbstract from '@theme/components/NoteAbstract'
 import pagination from '@theme/mixins/pagination'
 import ModuleTransition from '@theme/components/ModuleTransition'
+import PersonalInfo from '@theme/components/PersonalInfo'
 import { getOneColor } from '@theme/helpers/other'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [pagination],
-  components: { NoteAbstract, TagList, FriendLink, ModuleTransition },
+  mixins: [pagination, moduleTransitonMixin],
+  components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo },
   data () {
     return {
       recoShow: false,
@@ -169,6 +167,27 @@ export default {
   margin: 0px auto;
 
   .hero {
+    position relative
+    .mask {
+      position absolute
+      top 0
+      bottom 0
+      left 0
+      right 0
+      z-index -1
+      &:after {
+        display block
+        content ' '
+        background var(--mask-color)
+        position absolute
+        top 0
+        bottom 0
+        left 0
+        right 0
+        z-index 0
+        opacity .2
+      }
+    }
     figure {
       position absolute
       background yellow
@@ -215,41 +234,10 @@ export default {
       border-radius $borderRadius
       box-sizing border-box
       padding 0 15px
+      background var(--background-color)
       &:hover {
         box-shadow: var(--box-shadow-hover);
       }
-      .personal-img {
-        display block
-        margin 2rem auto
-        width 8rem
-        height 8rem
-      }
-      .name {
-        text-align center
-        color var(--text-color)
-      }
-      .num {
-        display flex
-        margin 0 auto 1rem
-        width 80%
-        > div {
-          text-align center
-          flex auto
-          &:first-child {
-            border-right 1px solid #333
-          }
-          h3 {
-            line-height auto
-            margin 0 0 .6rem
-            color var(--text-color)
-          }
-          h6 {
-            line-height auto
-            color var(--text-color)
-            margin 0
-          }
-        }
-      }
       h4 {
         color var(--text-color)
       }
@@ -262,6 +250,7 @@ export default {
           transition: all .5s
           border-radius $borderRadius
           box-shadow var(--box-shadow)
+          background-color var(--background-color)
           &:hover {
             transform scale(1.04)
           }
diff --git a/components/Mode/modeOptions.js b/components/Mode/modeOptions.js
index 368ec9a..3466b78 100644
--- a/components/Mode/modeOptions.js
+++ b/components/Mode/modeOptions.js
@@ -6,7 +6,8 @@ const modeOptions = {
     '--text-color': '#2c3e50',
     '--border-color': '#eaecef',
     '--bgm-bg-color': 'rgba(255, 255, 255, .7)',
-    '--code-color': 'rgba(27, 31, 35, 0.05)'
+    '--code-color': 'rgba(27, 31, 35, 0.05)',
+    '--mask-color': '#888'
   },
   dark: {
     '--background-color': '#25272a',
@@ -15,7 +16,8 @@ const modeOptions = {
     '--text-color': '#aaa',
     '--border-color': 'rgba(0, 0, 0, .3)',
     '--bgm-bg-color': 'rgba(0, 0, 0, .7)',
-    '--code-color': 'rgba(0, 0, 0, .3)'
+    '--code-color': 'rgba(0, 0, 0, .3)',
+    '--mask-color': '#000'
   }
 }
 
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 7d42b3a..89cd9a3 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -92,6 +92,7 @@ $navbar-horizontal-padding = 1.5rem
   padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
   box-shadow var(--box-shadow)
+  background var(--background-color)
   a, span, img
     display inline-block
   .logo
@@ -104,6 +105,7 @@ $navbar-horizontal-padding = 1.5rem
     font-weight 600
     color var(--text-color)
     position relative
+    background var(--background-color)
   .links
     padding-left 1.5rem
     box-sizing border-box
@@ -113,10 +115,10 @@ $navbar-horizontal-padding = 1.5rem
     right $navbar-horizontal-padding
     top $navbar-vertical-padding
     display flex
+    background-color var(--background-color)
     .search-box
       flex: 0 0 auto
       vertical-align top
-      margin-right 1rem
 
 @media (max-width: $MQMobile)
   .navbar
diff --git a/components/NoteAbstract.vue b/components/NoteAbstract.vue
index 52aa38e..f94834a 100644
--- a/components/NoteAbstract.vue
+++ b/components/NoteAbstract.vue
@@ -1,23 +1,12 @@
 <template>
   <div class="abstract-wrapper">
-    <div v-if="listLoadType === 'sync'" key="sync">
-      <NoteAbstractItem
-        v-for="(item, index) in data"
-        :key="item.path"
-        :item="item"
-        :currentPage="currentPage"
-        :currentTag="currentTag"
-        v-show="index >= (currentPage * 10 - 10) && index < currentPage * 10"/>
-    </div>
-    <div v-else-if="listLoadType === 'async'" key="async">
-      <NoteAbstractItem
+    <NoteAbstractItem
         v-for="(item) in currentPageData"
         :key="item.path"
         :item="item"
         :currentPage="currentPage"
         :currentTag="currentTag"
         :hideAccessNumber="true" />
-    </div>
   </div>
 </template>
 
@@ -28,15 +17,6 @@ export default {
   components: { NoteAbstractItem },
   props: ['data', 'currentPage', 'currentTag', 'hideAccessNumber'],
   computed: {
-    listLoadType () {
-      const valineConfig = this.$themeConfig.valineConfig
-      if (this.$frontmatter.home) return 'async'
-      if (valineConfig && !valineConfig.hideListAccessNumber) {
-        return 'sync'
-      } else {
-        return 'async'
-      }
-    },
     currentPageData () {
       const start = this.currentPage * 10 - 10
       const end = this.currentPage * 10
diff --git a/components/NoteAbstractItem.vue b/components/NoteAbstractItem.vue
index 0c66ddf..b388c97 100644
--- a/components/NoteAbstractItem.vue
+++ b/components/NoteAbstractItem.vue
@@ -51,8 +51,6 @@ export default {
     font-size: 1.28rem;
     line-height: 36px;
     display: inline-block;
-    a
-      color var(--text-color)
     .reco-lock
       font-size 1.28rem
       color $accentColor
diff --git a/components/Page.vue b/components/Page.vue
index 7705a18..12302e1 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -1,11 +1,11 @@
 <template>
   <main class="page">
     <ModuleTransition>
-      <slot v-if="recoShowModule" name="top"/>
+      <slot v-show="recoShowModule" name="top"/>
     </ModuleTransition>
 
     <ModuleTransition delay="0.08">
-      <div v-if="recoShowModule" class="page-title">
+      <div v-show="recoShowModule" class="page-title">
         <h1>{{$page.title}}</h1>
         <hr>
         <PageInfo :pageInfo="$page" :hideAccessNumber="hideAccessNumber"></PageInfo>
@@ -13,11 +13,11 @@
     </ModuleTransition>
 
     <ModuleTransition delay="0.16">
-      <Content v-if="recoShowModule" class="theme-reco-content" />
+      <Content v-show="recoShowModule" class="theme-reco-content" />
     </ModuleTransition>
 
     <ModuleTransition delay="0.24">
-      <footer v-if="recoShowModule" class="page-edit">
+      <footer v-show="recoShowModule" class="page-edit">
         <div
           class="edit-link"
           v-if="editLink"
@@ -74,7 +74,7 @@
     </ModuleTransition>
 
     <ModuleTransition delay="0.40">
-      <slot v-if="recoShowModule" name="bottom"/>
+      <slot v-show="recoShowModule" name="bottom"/>
     </ModuleTransition>
   </main>
 </template>
@@ -83,8 +83,10 @@
 import PageInfo from '@theme/components/PageInfo'
 import { resolvePage, outboundRE, endingSlashRE } from '@theme/helpers/utils'
 import ModuleTransition from '@theme/components/ModuleTransition'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
+  mixins: [moduleTransitonMixin],
   components: { PageInfo, ModuleTransition },
 
   props: ['sidebarItems'],
diff --git a/components/Password.vue b/components/Password.vue
index 2fecc2d..59340af 100644
--- a/components/Password.vue
+++ b/components/Password.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="password-shadow">
     <ModuleTransition>
-      <h3 v-if="recoShowModule" class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
+      <h3 v-show="recoShowModule" class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
     </ModuleTransition>
 
     <ModuleTransition delay="0.08">
@@ -9,7 +9,7 @@
     </ModuleTransition>
 
     <ModuleTransition delay="0.16">
-      <label v-if="recoShowModule" class="inputBox" id="box">
+      <label v-show="recoShowModule" class="inputBox" id="box">
         <input
           v-model="key"
           type="password"
@@ -22,7 +22,7 @@
     </ModuleTransition>
 
     <ModuleTransition delay="0.24">
-      <div v-if="recoShowModule" class="footer">
+      <div v-show="recoShowModule" class="footer">
         <span>
           <i class="iconfont reco-theme"></i>
           <a target="blank" href="https://vuepress-theme-reco.recoluan.com">vuePress-theme-reco</a>
@@ -42,7 +42,10 @@
 
 <script>
 import ModuleTransition from '@theme/components/ModuleTransition'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
+
 export default {
+  mixins: [moduleTransitonMixin],
   components: { ModuleTransition },
   props: {
     isPage: {
diff --git a/components/PersonalInfo.vue b/components/PersonalInfo.vue
new file mode 100644
index 0000000..1ee026d
--- /dev/null
+++ b/components/PersonalInfo.vue
@@ -0,0 +1,55 @@
+<template>
+<div class="personal-info-wrapper">
+  <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
+  <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
+  <div class="num">
+    <div>
+      <h3>{{$recoPosts.length}}</h3>
+      <h6>文章</h6>
+    </div>
+    <div>
+      <h3>{{$tags.list.length}}</h3>
+      <h6>标签</h6>
+    </div>
+  </div>
+  <hr>
+</div>  
+</template>
+
+<style lang="stylus" scoped>
+.personal-info-wrapper {
+  .personal-img {
+    display block
+    margin 2rem auto
+    width 8rem
+    height 8rem
+    border-radius 50%
+  }
+  .name {
+    text-align center
+    color var(--text-color)
+  }
+  .num {
+    display flex
+    margin 0 auto 1rem
+    width 80%
+    > div {
+      text-align center
+      flex auto
+      &:first-child {
+        border-right 1px solid #333
+      }
+      h3 {
+        line-height auto
+        margin 0 0 .6rem
+        color var(--text-color)
+      }
+      h6 {
+        line-height auto
+        color var(--text-color)
+        margin 0
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/SearchBox.vue b/components/SearchBox.vue
index 05f0fa4..365c308 100644
--- a/components/SearchBox.vue
+++ b/components/SearchBox.vue
@@ -51,10 +51,6 @@ export default {
   },
   mounted () {
     this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
-    document.addEventListener('keydown', this.onHotkey)
-  },
-  beforeDestroy () {
-    document.removeEventListener('keydown', this.onHotkey)
   },
   computed: {
     showSuggestions () {
@@ -114,12 +110,6 @@ export default {
       }
       return '/'
     },
-    onHotkey (event) {
-      if (event.srcElement === document.body) {
-        this.$refs.input.focus()
-        event.preventDefault()
-      }
-    },
     onUp () {
       if (this.showSuggestions) {
         if (this.focusIndex > 0) {
@@ -231,6 +221,7 @@ export default {
     height 2rem
 @media (max-width: $MQNarrow) and (min-width: $MQMobile)
   .search-box
+    margin-right 0
     .suggestions
       left 0
 @media (max-width: $MQMobile)
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 4c05f51..57f34d7 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -1,5 +1,6 @@
 <template>
   <aside class="sidebar">
+    <PersonalInfo/>
     <NavLinks/>
     <slot name="top"/>
     <SidebarLinks :depth="0" :items="items"/>
@@ -9,12 +10,13 @@
 
 <script>
 import SidebarLinks from '@theme/components/SidebarLinks'
+import PersonalInfo from '@theme/components/PersonalInfo'
 import NavLinks from '@theme/components/NavLinks'
 
 export default {
   name: 'Sidebar',
 
-  components: { SidebarLinks, NavLinks },
+  components: { SidebarLinks, NavLinks, PersonalInfo },
 
   props: ['items']
 }
@@ -22,6 +24,8 @@ export default {
 
 <style lang="stylus">
 .sidebar
+  .personal-info-wrapper
+    display none
   ul
     padding 0
     margin 0
@@ -50,6 +54,8 @@ export default {
 
 @media (max-width: $MQMobile)
   .sidebar
+    .personal-info-wrapper
+      display block
     .nav-links
       display block
       .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
diff --git a/enhanceApp.js b/enhanceApp.js
index c8c5664..2495adf 100644
--- a/enhanceApp.js
+++ b/enhanceApp.js
@@ -1,9 +1,7 @@
 import postMixin from '@theme/mixins/posts'
-import appMixin from '@theme/mixins/app'
 
 export default ({
   Vue
 }) => {
   Vue.mixin(postMixin)
-  Vue.mixin(appMixin)
 }
diff --git a/example/docs/.vuepress/config.js b/example/docs/.vuepress/config.js
index e44d50b..9c7e831 100644
--- a/example/docs/.vuepress/config.js
+++ b/example/docs/.vuepress/config.js
@@ -68,6 +68,14 @@ module.exports = {
     //   appId: '...',// your appId
     //   appKey: '...', // your appKey
     // }
+    vssueConfig: {
+      admins: ['recoluan'],
+      platform: 'github',
+      owner: 'vuepress-reco',
+      repo: 'vuepress-reco.github.io',
+      clientId: '4d81cea3b3d8aac8e88e',
+      clientSecret: 'd23e8556b6d3c85abffbf4b8d853afb2ea08875a',
+    },
     keyPage: {
       keys: ['123456']
     },
diff --git a/example/docs/README.md b/example/docs/README.md
index cecb006..32b4966 100644
--- a/example/docs/README.md
+++ b/example/docs/README.md
@@ -1,15 +1,15 @@
 ---
 home: true
-heroImage: /hero.png
-heroImageStyle: {
-  maxWidth: '600px',
-  width: '100%',
-  display: block,
-  margin: '9rem auto 2rem',
-  background: '#fff',
-  borderRadius: '1rem',
-}
-isShowTitleInHome: false
+# heroImage: /hero.png
+# heroImageStyle: {
+#   maxWidth: '600px',
+#   width: '100%',
+#   display: block,
+#   margin: '9rem auto 2rem',
+#   background: '#fff',
+#   borderRadius: '1rem',
+# }
+# isShowTitleInHome: false
 actionText: Guide
 actionLink: /views/other/guide
 features:
diff --git a/helpers/utils.js b/helpers/utils.js
index 89c14ff..80c3efc 100644
--- a/helpers/utils.js
+++ b/helpers/utils.js
@@ -211,7 +211,7 @@ export function formatDate (time, fmt = 'yyyy-MM-dd hh:mm:ss') {
 
   const o = {
     'M+': date.getMonth() + 1,
-    'd+': date.getDay(),
+    'd+': date.getDate(),
     'h+': date.getHours(),
     'm+': date.getMinutes(),
     's+': date.getSeconds()
diff --git a/layouts/404.vue b/layouts/404.vue
index 6386674..0040455 100644
--- a/layouts/404.vue
+++ b/layouts/404.vue
@@ -42,11 +42,28 @@ export default {
 
 <style src="../styles/theme.styl" lang="stylus"></style>
 
-<style lang="stylus" scoped>
-.content {
+<style lang="stylus">
+.content
   margin 4rem auto 0
   max-width 800px
   padding 0 2rem
-}
+.mod_404
+  .desc
+    .desc_link
+      display: inline-block
+      // margin: 20px 0
+      background: #424242!important
+      color: #ffffff
+      padding: 6px 20px!important
+      text-decoration: none!important
+      border-radius: 4px
+
+@media screen and (max-width: 720px)
+  .mod_404 
+    .desc
+      margin: 50px 0
+    .wrapper
+      margin 0!important
+      padding-top 20px
 </style>
 
diff --git a/layouts/Category.vue b/layouts/Category.vue
index fae0d06..51f07dd 100644
--- a/layouts/Category.vue
+++ b/layouts/Category.vue
@@ -4,7 +4,7 @@
     <Common :sidebar="false" :isComment="false">
       <!-- 分类集合 -->
       <ModuleTransition>
-        <ul v-if="recoShowModule" class="category-wrapper">
+        <ul v-show="recoShowModule" class="category-wrapper">
           <li
             class="category-item"
             :class="title == item.name ? 'active': ''"
@@ -21,7 +21,7 @@
       <!-- 博客列表 -->
       <ModuleTransition delay="0.08">
         <note-abstract
-          v-if="recoShowModule"
+          v-show="recoShowModule"
           class="list"
           :data="posts"
           :currentPage="currentPage"
@@ -31,12 +31,11 @@
       <!-- 分页 -->
       <ModuleTransition delay="0.16">
         <pagation
-          v-if="recoShowModule"
           class="pagation"
           :total="posts.length"
           :currentPage="currentPage"
           @getCurrentPage="getCurrentPage"></pagation>
-      </ModuleTransition>    
+      </ModuleTransition>
     </Common>
   </div>
 </template>
@@ -48,9 +47,10 @@ import ModuleTransition from '@theme/components/ModuleTransition'
 import pagination from '@theme/mixins/pagination'
 import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
 import { getOneColor } from '@theme/helpers/other'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [pagination],
+  mixins: [pagination, moduleTransitonMixin],
   components: { Common, NoteAbstract, ModuleTransition },
 
   data () {
@@ -125,6 +125,7 @@ export default {
       font-size: 13px;
       box-shadow var(--box-shadow)
       transition: all .5s
+      background-color var(--background-color)
       &:hover, &.active {
         background $accentColor
         a span.category-name {
diff --git a/layouts/Tag.vue b/layouts/Tag.vue
index f342e4e..ea31b36 100644
--- a/layouts/Tag.vue
+++ b/layouts/Tag.vue
@@ -5,15 +5,16 @@
       <!-- 标签集合 -->
       <ModuleTransition>
         <TagList
-          v-if="recoShowModule"
-          class="tags" 
-          :currentTag="$currentTags.key" @getCurrentTag="tagClick"></TagList>
+          v-show="recoShowModule"
+          class="tags"
+          :currentTag="$currentTags.key"
+          @getCurrentTag="tagClick"></TagList>
       </ModuleTransition>
 
       <!-- 博客列表 -->
       <ModuleTransition delay="0.08">
         <note-abstract
-          v-if="recoShowModule"
+          v-show="recoShowModule"
           class="list"
           :data="posts"
           :currentPage="currentPage"
@@ -23,7 +24,6 @@
       <!-- 分页 -->
       <ModuleTransition delay="0.16">
         <pagation
-          v-if="recoShowModule"
           class="pagation"
           :total="posts.length"
           :currentPage="currentPage"
@@ -40,9 +40,10 @@ import TagList from '@theme/components/TagList'
 import pagination from '@theme/mixins/pagination'
 import ModuleTransition from '@theme/components/ModuleTransition'
 import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [pagination],
+  mixins: [pagination, moduleTransitonMixin],
   components: { Common, NoteAbstract, TagList, ModuleTransition },
 
   data () {
diff --git a/layouts/Tags.vue b/layouts/Tags.vue
index 0862ddb..5c4019e 100644
--- a/layouts/Tags.vue
+++ b/layouts/Tags.vue
@@ -4,15 +4,15 @@
       <!-- 标签集合 -->
       <ModuleTransition>
         <TagList
-          v-if="recoShowModule"
-          :currentTag="currentTag" 
+          v-show="recoShowModule"
+          :currentTag="currentTag"
           @getCurrentTag="tagClick"></TagList>
       </ModuleTransition>
 
       <!-- 博客列表 -->
-      <ModuleTransition delay="0.08">    
+      <ModuleTransition delay="0.08">
         <note-abstract
-          v-if="recoShowModule"
+          v-show="recoShowModule"
           class="list"
           :data="$recoPosts"
           :currentPage="currentPage"
@@ -23,7 +23,6 @@
       <!-- 分页 -->
       <ModuleTransition delay="0.16">
         <pagation
-          v-if="recoShowModule"
           class="pagation"
           :total="$recoPosts.length"
           :currentPage="currentPage"
@@ -39,9 +38,10 @@ import TagList from '@theme/components/TagList'
 import NoteAbstract from '@theme/components/NoteAbstract'
 import pagination from '@theme/mixins/pagination'
 import ModuleTransition from '@theme/components/ModuleTransition'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [pagination],
+  mixins: [pagination, moduleTransitonMixin],
   components: { Common, NoteAbstract, TagList, ModuleTransition },
   data () {
     return {
diff --git a/layouts/TimeLines.vue b/layouts/TimeLines.vue
index 9bce498..baab268 100644
--- a/layouts/TimeLines.vue
+++ b/layouts/TimeLines.vue
@@ -3,12 +3,13 @@
   <Common :sidebar="false" :isComment="false">
     <ul class="timeline-wrapper">
       <ModuleTransition >
-        <li v-if="recoShowModule" class="desc">Yesterday Once More!</li>
-      </ModuleTransition> 
-      <ModuleTransition 
+        <li v-show="recoShowModule" class="desc">Yesterday Once More!</li>
+      </ModuleTransition>
+      <ModuleTransition
         :delay="String(0.08 * (index + 1))"
-        v-for="(item, index) in $recoPostsForTimeline" :key="index">
-        <li v-if="recoShowModule">
+        v-for="(item, index) in $recoPostsForTimeline"
+        :key="index">
+        <li v-show="recoShowModule">
           <h3 class="year">{{item.year}}</h3>
           <ul class="year-wrapper">
             <li v-for="(subItem, subIndex) in item.data" :key="subIndex">
@@ -17,7 +18,7 @@
             </li>
           </ul>
         </li>
-      </ModuleTransition>  
+      </ModuleTransition>
     </ul>
   </Common>
 </div>
@@ -27,8 +28,10 @@
 <script>
 import Common from '@theme/components/Common'
 import ModuleTransition from '@theme/components/ModuleTransition'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
+  mixins: [moduleTransitonMixin],
   name: 'TimeLine',
   components: { Common, ModuleTransition },
   filters: {
@@ -68,6 +71,7 @@ export default {
     position: absolute;
     top: 14px;
     left: 0;
+    z-index: -1;
     margin-left: -2px;
     width: 4px;
     height: 100%;
@@ -81,7 +85,7 @@ export default {
       content: " ";
       position: absolute;
       z-index 2;
-      left: -19px;
+      left: -20px;
       top: 50%;
       margin-left: -4px;
       margin-top: -4px;
diff --git a/mixins/app.js b/mixins/moduleTransiton.js
similarity index 100%
rename from mixins/app.js
rename to mixins/moduleTransiton.js
diff --git a/package.json b/package.json
index eb67ee7..5d8b573 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.2.0-alpha.5",
+  "version": "1.2.0-alpha.11",
   "description": "A simple and beautiful vuepress Blog & Doc theme.",
   "main": "index.js",
   "scripts": {
@@ -27,24 +27,23 @@
   "_from": "vuepress-theme-reco@0.2.1",
   "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
   "dependencies": {
-    "@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.5",
-    "@vuepress-reco/vuepress-plugin-extract-code": "^1.0.3",
-    "@vuepress-reco/vuepress-plugin-loading-page": "^1.0.4",
-    "@vuepress-reco/vuepress-plugin-pagation": "^1.0.4",
-    "@vuepress-reco/vuepress-plugin-screenfull": "^1.0.1",
-    "@vuepress-reco/vuepress-plugin-comments": "^1.0.8",
+    "@vuepress-reco/vuepress-plugin-back-to-top": "1.0.8",
+    "@vuepress-reco/vuepress-plugin-extract-code": "1.0.3",
+    "@vuepress-reco/vuepress-plugin-loading-page": "1.0.5",
+    "@vuepress-reco/vuepress-plugin-pagation": "1.0.6",
+    "@vuepress-reco/vuepress-plugin-comments": "1.0.11",
     "@vuepress/plugin-medium-zoom": "1.2.0",
     "@vuepress/plugin-blog": "1.3.0",
-    "docsearch.js": "^2.5.2",
+    "docsearch.js": "2.5.2",
     "leancloud-storage": "3.13.2",
     "valine": "1.3.6",
     "vue-click-outside": "1.0.7",
     "md5": "2.2.1"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.4.0",
-    "eslint-plugin-vue": "^5.2.3",
+    "babel-eslint": "10.0.3",
+    "eslint": "6.4.0",
+    "eslint-plugin-vue": "5.2.3",
     "vuepress": "1.2.0"
   }
 }
diff --git a/styles/loadMixin.styl b/styles/loadMixin.styl
deleted file mode 100644
index 960afa0..0000000
--- a/styles/loadMixin.styl
+++ /dev/null
@@ -1,11 +0,0 @@
-load-start(){
-  transform:translateY(-20px);
-  opacity 0
-}
-
-load-end($delayTime){
-  transition:all .25s;
-  transform:translateY(0);
-  transition-delay: $delayTime
-  opacity 1
-}
\ No newline at end of file
diff --git a/styles/mode.styl b/styles/mode.styl
index 802f378..3852641 100644
--- a/styles/mode.styl
+++ b/styles/mode.styl
@@ -6,6 +6,7 @@
   --border-color $borderColor
   --bgm-bg-color $bgmBgColor
   --code-color $codeColor
+  --mask-color $maskColor
   @media (prefers-color-scheme: dark)
     --background-color $backgroundColorDark
     --box-shadow $boxShadowDark
@@ -14,3 +15,4 @@
     --border-color $borderColorDark
     --bgm-bg-color $bgmBgColorDark
     --code-color $codeColorDark
+    --mask-color $maskColorDark
diff --git a/styles/palette.styl b/styles/palette.styl
index ce3ca02..94e86ee 100644
--- a/styles/palette.styl
+++ b/styles/palette.styl
@@ -21,3 +21,6 @@ $codeColorDark ?= rgba(0, 0, 0, .3)
 
 $bgmBgColor ?= rgba(255, 255, 255, .7)
 $bgmBgColorDark ?= rgba(0, 0, 0, .7)
+
+$maskColor ?= #888
+$maskColorDark ?= #000
diff --git a/styles/theme.styl b/styles/theme.styl
index fe3391d..1f5ce0f 100644
--- a/styles/theme.styl
+++ b/styles/theme.styl
@@ -212,119 +212,3 @@ th, td
 /************** 流程图的滚动条 **************/
 .vuepress-flowchart
   overflow: auto
-
-/************** 腾讯 404 公益 **************/
-
-.mod_404 .desc {
-  .desc_link {
-    display: inline-block
-    // margin: 20px 0
-    background: #424242!important
-    color: #ffffff
-    padding: 6px 20px!important
-    text-decoration: none!important
-    border-radius: 4px
-  }
-}
-
-@media screen and (max-width: 720px) {
-  .mod_404 .desc {
-    margin: 50px 0
-  }
-}
-
-/************** 评论功能 **************/
-
-.comments-wrapper
-  .valine-wrapper
-    #valine.v
-      .vwrap
-        background: var(--code-color)
-        // box-shadow: var(--box-shadow)
-        .vcontrol
-          .vsubmit
-            background: var(--code-color)
-      .vinfo
-        padding-left: .6rem
-      .vlist
-        padding: 0 .6rem
-        border-radius: $borderRadius
-        .vcard
-          .vquote
-            margin-left: 0
-            border-left: 1px dashed var(--border-color)
-          .vimg
-            border-radius: $borderRadius
-            box-shadow: var(--box-shadow)
-            border: none
-        .vh
-          border-bottom: 1px dashed var(--border-color)
-          .vhead
-            .vsys
-              box-shadow: var(--box-shadow)
-              background: var(--code-color)
-              color: var(--text-color)
-          .vmeta
-            margin-bottom: 1rem
-            .vat
-              margin-right: .3rem
-              background: var(--code-color)
-              box-shadow: var(--box-shadow)
-              border-radius: $borderRadius
-              padding: 0 .4rem
-              color: var(--text-color)
-              border: 1px solid var(--border-color)
-          .vcontent
-            background: var(--code-color)
-            box-shadow: var(--box-shadow)
-            border-radius: $borderRadius
-            margin: 0 .3rem
-            padding: .1rem .6rem .05rem .6rem
-            p .at
-              color: #1abc9c
-            &.expand:before
-              z-index 1
-              background: linear-gradient(180deg, rgba(255,255,255,0),  var(--background-color))
-            &.expand:after
-              background: var(--background-color)
-              color: var(--color-color)
-      .info
-        padding-right: .6rem
-
-/************** 分页 **************/
-.pagation
-  .pagation-list
-    background: var(--background-color)!important
-    .jump, .jumpinp input
-      background-color: var(--background-color)
-      color: var(--text-color)
-      box-shadow: var(--box-shadow)
-      border 1px solid var(--border-color)!important
-
-/************** 回到顶部 **************/
-.back-to-ceiling
-  background-color: var(--background-color)!important
-  box-shadow: var(--box-shadow)!important
-
-/********* 悬浮卡片背景颜色 **********/
-
-.navbar
-  background var(--background-color)
-  .links
-    background var(--background-color)
-
-.home-blog
-  .home-blog-wrapper
-    .info-wrapper
-      background var(--background-color)
-
-.abstract-item
-  background var(--background-color)
-
-.category-wrapper
-  .category-item
-    background var(--background-color)
-
-.pagation
-  .jump
-    background var(--background-color)