diff --git a/package.json b/package.json
index 54330ab8..200d1669 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   "devDependencies": {
     "algoliasearch": "^4.2.0",
     "vuepress": "^1.4.1",
-    "vuepress-theme-reco": "^1.4.5",
     "vuepress-plugin-autobar": "github:boboidream/vuepress-bar"
   },
   "description": "易懂的算法教程",
diff --git a/website/.vuepress/config.js b/website/.vuepress/config.js
index 131a9a4a..fbf43a88 100644
--- a/website/.vuepress/config.js
+++ b/website/.vuepress/config.js
@@ -1,38 +1,56 @@
 module.exports = {
-  title: "小浩算法",
-  plugins: [require('../../lib/autobar.js'), require('../../lib/Notification.js')],
-  description: '和小浩一起学算法',
-  // root : "./hell-algorithm",
-  theme: "reco",
-  themeConfig: {
-    logo: '/logo.png',
-    sidebar: "auto",
-    searchPlaceholder: "搜索：KMP",
-    nav: [
-      {text: 'GitHub', link: 'https://github.com/geekxh/hello-algorithm', icon: 'reco-github'}
-    ],
-    head: [
-      ['link', {rel: 'shortcut icon', href: '/favicon.ico'}]
-    ],
-    type: 'blog',
-    search: true,
-    searchMaxSuggestions: 10,
-    lastUpdated: '文章修订于',
-    author: '程序员小浩',
-    authorAvatar: '/code.png',
-    startYear: '2019',
-    valineConfig: {
-      visitor: false,
-      enable: true,
-      placeholder: "留下你的问题，或者你想要的资源...",
-      avatar: "wavatar",
-      requiredFields: ['nick'],
-      appId: 'sINkW5sfpPxoqDyBqbpvTN79-gzGzoHsz',
-      appKey: '5tkDVulRNyjuAbCUekxU6zHW',
+    title: "和小浩学编程",
+    plugins: [
+        require('../../lib/autobar.js'),
+        require('../../lib/Notification.js')],
+    description: '编程是一件有趣的事情',
+    // root : "./hell-algorithm",
+    theme: "reco",
+    themeConfig: {
+        logo: '/logo.png',
+        sidebar: "auto",
+        searchPlaceholder: "搜索：KMP",
+        nav: [
+            {
+                text: 'GitHub',
+                link: 'https://githubd.com/geekxh/hello-algorithm',
+                icon: 'reco-github'
+            },
+            {
+                text: 'TimeLine',
+                link: '/timeline/',
+                icon: 'reco-date'
+            }
+        ],
+        // 博客配置
+        blogConfig: {
+            tag: {
+                location: 3,     // 在导航栏菜单中所占的位置，默认3
+                text: 'Tag'      // 默认文案 “标签”
+            }
+        },
+        head: [
+            ['link', {rel: 'shortcut icon', href: '/favicon.ico'}]
+        ],
+        type: 'blog',
+        search: true,
+        searchMaxSuggestions: 10,
+        lastUpdated: '文章修订于',
+        author: '程序员小浩',
+        authorAvatar: '/code.png',
+        startYear: '2019',
+        valineConfig: {
+            visitor: false,
+            enable: true,
+            placeholder: "留下你的问题，或者你想要的资源...",
+            avatar: "wavatar",
+            requiredFields: ['nick'],
+            appId: 'sINkW5sfpPxoqDyBqbpvTN79-gzGzoHsz',
+            appKey: '5tkDVulRNyjuAbCUekxU6zHW',
+        },
+        noFoundPageByTencent: false
     },
-    noFoundPageByTencent: false
-  },
-  markdown: {
-    lineNumbers: true,
-  }
+    markdown: {
+        lineNumbers: true,
+    }
 }
\ No newline at end of file
diff --git a/website/.vuepress/theme/LICENSE b/website/.vuepress/theme/LICENSE
new file mode 100644
index 00000000..84b7cce6
--- /dev/null
+++ b/website/.vuepress/theme/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 reco_luan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/website/.vuepress/theme/README.md b/website/.vuepress/theme/README.md
new file mode 100644
index 00000000..2b6d41e4
--- /dev/null
+++ b/website/.vuepress/theme/README.md
@@ -0,0 +1,88 @@
+<p align="center"><a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer"><img width="150" src="https://i.loli.net/2020/01/13/TPKA1wp6s4ufSm2.png" alt="Vue logo"></a></p>
+
+<p align="center">
+<img src="https://img.shields.io/badge/leancloud--storage-3.13.0-orange.svg">
+<img src="https://img.shields.io/badge/valine-1.3.6-blue.svg">
+<img src="https://img.shields.io/badge/vue--click--outside-1.0.7-blue.svg">
+
+</p>
+
+## Introduce
+
+1. 这是一个vuepress主题，旨在添加博客所需的分类、标签墙、分页、评论等功能；
+2. 主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
+3. 效果：[午后南杂](https://www.recoluan.com) 
+4. 文档：[vuepress-theme-reco-doc](https://vuepress-theme-reco.recoluan.com)
+
+## Quick start
+
+**npx**
+
+```
+npx @vuepress-reco/theme-cli init my-blog
+```
+
+**npm**
+
+```bash
+# init
+npm install @vuepress-reco/theme-cli -g
+theme-cli init my-blog
+
+# install
+cd my-blog
+npm install
+
+# run
+npm run dev
+
+# build
+npm run build
+```
+
+**yarn**
+
+```bash
+# init
+yarn global add @vuepress-reco/theme-cli
+theme-cli init my-blog
+
+# install
+cd my-blog
+yarn install
+
+# run
+yarn dev
+
+# build
+yarn build
+```
+
+## Preview
+
+![size.png](https://i.loli.net/2020/01/13/nCbXp13lRG2TNeD.png)
+
+![style.png](https://i.loli.net/2020/01/13/ke1VirShQRLnEd7.png)
+
+![dark.png](https://i.loli.net/2020/01/13/Lj6XbwdmDFCYH9k.png)
+
+![home.png](https://i.loli.net/2020/01/13/nra3kbYSlxojmw4.png)
+
+## Contributors
+
+**衷心感谢为此项目贡献过宝贵代码的朋友们**
+
+|昵称|贡献记录|
+|:-:|-|
+|[kangxu](https://github.com/kangxukangxu)|[vuepress-theme-reco@0.x](https://github.com/recoluan/vuepress-theme-reco/commit/ec7426a88d50cf8d9f90a7ad9b731a10da7f438b)|
+|[Ekko](https://github.com/danranVm)|[vuepress-theme-reco-demo@1.x](https://github.com/recoluan/vuepress-theme-reco-demo/commit/6d2bbe919e7f6564b8c8173558d197e38e024dc5)|
+
+**衷心感谢美女设计师**
+
+|昵称|贡献内容|
+|:-:|-|
+|[Zoey]()|主题图标调整定稿|
+|冰冰|主题图标初稿|
+
+## License
+[MIT](https://github.com/recoluan/vuepress-theme-reco/blob/master/LICENSE)
diff --git a/website/.vuepress/theme/components/AlgoliaSearchBox.vue b/website/.vuepress/theme/components/AlgoliaSearchBox.vue
new file mode 100644
index 00000000..5add0002
--- /dev/null
+++ b/website/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -0,0 +1,170 @@
+<template>
+  <form
+    id="search-form"
+    class="algolia-search-wrapper search-box"
+    role="search"
+  >
+    <i class="iconfont reco-search"></i>
+    <input
+      id="algolia-search-input"
+      class="search-query"
+      :placeholder="placeholder"
+    >
+  </form>
+</template>
+
+<script>
+export default {
+  props: ['options'],
+  data () {
+    return {
+      placeholder: undefined
+    }
+  },
+  mounted () {
+    this.initialize(this.options, this.$lang)
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+  },
+
+  methods: {
+    initialize (userOptions, lang) {
+      Promise.all([
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
+      ]).then(([docsearch]) => {
+        docsearch = docsearch.default
+        const { algoliaOptions = {}} = userOptions
+        docsearch(Object.assign(
+          {},
+          userOptions,
+          {
+            inputSelector: '#algolia-search-input',
+            // #697 Make docsearch work well at i18n mode.
+            algoliaOptions: Object.assign({
+              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+            }, algoliaOptions),
+            handleSelected: (input, event, suggestion) => {
+              const { pathname, hash } = new URL(suggestion.url)
+              this.$router.push(`${pathname}${hash}`)
+            }
+          }
+        ))
+      })
+    },
+
+    update (options, lang) {
+      this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
+      this.initialize(options, lang)
+    }
+  },
+
+  watch: {
+    $lang (newValue) {
+      this.update(this.options, newValue)
+    },
+
+    options (newValue) {
+      this.update(newValue, this.$lang)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/mode.styl'
+.algolia-search-wrapper
+  & > span
+    vertical-align middle
+  .algolia-autocomplete
+    line-height normal
+    .ds-dropdown-menu
+      background-color var(--background-color)
+      border-radius $borderRadius
+      font-size 15px
+      margin 6px 0 0
+      padding 4px
+      text-align left
+      box-shadow var(--box-shadow)
+      &:before
+        display none
+      [class*=ds-dataset-]
+        background-color var(--background-color)
+        border none
+        padding 0
+      .ds-suggestions
+        margin-top 0
+      .ds-suggestion
+        border-bottom 1px solid var(--border-color)
+    .algolia-docsearch-suggestion--highlight
+      color $accentColor
+    .algolia-docsearch-suggestion
+      border-color var(--border-color)
+      padding 0
+      .algolia-docsearch-suggestion--category-header
+        padding 5px 10px
+        margin-top 0
+        background $accentColor
+        color #fff
+        font-weight 600
+        .algolia-docsearch-suggestion--highlight
+          background rgba(255, 255, 255, 0.6)
+      .algolia-docsearch-suggestion--wrapper
+        background var(--background-color)
+        padding 0
+      .algolia-docsearch-suggestion--title
+        font-weight 600
+        margin-bottom 0
+        color var(--text-color)
+      .algolia-docsearch-suggestion--subcategory-column
+        vertical-align top
+        padding 5px 7px 5px 5px
+        border-color var(--border-color)
+        background var(--background-color)
+        &:after
+          display none
+      .algolia-docsearch-suggestion--subcategory-column-text
+        color var(--text-color)
+    .algolia-docsearch-footer
+      border-color var(--border-color)
+      background var(--background-color)
+    .ds-cursor .algolia-docsearch-suggestion--content
+      background-color #e7edf3 !important
+      color $textColor
+
+@media (min-width: $MQMobile)
+  .algolia-search-wrapper
+    .algolia-autocomplete
+      .algolia-docsearch-suggestion
+        .algolia-docsearch-suggestion--subcategory-column
+          float none
+          width 150px
+          min-width 150px
+          display table-cell
+        .algolia-docsearch-suggestion--content
+          float none
+          display table-cell
+          width 100%
+          vertical-align top
+        .ds-dropdown-menu
+          min-width 515px !important
+
+@media (max-width: $MQMobile)
+  .algolia-search-wrapper
+    .ds-dropdown-menu
+      min-width calc(100vw - 4rem) !important
+      max-width calc(100vw - 4rem) !important
+    .algolia-docsearch-suggestion--wrapper
+      padding 5px 7px 5px 5px !important
+    .algolia-docsearch-suggestion--subcategory-column
+      padding 0 !important
+      background var(--border-color) !important
+    .algolia-docsearch-suggestion--subcategory-column-text:after
+      content " > "
+      font-size 10px
+      line-height 14.4px
+      display inline-block
+      width 5px
+      margin -3px 3px 0
+      vertical-align middle
+
+</style>
diff --git a/website/.vuepress/theme/components/Common.vue b/website/.vuepress/theme/components/Common.vue
new file mode 100644
index 00000000..bfcd929d
--- /dev/null
+++ b/website/.vuepress/theme/components/Common.vue
@@ -0,0 +1,268 @@
+<template>
+  <div
+    class="theme-container"
+    :class="pageClasses"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd">
+    <div v-if="!absoluteEncryption">
+      <transition name="fade">
+        <LoadingPage v-show="firstLoad" class="loading-wrapper" />
+      </transition>
+      <transition name="fade">
+        <Password v-show="!isHasKey" class="password-wrapper-out" key="out" />
+      </transition>
+      <div :class="{ 'hide': firstLoad || !isHasKey }">
+        <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-show="!isHasPageKey" :isPage="true" class="password-wrapper-in" key="in"></Password>
+        <div :class="{ 'hide': !isHasPageKey }">
+          <slot></slot>
+        </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>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from '@theme/components/Navbar'
+import Sidebar from '@theme/components/Sidebar'
+import { resolveSidebarItems } from '@theme/helpers/utils'
+import Password from '@theme/components/Password'
+import { setTimeout } from 'timers'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
+
+export default {
+  mixins: [moduleTransitonMixin],
+
+  components: { Sidebar, Navbar, Password },
+
+  props: {
+    sidebar: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      isSidebarOpen: false,
+      isHasKey: true,
+      isHasPageKey: true,
+      firstLoad: true
+    }
+  },
+
+  computed: {
+    absoluteEncryption () {
+      return this.$themeConfig.keyPage && this.$themeConfig.keyPage.absoluteEncryption === true
+    },
+
+    shouldShowNavbar () {
+      const { themeConfig } = this.$site
+      const { frontmatter } = this.$page
+
+      if (
+        frontmatter.navbar === false ||
+        themeConfig.navbar === false
+      ) return false
+
+      return (
+        this.$title ||
+        themeConfig.logo ||
+        themeConfig.repo ||
+        themeConfig.nav ||
+        this.$themeLocaleConfig.nav
+      )
+    },
+
+    shouldShowSidebar () {
+      const { frontmatter } = this.$page
+      return (
+        this.sidebar !== false &&
+        !frontmatter.home &&
+        frontmatter.sidebar !== false &&
+        this.sidebarItems.length
+      )
+    },
+
+    sidebarItems () {
+      return resolveSidebarItems(
+        this.$page,
+        this.$page.regularPath,
+        this.$site,
+        this.$localePath
+      )
+    },
+
+    pageClasses () {
+      const userPageClass = this.$frontmatter.pageClass
+      return [
+        {
+          'no-navbar': !this.shouldShowNavbar,
+          'sidebar-open': this.isSidebarOpen,
+          'no-sidebar': !this.shouldShowSidebar
+        },
+        userPageClass
+      ]
+    }
+  },
+
+  mounted () {
+    this.$router.afterEach(() => {
+      this.isSidebarOpen = false
+    })
+
+    this.hasKey()
+    this.hasPageKey()
+    this.handleLoading()
+  },
+
+  methods: {
+    hasKey () {
+      const keyPage = this.$themeConfig.keyPage
+      if (!keyPage || !keyPage.keys || keyPage.keys.length === 0) {
+        this.isHasKey = true
+        return
+      }
+
+      let { keys } = keyPage
+      keys = keys.map(item => item.toLowerCase())
+      this.isHasKey = keys && keys.indexOf(sessionStorage.getItem('key')) > -1
+    },
+    hasPageKey () {
+      let pageKeys = this.$frontmatter.keys
+      if (!pageKeys || pageKeys.length === 0) {
+        this.isHasPageKey = true
+        return
+      }
+
+      pageKeys = pageKeys.map(item => item.toLowerCase())
+
+      this.isHasPageKey = pageKeys.indexOf(sessionStorage.getItem(`pageKey${window.location.pathname}`)) > -1
+    },
+    toggleSidebar (to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+    },
+
+    // side swipe
+    onTouchStart (e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      }
+    },
+
+    onTouchEnd (e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x
+      const dy = e.changedTouches[0].clientY - this.touchStart.y
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true)
+        } else {
+          this.toggleSidebar(false)
+        }
+      }
+    },
+
+    handleLoading () {
+      const time = this.$frontmatter.home && sessionStorage.getItem('firstLoad') == undefined ? 1000 : 0
+      setTimeout(() => {
+        this.firstLoad = false
+        if (sessionStorage.getItem('firstLoad') == undefined) sessionStorage.setItem('firstLoad', false)
+      }, time)
+    }
+  },
+
+  watch: {
+    $frontmatter (newVal, oldVal) {
+      this.hasKey()
+      this.hasPageKey()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.theme-container
+  .loading-wrapper
+    position absolute
+    z-index 22
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+  .password-wrapper-out
+    position absolute
+    z-index 21
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+  .password-wrapper-in
+    position absolute
+    z-index 8
+    top 0
+    bottom 0
+    left 0
+    right 0
+  .hide
+    height 100vh
+    overflow hidden
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>
diff --git a/website/.vuepress/theme/components/DropdownLink.vue b/website/.vuepress/theme/components/DropdownLink.vue
new file mode 100644
index 00000000..058b3bf5
--- /dev/null
+++ b/website/.vuepress/theme/components/DropdownLink.vue
@@ -0,0 +1,183 @@
+<template>
+  <div
+    class="dropdown-wrapper"
+    :class="{ open }"
+  >
+    <a
+      class="dropdown-title"
+      @click="toggle"
+    >
+      <span class="title">
+        <i :class="`iconfont ${item.icon}`"></i>
+        {{ item.text }}
+      </span>
+      <span
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      ></span>
+    </a>
+
+    <DropdownTransition>
+      <ul
+        class="nav-dropdown"
+        v-show="open"
+      >
+        <li
+          class="dropdown-item"
+          :key="subItem.link || index"
+          v-for="(subItem, index) in item.items"
+        >
+          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+
+          <ul
+            class="dropdown-subitem-wrapper"
+            v-if="subItem.type === 'links'"
+          >
+            <li
+              class="dropdown-subitem"
+              :key="childSubItem.link"
+              v-for="childSubItem in subItem.items"
+            >
+              <NavLink :item="childSubItem"/>
+            </li>
+          </ul>
+
+          <NavLink
+            v-else
+            :item="subItem"
+          />
+        </li>
+      </ul>
+    </DropdownTransition>
+  </div>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink'
+import DropdownTransition from '@theme/components/DropdownTransition'
+
+export default {
+  components: { NavLink, DropdownTransition },
+
+  data () {
+    return {
+      open: false
+    }
+  },
+
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  methods: {
+    toggle () {
+      this.open = !this.open
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/mode.styl'
+
+.dropdown-wrapper
+  cursor pointer
+  .dropdown-title
+    display block
+    &:hover
+      border-color transparent
+    .arrow
+      vertical-align middle
+      margin-top -1px
+      margin-left 0.4rem
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid var(--border-color)
+        padding 0.45rem 1.5rem 0 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      a
+        display block
+        line-height 1.7rem
+        position relative
+        border-bottom none
+        font-weight 400
+        margin-bottom 0
+        padding 0 1.5rem 0 1.25rem
+        &:hover
+          color $accentColor
+        &.router-link-active
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 3px solid transparent
+            border-bottom 3px solid transparent
+            position absolute
+            top calc(50% - 2px)
+            left 9px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    .nav-dropdown
+      transition height .1s ease-out
+      overflow hidden
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    height 1.8rem
+    &:hover .nav-dropdown
+      // override the inline style.
+      display block !important
+    .dropdown-title .arrow
+      // make the arrow always down at desktop
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 6px solid var(--text-color-sub)
+      border-bottom 0
+    .nav-dropdown
+      display none
+      // Avoid height shaked by clicking
+      height auto !important
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color var(--background-color)
+      padding 0.6rem 0
+      box-shadow: var(--box-shadow);
+      text-align left
+      border-radius $borderRadius
+      white-space nowrap
+      margin 0
+</style>
diff --git a/website/.vuepress/theme/components/DropdownTransition.vue b/website/.vuepress/theme/components/DropdownTransition.vue
new file mode 100644
index 00000000..8c711a15
--- /dev/null
+++ b/website/.vuepress/theme/components/DropdownTransition.vue
@@ -0,0 +1,33 @@
+<template>
+  <transition
+    name="dropdown"
+    @enter="setHeight"
+    @after-enter="unsetHeight"
+    @before-leave="setHeight"
+  >
+    <slot/>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'DropdownTransition',
+
+  methods: {
+    setHeight (items) {
+      // explicitly set height so that it can be transitioned
+      items.style.height = items.scrollHeight + 'px'
+    },
+
+    unsetHeight (items) {
+      items.style.height = ''
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.dropdown-enter, .dropdown-leave-to
+  height 0 !important
+
+</style>
diff --git a/website/.vuepress/theme/components/Footer.vue b/website/.vuepress/theme/components/Footer.vue
new file mode 100644
index 00000000..74a98809
--- /dev/null
+++ b/website/.vuepress/theme/components/Footer.vue
@@ -0,0 +1,81 @@
+<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@${version}`}}</a>
+    </span>
+    <span v-if="$themeConfig.record">
+      <i class="iconfont reco-beian"></i>
+      <a :href="http://github.com/$themeConfig.recordLink%20||'#'">{{ $themeConfig.record }}</a>
+    </span>
+    <span>
+      <i class="iconfont reco-copyright"></i>
+      <a>
+        <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
+        &nbsp;&nbsp;
+        <span v-if="$themeConfig.startYear && $themeConfig.startYear != (new Date().getFullYear())">{{ $themeConfig.startYear }} - </span>
+        {{ new Date().getFullYear() }}
+      </a>
+    </span>
+    <span v-show="$themeConfig.valineConfig !== undefined">
+      <i class="iconfont reco-eye"></i>
+      <AccessNumber idVal="/" />
+    </span>
+    <p class="cyber-security" v-if="$themeConfig.cyberSecurityRecord">
+      <img src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" alt="">
+      <a :href="http://github.com/$themeConfig.cyberSecurityLink%20||'#'">{{ $themeConfig.cyberSecurityRecord }}</a>
+    </p>
+    <Comments :isShowComments="false"/>
+  </div>
+</template>
+
+<script>
+import { version } from '../package.json'
+export default {
+  data () {
+    return {
+      version
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .footer-wrapper {
+    padding: 1.5rem 2.5rem;
+    border-top: 1px solid var(--border-color);
+    text-align: center;
+    color: lighten($textColor, 25%);
+    a {
+      font-size 14px
+    }
+    > span {
+      margin-left 1rem
+      > i {
+        margin-right .5rem
+      }
+    }
+    .cyber-security {
+      img {
+        margin-right .5rem
+        width 20px
+        height 20px
+        vertical-align middle
+      }
+      a {
+        vertical-align middle
+      }
+    }
+  }
+
+@media (max-width: $MQMobile) {
+  .footer {
+    text-align: left!important;
+    > span {
+      display block
+      margin-left 0
+      line-height 2rem
+    }
+  }
+}
+</style>
diff --git a/website/.vuepress/theme/components/FriendLink.vue b/website/.vuepress/theme/components/FriendLink.vue
new file mode 100644
index 00000000..9d730e5e
--- /dev/null
+++ b/website/.vuepress/theme/components/FriendLink.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="friend-link-wrapper">
+    <div
+      class="friend-link-item"
+      v-for="(item, index) in dataAddColor"
+      :key="index"
+      @mouseenter="showDetail($event)"
+      @mouseleave="hideDetail($event)"
+      target="_blank">
+      <span
+        class="list-style"
+        :style="{ 'backgroundColor': item.color }">
+      </span>
+      {{item.title}}
+      <transition name="fade">
+        <div class="popup-window-wrapper">
+          <div
+            class="popup-window"
+            :style="popupWindowStyle"
+            ref="popupWindow">
+            <div class="logo">
+              <img :src="http://github.com/getImgUrl(item)" />
+            </div>
+            <div class="info">
+              <div class="title">
+                <h4>{{ item.title }}</h4>
+                <a
+                  class="btn-go"
+                  :style="{ 'backgroundColor': item.color }"
+                  :href="http://github.com/item.link"
+                  target="_blank">GO</a>
+              </div>
+              <p v-if="item.desc">{{ item.desc }}</p>
+            </div>
+          </div>
+        </div>
+
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import md5 from 'md5'
+import { getOneColor } from '@theme/helpers/other'
+
+export default {
+  data () {
+    return {
+      popupWindowStyle: {}
+    }
+  },
+  computed: {
+    dataAddColor () {
+      let { friendLink } = this.$themeConfig
+      if (friendLink && friendLink.length > 0) {
+        friendLink = friendLink.map(item => ({
+          ...item,
+          color: getOneColor()
+        }))
+        return friendLink
+      }
+      return []
+    }
+  },
+  methods: {
+    getMd5 (str) {
+      return md5(str)
+    },
+    showDetail (e) {
+      const currentDom = e.target
+      const popupWindowWrapper = currentDom.querySelector('.popup-window-wrapper')
+      const popupWindow = currentDom.querySelector('.popup-window')
+      popupWindowWrapper.style.display = 'block'
+      const { clientWidth } = currentDom
+      const {
+        clientWidth: windowWidth,
+        clientHeight: windowHeight
+      } = popupWindow
+      this.popupWindowStyle = {
+        left: (clientWidth - windowWidth) / 2 + 'px',
+        top: -windowHeight + 'px'
+      }
+      this.$nextTick(() => {
+        this._adjustPosition(currentDom.querySelector('.popup-window'))
+      })
+    },
+    hideDetail (e) {
+      const currentDom = e.target
+      currentDom.querySelector('.popup-window-wrapper').style.display = 'none'
+    },
+    getImgUrl (info) {
+      const { logo, email } = info
+      if (logo && /^http/.test(logo)) return logo
+      if (logo && !/^http/.test(logo)) return this.$withBase(logo)
+      return `//1.gravatar.com/avatar/${this.getMd5(email || '')}?s=50&amp;d=mm&amp;r=x`
+    },
+    _adjustPosition (dom) {
+      const { offsetWidth } = document.body
+      const { x, width } = dom.getBoundingClientRect()
+      const distanceToRight = offsetWidth - (x + width)
+      if (distanceToRight < 0) {
+        const { offsetLeft } = dom
+        this.popupWindowStyle = {
+          ...this.popupWindowStyle,
+          left: offsetLeft + distanceToRight + 'px'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+
+.friend-link-wrapper
+  position relative
+  margin 30px 0
+  .friend-link-item
+    position relative
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 4px 8px 4px 20px;
+    line-height 20px
+    display: inline-block;
+    cursor: default;
+    border-radius: $borderRadius
+    font-size: 13px;
+    box-shadow var(--box-shadow)
+    transition: all .5s
+    .list-style
+      position absolute
+      left .4rem
+      top 0
+      bottom 0
+      margin auto
+      display block
+      width .4rem
+      height .4rem
+      border-radius .1rem
+      background $accentColor
+      content ''
+    .popup-window-wrapper
+      display none
+      .popup-window
+        position absolute
+        display flex
+        background var(--background-color)
+        box-shadow var(--box-shadow)
+        border-radius $borderRadius
+        box-sizing border-box
+        padding .8rem 1rem
+        width 300px
+        .logo
+          margin-right .4rem
+          width 2rem
+          height 2rem
+          flex 0 0 2rem
+          border-radius $borderRadius
+          overflow hidden
+          img
+            width 2rem
+            height 2rem
+        .info
+          flex 0 0 85%
+          width 85%
+          .title
+            display flex
+            align-items center
+            justify-content space-between
+            height 2rem
+            h4
+              margin .2rem 0
+              flex 0 0 86%
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            .btn-go
+              width 1.4rem
+              height 1.2rem
+              border-radius $borderRadius
+              font-size .1rem
+              color #ffffff
+              text-align center
+              line-height 1.2rem
+              cursor pointer
+              transition all .5s
+              &:hover
+                transform scale(1.1)
+
+.fade-enter-active, .fade-leave-active
+  transition opacity .5s
+.fade-enter, .fade-leave-to
+  opacity 0
+</style>
diff --git a/website/.vuepress/theme/components/Home.vue b/website/.vuepress/theme/components/Home.vue
new file mode 100644
index 00000000..4e31d2ce
--- /dev/null
+++ b/website/.vuepress/theme/components/Home.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="home">
+    <div class="hero">
+      <ModuleTransition>
+        <img
+          v-if="recoShowModule && $frontmatter.heroImage"
+          :style="heroImageStyle || {}"
+          :src="http://github.com/$withBase($frontmatter.heroImage)"
+          alt="hero">
+      </ModuleTransition>
+      <ModuleTransition delay="0.04">
+        <h1 v-if="recoShowModule && $frontmatter.heroText !== null">{{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}</h1>
+      </ModuleTransition>
+      <ModuleTransition delay="0.08">
+        <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
+          {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
+        </p>
+      </ModuleTransition>
+      <ModuleTransition delay="0.16">
+        <p class="action" v-if="recoShowModule && $frontmatter.actionText && $frontmatter.actionLink">
+          <NavLink class="action-button" :item="actionLink"/>
+        </p>
+      </ModuleTransition>
+    </div>
+
+    <ModuleTransition delay="0.24">
+      <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.32">
+      <Content class="home-center" v-show="recoShowModule" custom/>
+    </ModuleTransition>
+  </div>
+</template>
+
+<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: {
+
+    actionLink () {
+      return {
+        link: this.$frontmatter.actionLink,
+        text: this.$frontmatter.actionText
+      }
+    },
+
+    heroImageStyle () {
+      return this.$frontmatter.heroImageStyle || {
+        maxHeight: '200px',
+        margin: '6rem auto 1.5rem'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/mode.styl'
+
+.home {
+  padding: $navbarHeight 2rem 0;
+  max-width: 960px;
+  margin: 0px auto;
+
+  .hero {
+    text-align: center;
+    h1 {
+      font-size: 2.5rem;
+      color: var(--text-color);
+    }
+
+    h1, .description, .action {
+      margin: 1.8rem auto;
+    }
+
+    .description {
+      font-size: 1.6rem;
+      line-height: 1.3;
+      color: var(--text-color);
+    }
+
+    .action-button {
+      display: inline-block;
+      font-size: 1.2rem;
+      color: #fff;
+      background-color: $accentColor;
+      padding: 0.6rem 1.2rem;
+      border-radius: $borderRadius
+      transition: background-color 0.1s ease;
+      box-sizing: border-box;
+      load-start()
+
+      &:hover {
+        background-color: lighten($accentColor, 10%);
+      }
+    }
+  }
+
+  .features {
+    border-top: 1px solid var(--border-color);;
+    padding: 1.2rem 0;
+    margin-top: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: stretch;
+    justify-content: space-between;
+  }
+
+  .feature {
+    flex-grow: 1;
+    flex-basis: 30%;
+    max-width: 30%;
+    transition: all .5s
+    color: var(--text-color);
+    h2 {
+      font-size: 1.6rem;
+      font-weight: 500;
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    &:hover {
+      transform scale(1.05)
+    }
+  }
+
+//   &.reco-hide {
+//   .hero {
+//     img {
+//       load-start()
+//     }
+//     .h1 {
+//       load-start()
+//     }
+//     .description {
+//       load-start()
+//     }
+//     .huawei {
+//       load-start()
+//     }
+//     .action-button {
+//       load-start()
+//     }
+//   }
+//   .features {
+//     load-start()
+//   }
+//   .home-center {
+//     load-start()
+//     padding 0
+//   }
+// }
+
+//   &.reco-show {
+//     .hero {
+//       img {
+//         load-end(0.08s)
+//       }
+//       .h1 {
+//         load-end(0.16s)
+//       }
+//       .description {
+//         load-end(0.24s)
+//       }
+//       .huawei {
+//         load-end(0.32s)
+//       }
+//       .action-button {
+//         load-end(0.4s)
+//       }
+//     }
+//     .features {
+//       load-end(0.40s)
+//     }
+//     .home-center {
+//       load-end(0.48s)
+//     }
+//   }
+}
+
+@media (max-width: $MQMobile) {
+  .home {
+    .features {
+      flex-direction: column;
+    }
+
+    .feature {
+      max-width: 100%;
+      padding: 0 2.5rem;
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .home {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    .hero {
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+
+      h1, .description, .action {
+        margin: 1.2rem auto;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+
+    .feature {
+      h2 {
+        font-size: 1.25rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/website/.vuepress/theme/components/HomeBlog.vue b/website/.vuepress/theme/components/HomeBlog.vue
new file mode 100644
index 00000000..a4ec2dfa
--- /dev/null
+++ b/website/.vuepress/theme/components/HomeBlog.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="home-blog">
+    <div class="hero" :style="{ ...bgImageStyle }">
+      <div
+        class="mask"
+        :style="{
+      background: `url(http://github.com/$%7B$frontmatter.bgImage%20?%20$withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div>
+      <ModuleTransition>
+        <img
+          v-if="recoShowModule && $frontmatter.heroImage"
+          :style="heroImageStyle || {}"
+          :src="http://github.com/$withBase($frontmatter.heroImage)"
+          alt="hero">
+      </ModuleTransition>
+      <ModuleTransition delay="0.04">
+        <h1 v-if="recoShowModule && $frontmatter.heroText !== null">
+          {{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
+        </h1>
+      </ModuleTransition>
+
+      <ModuleTransition delay="0.08">
+        <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
+          {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
+        </p>
+      </ModuleTransition>
+    </div>
+
+    <ModuleTransition delay="0.16">
+      <div v-show="recoShowModule" class="home-blog-wrapper">
+        <div class="blog-list">
+          <!-- 博客列表 -->
+          <note-abstract
+            :data="$recoPosts"
+            :currentPage="currentPage"></note-abstract>
+          <!-- 分页 -->
+          <pagation
+            class="pagation"
+            :total="$recoPosts.length"
+            :currentPage="currentPage"
+            @getCurrentPage="getCurrentPage" />
+        </div>
+        <div class="info-wrapper">
+          <PersonalInfo/>
+          <h4><i class="iconfont reco-category"></i> {{homeBlogCfg.category}}</h4>
+          <ul class="category-wrapper">
+            <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
+              <router-link :to="item.path">
+                <span class="category-name">{{ item.name }}</span>
+                <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
+              </router-link>
+            </li>
+          </ul>
+          <hr>
+          <h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> {{homeBlogCfg.tag}}</h4>
+          <TagList @getCurrentTag="getPagesByTags" />
+          <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i> {{homeBlogCfg.friendLink}}</h4>
+          <FriendLink />
+        </div>
+      </div>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <Content v-show="recoShowModule" class="home-center" custom/>
+    </ModuleTransition>
+  </div>
+</template>
+
+<script>
+import TagList from '@theme/components/TagList'
+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, moduleTransitonMixin],
+  components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo },
+  data () {
+    return {
+      recoShow: false,
+      currentPage: 1,
+      tags: []
+    }
+  },
+  computed: {
+    homeBlogCfg () {
+      return this.$recoLocals.homeBlog
+    },
+    actionLink () {
+      const {
+        actionLink: link,
+        actionText: text
+      } = this.$frontmatter
+
+      return {
+        link,
+        text
+      }
+    },
+    heroImageStyle () {
+      return this.$frontmatter.heroImageStyle || {
+        maxHeight: '200px',
+        margin: '6rem auto 1.5rem'
+      }
+    },
+    bgImageStyle () {
+      const initBgImageStyle = {
+        height: '350px',
+        textAlign: 'center',
+        overflow: 'hidden'
+      }
+      const {
+        bgImageStyle
+      } = this.$frontmatter
+
+      return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
+    },
+    heroHeight () {
+      return document.querySelector('.hero').clientHeight
+    }
+  },
+  mounted () {
+    this.recoShow = true
+    this._setPage(this._getStoragePage())
+  },
+  methods: {
+    // 获取当前页码
+    getCurrentPage (page) {
+      this._setPage(page)
+      setTimeout(() => {
+        window.scrollTo(0, this.heroHeight)
+      }, 100)
+    },
+    // 根据分类获取页面数据
+    getPages () {
+      let pages = this.$site.pages
+      pages = pages.filter(item => {
+        const { home, date } = item.frontmatter
+        return !(home == true || date === undefined)
+      })
+      // reverse()是为了按时间最近排序排序
+      this.pages = pages.length == 0 ? [] : pages
+    },
+    getPagesByTags (tagInfo) {
+      this.$router.push({ path: tagInfo.path })
+    },
+    _setPage (page) {
+      this.currentPage = page
+      this.$page.currentPage = page
+      this._setStoragePage(page)
+    },
+    getOneColor
+  }
+}
+</script>
+
+<style lang="stylus">
+.home-blog {
+  padding: $navbarHeight 0 0;
+  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
+    }
+
+    h1 {
+      margin:7rem auto 1.8rem;
+      font-size: 2.5rem;
+    }
+
+    h1, .description, .action, .huawei {
+      color #fff
+    }
+
+    .description {
+      margin: 1.8rem auto;
+      font-size: 1.6rem;
+      line-height: 1.3;
+    }
+  }
+  .home-blog-wrapper {
+    display flex
+    align-items: flex-start;
+    margin 20px auto 0
+    max-width 1126px
+    .blog-list {
+      flex auto
+      width 0
+      .abstract-wrapper {
+        .abstract-item:last-child {
+          margin-bottom: 0px;
+        }
+      }
+    }
+    .info-wrapper {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 70px;
+      transition all .3s
+      margin-left 15px;
+      flex 0 0 300px
+      height auto;
+      box-shadow var(--box-shadow);
+      border-radius $borderRadius
+      box-sizing border-box
+      padding 0 15px
+      background var(--background-color)
+      &:hover {
+        box-shadow: var(--box-shadow-hover);
+      }
+      h4 {
+        color var(--text-color)
+      }
+      .category-wrapper {
+        list-style none
+        padding-left 0
+        .category-item {
+          margin-bottom .4rem
+          padding: .4rem .8rem;
+          transition: all .5s
+          border-radius $borderRadius
+          box-shadow var(--box-shadow)
+          background-color var(--background-color)
+          &:hover {
+            transform scale(1.04)
+          }
+          a {
+            display flex
+            justify-content: space-between
+            .post-num {
+              width 1.6rem;
+              height 1.6rem
+              text-align center
+              line-height 1.6rem
+              border-radius $borderRadius
+              background #eee
+              font-size .6rem
+              color #fff
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .home-blog {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    .hero {
+      margin 0 -1.5rem
+      height 450px
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+
+      h1 {
+        margin: 6rem auto 1.8rem ;
+        font-size: 2rem;
+      }
+
+      h1, .description, .action {
+        // margin: 1.2rem auto;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+    .home-blog-wrapper {
+      .info-wrapper {
+        display none!important
+      }
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .home-blog {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    .hero {
+      margin 0 -1.5rem
+      height 350px
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+
+      h1 {
+        margin: 6rem auto 1.8rem ;
+        font-size: 2rem;
+      }
+
+      h1, .description, .action {
+        // margin: 1.2rem auto;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+
+    .home-blog-wrapper {
+      .info-wrapper {
+        display none!important
+      }
+    }
+  }
+}
+</style>
diff --git a/website/.vuepress/theme/components/MobShare.vue b/website/.vuepress/theme/components/MobShare.vue
new file mode 100644
index 00000000..afb81e4a
--- /dev/null
+++ b/website/.vuepress/theme/components/MobShare.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="-mob-share-ui-button -mob-share-open">分享</div>
+      <div class="-mob-share-ui" style="display: none">
+        <ul class="-mob-share-list">
+            <li class="-mob-share-weibo"><p>新浪微博</p></li>
+            <li class="-mob-share-qzone"><p>QQ空间</p></li>
+            <li class="-mob-share-qq"><p>QQ好友</p></li>
+            <li class="-mob-share-douban"><p>豆瓣</p></li>
+            <li class="-mob-share-facebook"><p>Facebook</p></li>
+            <li class="-mob-share-twitter"><p>Twitter</p></li>
+        </ul>
+        <div class="-mob-share-close">取消</div>
+      </div>
+      <div class="-mob-share-ui-bg"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted () {
+    const script = document.createElement('script')
+    script.src = 'http://f1.webshare.mob.com/code/mob-share.js?appkey=2d1a37832f835'
+    script.id = '-mob-share'
+
+    document.body.append(script)
+  }
+}
+</script>
+
diff --git a/website/.vuepress/theme/components/Mode/ModePicker.vue b/website/.vuepress/theme/components/Mode/ModePicker.vue
new file mode 100644
index 00000000..60880d2a
--- /dev/null
+++ b/website/.vuepress/theme/components/Mode/ModePicker.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="mode-options">
+    <h4 class="title">Choose mode</h4>
+    <ul class="color-mode-options">
+      <li
+        v-for="(mode, index) in modeOptions"
+        :key="index"
+        :class="getClass(mode.mode)"
+        @click="selectMode(mode.mode)"
+      >{{ mode.title }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import applyMode from './applyMode'
+export default {
+  name: 'ModeOptions',
+
+  data () {
+    return {
+      modeOptions: [
+        { mode: 'dark', title: 'dark' },
+        { mode: 'auto', title: 'auto' },
+        { mode: 'light', title: 'light' }
+      ],
+      currentMode: 'auto'
+    }
+  },
+
+  mounted () {
+    // modePicker 开启时默认使用用户主动设置的模式
+    this.currentMode = localStorage.getItem('mode') || this.$themeConfig.mode || 'auto'
+
+    // Dark and Light autoswitches
+    // 为了避免在 server-side 被执行，故在 Vue 组件中设置监听器
+    var that = this
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+      that.$data.currentMode === 'auto' && applyMode(that.$data.currentMode)
+    })
+    window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+      that.$data.currentMode === 'auto' && applyMode(that.$data.currentMode)
+    })
+
+    applyMode(this.currentMode)
+  },
+
+  methods: {
+    selectMode (mode) {
+      if (mode !== this.currentMode) {
+        this.currentMode = mode
+        applyMode(mode)
+        localStorage.setItem('mode', mode)
+      }
+    },
+    getClass (mode) {
+      return mode !== this.currentMode ? mode : `${mode} active`
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../../styles/mode.styl'
+
+.mode-options
+  background-color var(--background-color)
+  min-width: 125px;
+  margin: 0;
+  padding: 1em;
+  box-shadow var(--box-shadow);
+  border-radius: $borderRadius;
+  .title
+    margin-top 0
+    margin-bottom .6rem
+    font-weight bold
+    color var(--text-color)
+  .color-mode-options
+    display: flex;
+    flex-wrap wrap
+    li
+      text-align: center;
+      font-size 12px
+      color var(--text-color)
+      line-height 18px
+      padding 3px 6px
+      border-top 1px solid #666
+      border-bottom 1px solid #666
+      background-color var(--background-color)
+      cursor pointer
+      &.dark
+        border-radius: $borderRadius 0 0 $borderRadius
+        border-left 1px solid #666
+      &.light
+        border-radius: 0 $borderRadius $borderRadius 0
+        border-right 1px solid #666
+      &.active
+        background-color: $accentColor;
+        color #fff
+      &:not(.active)
+        border-right 1px solid #666
+</style>
diff --git a/website/.vuepress/theme/components/Mode/applyMode.js b/website/.vuepress/theme/components/Mode/applyMode.js
new file mode 100644
index 00000000..a4a0037e
--- /dev/null
+++ b/website/.vuepress/theme/components/Mode/applyMode.js
@@ -0,0 +1,35 @@
+import modeOptions from './modeOptions'
+
+function render (mode) {
+  const rootElement = document.querySelector(':root')
+  const options = modeOptions[mode]
+
+  for (const k in options) {
+    rootElement.style.setProperty(k, options[k])
+  }
+}
+
+/**
+ * Sets a color scheme for the website.
+ * If browser supports "prefers-color-scheme", 'auto' mode will respect the setting for light or dark mode
+ * otherwise it will set a dark theme during night time
+ */
+export default function applyMode (mode) {
+  if (mode !== 'auto') {
+    render(mode)
+    return
+  }
+
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+
+  if (isDarkMode) render('dark')
+  if (isLightMode) render('light')
+
+  if (!isDarkMode && !isLightMode) {
+    console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.')
+    const hour = new Date().getHours()
+    if (hour < 6 || hour >= 18) render('dark')
+    else render('light')
+  }
+}
diff --git a/website/.vuepress/theme/components/Mode/index.vue b/website/.vuepress/theme/components/Mode/index.vue
new file mode 100755
index 00000000..5f11859e
--- /dev/null
+++ b/website/.vuepress/theme/components/Mode/index.vue
@@ -0,0 +1,114 @@
+<template>
+	<div v-click-outside="hideMenu" class="color-picker" v-if="$themeConfig.modePicker !== false" >
+		<a class="color-button" @click.prevent="showMenu = !showMenu">
+			<i class="iconfont reco-color"></i>
+		</a>
+		<transition name="menu-transition" mode="out-in">
+			<div v-show="showMenu" class="color-picker-menu">
+				<ModePicker />
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+import ModePicker from './ModePicker'
+import applyMode from './applyMode'
+
+export default {
+  name: 'UserSettings',
+
+  directives: {
+    'click-outside': ClickOutside
+  },
+
+  components: {
+    ModePicker
+  },
+
+  data () {
+    return {
+      showMenu: false
+    }
+  },
+
+  // 为了在保证 modePicker 在 SSR 中正确开关，并实现管理，Mode 组件将负责 modePicker 关闭的情况
+  mounted () {
+    // modePicker 关闭时默认使用主题设置的模式
+    const themeMode = this.$themeConfig.mode || 'auto'
+    const { modePicker } = this.$themeConfig
+    if (modePicker === false) {
+      // 为 'auto' 模式设置监听器
+      if (themeMode === 'auto') {
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+          applyMode(themeMode)
+        })
+        window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+          applyMode(themeMode)
+        })
+      }
+      applyMode(themeMode)
+    }
+  },
+
+  methods: {
+    hideMenu () {
+      this.showMenu = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../../styles/mode.styl'
+
+.color-picker {
+	position: relative;
+	margin-right: 1em;
+  cursor pointer;
+	.color-button {
+		align-items: center;
+		height: 100%;
+		.iconfont {
+			font-size 1.4rem
+			color: $accentColor
+		}
+	}
+
+	.color-picker-menu {
+		position: absolute;
+		top: 40px;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 150;
+		&.menu-transition-enter-active,
+		&.menu-transition-leave-active {
+			transition: all 0.25s ease-in-out;
+		}
+		&.menu-transition-enter,
+		&.menu-transition-leave-to {
+			top: 50px;
+			opacity: 0;
+		}
+
+		ul {
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+		}
+	}
+}
+
+@media (max-width: $MQMobile) {
+	.color-picker {
+		margin-right: 1rem;
+		.color-picker-menu {
+			left: calc(50% - 35px);
+			&::before {
+				left: calc(50% + 35px);
+			}
+		}
+	}
+}
+</style>
diff --git a/website/.vuepress/theme/components/Mode/modeOptions.js b/website/.vuepress/theme/components/Mode/modeOptions.js
new file mode 100644
index 00000000..fe48e9ee
--- /dev/null
+++ b/website/.vuepress/theme/components/Mode/modeOptions.js
@@ -0,0 +1,44 @@
+const modeOptions = {
+  light: {
+    '--default-color-10': 'rgba(255, 255, 255, 1)',
+    '--default-color-9': 'rgba(255, 255, 255, .9)',
+    '--default-color-8': 'rgba(255, 255, 255, .8)',
+    '--default-color-7': 'rgba(255, 255, 255, .7)',
+    '--default-color-6': 'rgba(255, 255, 255, .6)',
+    '--default-color-5': 'rgba(255, 255, 255, .5)',
+    '--default-color-4': 'rgba(255, 255, 255, .4)',
+    '--default-color-3': 'rgba(255, 255, 255, .3)',
+    '--default-color-2': 'rgba(255, 255, 255, .2)',
+    '--default-color-1': 'rgba(255, 255, 255, .1)',
+    '--background-color': '#fff',
+    '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, 0.2)',
+    '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
+    '--text-color': '#242424',
+    '--text-color-sub': '#7F7F7F',
+    '--border-color': '#eaecef',
+    '--code-color': 'rgba(27, 31, 35, 0.05)',
+    '--mask-color': '#888'
+  },
+  dark: {
+    '--default-color-10': 'rgba(0, 0, 0, 1)',
+    '--default-color-9': 'rgba(0, 0, 0, .9)',
+    '--default-color-8': 'rgba(0, 0, 0, .8)',
+    '--default-color-7': 'rgba(0, 0, 0, .7)',
+    '--default-color-6': 'rgba(0, 0, 0, .6)',
+    '--default-color-5': 'rgba(0, 0, 0, .5)',
+    '--default-color-4': 'rgba(0, 0, 0, .4)',
+    '--default-color-3': 'rgba(0, 0, 0, .3)',
+    '--default-color-2': 'rgba(0, 0, 0, .2)',
+    '--default-color-1': 'rgba(0, 0, 0, .1)',
+    '--background-color': '#181818',
+    '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
+    '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
+    '--text-color': 'rgba(255, 255, 255, .8)',
+    '--text-color-sub': '#8B8B8B',
+    '--border-color': 'rgba(0, 0, 0, .3)',
+    '--code-color': 'rgba(0, 0, 0, .3)',
+    '--mask-color': '#000'
+  }
+}
+
+export default modeOptions
diff --git a/website/.vuepress/theme/components/ModuleTransition.vue b/website/.vuepress/theme/components/ModuleTransition.vue
new file mode 100644
index 00000000..5b114f54
--- /dev/null
+++ b/website/.vuepress/theme/components/ModuleTransition.vue
@@ -0,0 +1,45 @@
+<template>
+  <transition
+    name="module"
+    @enter="setStyle"
+    @after-enter="unsetStyle"
+    @before-leave="setStyle">
+    <slot />
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'ModuleTransition',
+
+  props: {
+    delay: {
+      type: String,
+      default: '0'
+    },
+    duration: {
+      type: String,
+      default: '.25'
+    }
+  },
+
+  methods: {
+    setStyle (items) {
+      items.style.transition = `all ${this.duration}s ease-in-out ${this.delay}s`
+      items.style.transform = 'translateY(-20px)'
+      items.style.opacity = 0
+    },
+    unsetStyle (items) {
+      items.style.transform = 'translateY(0)'
+      items.style.opacity = 1
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.module-enter, .module-leave-to {
+  opacity: 0;
+  transform:translateY(-20px);
+}
+</style>
diff --git a/website/.vuepress/theme/components/NavLink.vue b/website/.vuepress/theme/components/NavLink.vue
new file mode 100644
index 00000000..40621a23
--- /dev/null
+++ b/website/.vuepress/theme/components/NavLink.vue
@@ -0,0 +1,52 @@
+<template>
+  <router-link
+    class="nav-link"
+    :to="link"
+    v-if="!isExternal(link)"
+    :exact="exact">
+    <i :class="`iconfont ${item.icon}`"></i>
+    {{ item.text }}
+  </router-link>
+  <a
+    v-else
+    :href="http://github.com/link"
+    class="nav-link external"
+    :target="isMailto(link) || isTel(link) ? null : '_blank'"
+    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
+  >
+    <i :class="`iconfont ${item.icon}`"></i>
+    {{ item.text }}
+    <OutboundLink/>
+  </a>
+</template>
+
+<script>
+import { isExternal, isMailto, isTel, ensureExt } from '@theme/helpers/utils'
+
+export default {
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  computed: {
+    link () {
+      return ensureExt(this.item.link)
+    },
+
+    exact () {
+      if (this.$site.locales) {
+        return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
+      }
+      return this.link === '/'
+    }
+  },
+
+  methods: {
+    isExternal,
+    isMailto,
+    isTel
+  }
+}
+</script>
diff --git a/website/.vuepress/theme/components/NavLinks.vue b/website/.vuepress/theme/components/NavLinks.vue
new file mode 100644
index 00000000..00b52d53
--- /dev/null
+++ b/website/.vuepress/theme/components/NavLinks.vue
@@ -0,0 +1,188 @@
+<template>
+  <nav
+    class="nav-links"
+    v-if="userLinks.length || repoLink"
+  >
+    <!-- user links -->
+    <div
+      class="nav-item"
+      v-for="item in userLinks"
+      :key="item.link">
+      <DropdownLink
+        v-if="item.type === 'links'"
+        :item="item"/>
+      <NavLink
+        v-else
+        :item="item"/>
+    </div>
+
+    <!-- repo link -->
+    <a
+      v-if="repoLink"
+      :href="http://github.com/repoLink"
+      class="repo-link"
+      target="_blank"
+      rel="noopener noreferrer">
+      <i :class="`iconfont reco-${repoLabel.toLowerCase()}`"></i>
+      {{ repoLabel }}
+      <OutboundLink/>
+    </a>
+  </nav>
+</template>
+
+<script>
+import DropdownLink from '@theme/components/DropdownLink'
+import { resolveNavLinkItem } from '@theme/helpers/utils'
+import NavLink from '@theme/components/NavLink'
+
+export default {
+  components: { NavLink, DropdownLink },
+
+  computed: {
+    userNav () {
+      return this.$themeLocaleConfig.nav || this.$themeConfig.nav || []
+    },
+
+    nav () {
+      const { $site: { locales }, userNav } = this
+      if (locales && Object.keys(locales).length > 1) {
+        const currentLink = this.$page.path
+        const routes = this.$router.options.routes
+        const themeLocales = this.$themeConfig.locales || {}
+        const languageDropdown = {
+          text: this.$themeLocaleConfig.selectText || 'Languages',
+          items: Object.keys(locales).map(path => {
+            const locale = locales[path]
+            const text = themeLocales[path] && themeLocales[path].label || locale.lang
+            let link
+            // Stay on the current page
+            if (locale.lang === this.$lang) {
+              link = currentLink
+            } else {
+              // Try to stay on the same page
+              link = currentLink.replace(this.$localeConfig.path, path)
+              // fallback to homepage
+              if (!routes.some(route => route.path === link)) {
+                link = path
+              }
+            }
+            return { text, link }
+          })
+        }
+        return [...userNav, languageDropdown]
+      }
+
+      // blogConfig 的处理，根绝配置自动添加分类和标签
+      const blogConfig = this.$themeConfig.blogConfig || {}
+      const isHasCategory = userNav.some(item => {
+        if (blogConfig.category) {
+          return item.text === (blogConfig.category.text || '分类')
+        } else {
+          return true
+        }
+      })
+      const isHasTag = userNav.some(item => {
+        if (blogConfig.tag) {
+          return item.text === (blogConfig.tag.text || '标签')
+        } else {
+          return true
+        }
+      })
+
+      if (!isHasCategory && Object.hasOwnProperty.call(blogConfig, 'category')) {
+        const category = blogConfig.category
+        const $categories = this.$categories
+        userNav.splice(parseInt(category.location || 2) - 1, 0, {
+          items: $categories.list.map(item => {
+            item.link = item.path
+            item.text = item.name
+            return item
+          }),
+          text: category.text || '分类',
+          type: 'links',
+          icon: 'reco-category'
+        })
+      }
+      if (!isHasTag && Object.hasOwnProperty.call(blogConfig, 'tag')) {
+        const tag = blogConfig.tag
+        userNav.splice(parseInt(tag.location || 3) - 1, 0, {
+          link: '/tag/',
+          text: tag.text || '标签',
+          type: 'links',
+          icon: 'reco-tag'
+        })
+      }
+
+      return userNav
+    },
+
+    userLinks () {
+      return (this.nav || []).map(link => {
+        return Object.assign(resolveNavLinkItem(link), {
+          items: (link.items || []).map(resolveNavLinkItem)
+        })
+      })
+    },
+
+    repoLink () {
+      const { repo } = this.$themeConfig
+      if (repo) {
+        return /^https?:/.test(repo)
+          ? repo
+          : `https://github.com/${repo}`
+      }
+      return ''
+    },
+
+    repoLabel () {
+      if (!this.repoLink) return
+      if (this.$themeConfig.repoLabel) {
+        return this.$themeConfig.repoLabel
+      }
+
+      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
+      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
+      for (let i = 0; i < platforms.length; i++) {
+        const platform = platforms[i]
+        if (new RegExp(platform, 'i').test(repoHost)) {
+          return platform
+        }
+      }
+
+      return 'Source'
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.nav-links
+  display inline-block
+  a
+    line-height 1.4rem
+    color var(--text-color)
+    &:hover, &.router-link-active
+      color $accentColor
+      .iconfont
+        color $accentColor
+  .nav-item
+    position relative
+    display inline-block
+    margin-left 1.5rem
+    line-height 2rem
+    &:first-child
+      margin-left 0
+  .repo-link
+    margin-left 1.5rem
+
+@media (max-width: $MQMobile)
+  .nav-links
+    .nav-item, .repo-link
+      margin-left 0
+
+@media (min-width: $MQMobile)
+  .nav-item > a:not(.external)
+    &:hover, &.router-link-active
+      margin-bottom -2px
+      border-bottom 2px solid lighten($accentColor, 8%)
+</style>
diff --git a/website/.vuepress/theme/components/Navbar.vue b/website/.vuepress/theme/components/Navbar.vue
new file mode 100644
index 00000000..ccc87b3c
--- /dev/null
+++ b/website/.vuepress/theme/components/Navbar.vue
@@ -0,0 +1,131 @@
+<template>
+  <header class="navbar">
+    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
+
+    <router-link
+      :to="$localePath"
+      class="home-link">
+      <img
+        class="logo"
+        v-if="$themeConfig.logo"
+        :src="http://github.com/$withBase($themeConfig.logo)"
+        :alt="$siteTitle">
+      <span
+        ref="siteName"
+        class="site-name"
+        v-if="$siteTitle">{{ $siteTitle }}</span>
+    </router-link>
+
+    <div
+      class="links"
+      :style="linksWrapMaxWidth ? {
+        'max-width': linksWrapMaxWidth + 'px'
+      } : {}">
+
+      <Mode />
+      <AlgoliaSearchBox
+        v-if="isAlgoliaSearch"
+        :options="algolia"/>
+      <SearchBox v-else-if="$themeConfig.search !== false && $frontmatter.search !== false"/>
+      <NavLinks class="can-hide"/>
+    </div>
+  </header>
+</template>
+
+<script>
+import AlgoliaSearchBox from '@AlgoliaSearchBox'
+import SearchBox from '@SearchBox'
+import SidebarButton from '@theme/components/SidebarButton'
+import NavLinks from '@theme/components/NavLinks'
+import Mode from '@theme/components/Mode'
+
+export default {
+  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Mode },
+
+  data () {
+    return {
+      linksWrapMaxWidth: null
+    }
+  },
+
+  mounted () {
+    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
+    const handleLinksWrapWidth = () => {
+      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+        this.linksWrapMaxWidth = null
+      } else {
+        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING -
+          (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
+      }
+    }
+    handleLinksWrapWidth()
+    window.addEventListener('resize', handleLinksWrapWidth, false)
+  },
+
+  computed: {
+    algolia () {
+      return this.$themeLocaleConfig.algolia || this.$themeConfig.algolia || {}
+    },
+
+    isAlgoliaSearch () {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    }
+  }
+}
+
+function css (el, property) {
+  // NOTE: Known bug, will return 'auto' if style value is 'auto'
+  const win = el.ownerDocument.defaultView
+  // null means not to return pseudo styles
+  return win.getComputedStyle(el, null)[property]
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/mode.styl'
+
+$navbar-vertical-padding = 0.7rem
+$navbar-horizontal-padding = 1.5rem
+
+.navbar
+  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
+    height $navbarHeight - 1.4rem
+    min-width $navbarHeight - 1.4rem
+    margin-right 0.8rem
+    vertical-align top
+    border-radius 50%
+  .site-name
+    font-size 1.2rem
+    font-weight 600
+    color var(--text-color)
+    position relative
+    background var(--background-color)
+  .links
+    padding-left 1.5rem
+    box-sizing border-box
+    white-space nowrap
+    font-size 0.9rem
+    position absolute
+    right $navbar-horizontal-padding
+    top $navbar-vertical-padding
+    display flex
+    background-color var(--background-color)
+    .search-box
+      flex: 0 0 auto
+      vertical-align top
+
+@media (max-width: $MQMobile)
+  .navbar
+    padding-left 4rem
+    .can-hide
+      display none
+    .links
+      padding-left .2rem
+</style>
diff --git a/website/.vuepress/theme/components/NoteAbstract.vue b/website/.vuepress/theme/components/NoteAbstract.vue
new file mode 100644
index 00000000..a6d31b61
--- /dev/null
+++ b/website/.vuepress/theme/components/NoteAbstract.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="abstract-wrapper">
+    <NoteAbstractItem
+      v-for="(item) in currentPageData"
+      :key="item.path"
+      :item="item"
+      :currentPage="currentPage"
+      :currentTag="currentTag" />
+  </div>
+</template>
+
+<script>
+import NoteAbstractItem from './NoteAbstractItem'
+
+export default {
+  components: { NoteAbstractItem },
+  props: ['data', 'currentPage', 'currentTag'],
+  computed: {
+    currentPageData () {
+      const start = this.currentPage * 10 - 10
+      const end = this.currentPage * 10
+      return this.data.slice(start, end)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.abstract-wrapper
+  width 100%
+</style>
diff --git a/website/.vuepress/theme/components/NoteAbstractItem.vue b/website/.vuepress/theme/components/NoteAbstractItem.vue
new file mode 100644
index 00000000..9e066cfa
--- /dev/null
+++ b/website/.vuepress/theme/components/NoteAbstractItem.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="abstract-item">
+    <i v-if="item.frontmatter.sticky" class="iconfont reco-sticky"></i>
+    <div class="title">
+      <i v-if="item.frontmatter.keys" class="iconfont reco-lock"></i>
+      <router-link :to="item.path">{{item.title}}</router-link>
+    </div>
+    <div class="abstract" v-html="item.excerpt"></div>
+    <hr class="hr">
+    <PageInfo
+      :pageInfo="item"
+      :currentTag="currentTag">
+    </PageInfo>
+  </div>
+</template>
+
+<script>
+import PageInfo from './PageInfo'
+export default {
+  components: { PageInfo },
+  props: ['item', 'currentPage', 'currentTag']
+}
+</script>
+
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+.abstract-item
+  position relative
+  margin: 0 auto 20px;
+  padding: 16px 20px;
+  width 100%
+  overflow: hidden;
+  border-radius: $borderRadius
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  transition all .3s
+  background-color var(--background-color)
+  .reco-sticky
+    position absolute
+    top 0
+    left 0
+    display inline-block
+    color $accentColor
+    font-size 2.4rem
+  &:hover
+    box-shadow: var(--box-shadow-hover)
+  .title
+    position: relative;
+    font-size: 1.28rem;
+    line-height: 36px;
+    display: inline-block;
+    .reco-lock
+      font-size 1.28rem
+      color $accentColor
+    &:after
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: $accentColor;
+      visibility: hidden;
+      -webkit-transform: scaleX(0);
+      transform: scaleX(0);
+      transition: .3s ease-in-out;
+    &:hover a
+      color $accentColor
+    &:hover:after
+      visibility visible
+      -webkit-transform: scaleX(1);
+      transform: scaleX(1);
+  .tags
+    .tag-item
+      cursor: pointer;
+      &.active
+        color $accentColor
+      &:hover
+        color $accentColor
+@media (max-width: $MQMobile)
+  .tags
+    display block
+    margin-top 1rem;
+    margin-left: 0!important;
+</style>
diff --git a/website/.vuepress/theme/components/Page.vue b/website/.vuepress/theme/components/Page.vue
new file mode 100644
index 00000000..6bf13041
--- /dev/null
+++ b/website/.vuepress/theme/components/Page.vue
@@ -0,0 +1,282 @@
+<template>
+  <main class="page">
+    <ModuleTransition>
+      <div v-show="recoShowModule && $page.title" class="page-title">
+        <h1>{{$page.title}}</h1>
+        <hr>
+        <PageInfo :pageInfo="$page" :showAccessNumber="showAccessNumber"></PageInfo>
+      </div>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.08">
+      <Content v-show="recoShowModule" class="theme-reco-content" />
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.16">
+      <footer v-show="recoShowModule" class="page-edit">
+        <div
+          class="edit-link"
+          v-if="editLink"
+        >
+          <a
+            :href="http://github.com/editLink"
+            target="_blank"
+            rel="noopener noreferrer"
+          >{{ editLinkText }}</a>
+          <OutboundLink/>
+        </div>
+
+        <div
+          class="last-updated"
+          v-if="lastUpdated"
+        >
+          <span class="prefix">{{ lastUpdatedText }}: </span>
+          <span class="time">{{ lastUpdated }}</span>
+        </div>
+      </footer>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <div class="page-nav" v-if="recoShowModule && (prev || next)">
+        <p class="inner">
+          <span
+            v-if="prev"
+            class="prev"
+          >
+            ←
+            <router-link
+              v-if="prev"
+              class="prev"
+              :to="prev.path"
+            >
+              {{ prev.title || prev.path }}
+            </router-link>
+          </span>
+
+          <span
+            v-if="next"
+            class="next"
+          >
+            <router-link
+              v-if="next"
+              :to="next.path"
+            >
+              {{ next.title || next.path }}
+            </router-link>
+            →
+          </span>
+        </p>
+      </div>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.32">
+      <Comments v-if="recoShowModule" :isShowComments="shouldShowComments"/>
+    </ModuleTransition>
+  </main>
+</template>
+
+<script>
+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'],
+
+  data () {
+    return {
+      isHasKey: true
+    }
+  },
+
+  computed: {
+    // 是否显示评论
+    shouldShowComments () {
+      const { isShowComments } = this.$frontmatter
+      const { showComment } = this.$themeConfig.valineConfig || { showComment: true }
+      return (showComment !== false && isShowComments !== false) || (showComment === false && isShowComments === true)
+    },
+    showAccessNumber () {
+      return this.$themeConfig.valineConfig !== undefined
+    },
+    lastUpdated () {
+      return this.$page.lastUpdated
+    },
+    lastUpdatedText () {
+      if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
+        return this.$themeLocaleConfig.lastUpdated
+      }
+      if (typeof this.$themeConfig.lastUpdated === 'string') {
+        return this.$themeConfig.lastUpdated
+      }
+      return 'Last Updated'
+    },
+    prev () {
+      const prev = this.$frontmatter.prev
+      if (prev === false) {
+        return
+      } else if (prev) {
+        return resolvePage(this.$site.pages, prev, this.$route.path)
+      } else {
+        return resolvePrev(this.$page, this.sidebarItems)
+      }
+    },
+    next () {
+      const next = this.$frontmatter.next
+      if (next === false) {
+        return
+      } else if (next) {
+        return resolvePage(this.$site.pages, next, this.$route.path)
+      } else {
+        return resolveNext(this.$page, this.sidebarItems)
+      }
+    },
+    editLink () {
+      if (this.$frontmatter.editLink === false) {
+        return false
+      }
+      const {
+        repo,
+        editLinks,
+        docsDir = '',
+        docsBranch = 'master',
+        docsRepo = repo
+      } = this.$themeConfig
+
+      if (docsRepo && editLinks && this.$page.relativePath) {
+        return this.createEditLink(repo, docsRepo, docsDir, docsBranch, this.$page.relativePath)
+      }
+      return ''
+    },
+    editLinkText () {
+      return (
+        this.$themeLocaleConfig.editLinkText || this.$themeConfig.editLinkText || `Edit this page`
+      )
+    }
+  },
+
+  methods: {
+    createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
+      const bitbucket = /bitbucket.org/
+      if (bitbucket.test(repo)) {
+        const base = outboundRE.test(docsRepo)
+          ? docsRepo
+          : repo
+        return (
+          base.replace(endingSlashRE, '') +
+           `/src` +
+           `/${docsBranch}/` +
+           (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+           path +
+           `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+        )
+      }
+
+      const base = outboundRE.test(docsRepo)
+        ? docsRepo
+        : `https://github.com/${docsRepo}`
+      return (
+        base.replace(endingSlashRE, '') +
+        `/edit` +
+        `/${docsBranch}/` +
+        (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+        path
+      )
+    }
+  }
+}
+
+function resolvePrev (page, items) {
+  return find(page, items, -1)
+}
+
+function resolveNext (page, items) {
+  return find(page, items, 1)
+}
+
+function find (page, items, offset) {
+  const res = []
+  flatten(items, res)
+  for (let i = 0; i < res.length; i++) {
+    const cur = res[i]
+    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
+      return res[i + offset]
+    }
+  }
+}
+
+function flatten (items, res) {
+  for (let i = 0, l = items.length; i < l; i++) {
+    if (items[i].type === 'group') {
+      flatten(items[i].children || [], res)
+    } else {
+      res.push(items[i])
+    }
+  }
+}
+
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page
+  padding-top 5rem
+  padding-bottom 2rem
+  display block
+  .page-title
+    max-width: 740px;
+    margin: 0 auto;
+    padding: 1rem 2.5rem;
+    color var(--text-color)
+  .page-edit
+    @extend $wrapper
+    padding-top 1rem
+    padding-bottom 1rem
+    overflow auto
+    .edit-link
+      display inline-block
+      a
+        color $accentColor
+        margin-right 0.25rem
+    .last-updated
+      float right
+      font-size 0.9em
+      .prefix
+        font-weight 500
+        color $accentColor
+      .time
+        font-weight 400
+        color #aaa
+  .comments-wrapper
+    @extend $wrapper
+
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
+  .inner
+    min-height 2rem
+    margin-top 0
+    border-top 1px solid var(--border-color)
+    padding-top 1rem
+    overflow auto // clear float
+  .next
+    float right
+
+@media (max-width: $MQMobile)
+  .page-title
+    padding: 0 1rem;
+  .page-edit
+    .edit-link
+      margin-bottom .5rem
+    .last-updated
+      font-size .8em
+      float none
+      text-align left
+
+</style>
diff --git a/website/.vuepress/theme/components/PageInfo.vue b/website/.vuepress/theme/components/PageInfo.vue
new file mode 100644
index 00000000..9caa2b76
--- /dev/null
+++ b/website/.vuepress/theme/components/PageInfo.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <i
+      class="iconfont reco-account"
+      v-if="pageInfo.frontmatter.author || $themeConfig.author || $site.title">
+      <span>{{ pageInfo.frontmatter.author || $themeConfig.author || $site.title }}</span>
+    </i>
+    <i
+      v-if="pageInfo.frontmatter.date"
+      class="iconfont reco-date">
+      <span>{{ pageInfo.frontmatter.date | formatDateValue }}</span>
+    </i>
+    <i
+      v-if="showAccessNumber === true"
+      class="iconfont reco-eye">
+      <AccessNumber
+        :idVal="pageInfo.path"
+        :numStyle="numStyle" />
+    </i>
+    <i
+      v-if="pageInfo.frontmatter.tags"
+      class="iconfont reco-tag tags">
+      <span
+        v-for="(subItem, subIndex) in pageInfo.frontmatter.tags"
+        :key="subIndex"
+        class="tag-item"
+        :class="{ 'active': currentTag == subItem }"
+        @click="goTags(subItem)">
+        {{subItem}}
+      </span>
+    </i>
+  </div>
+</template>
+
+<script>
+// 引入时间格式化js文件
+import { formatDate } from '@theme/helpers/utils'
+
+export default {
+  props: {
+    pageInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    currentTag: {
+      type: String,
+      default: ''
+    },
+    showAccessNumber: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      numStyle: {
+        fontSize: '.9rem',
+        fontWeight: 'normal',
+        color: '#999'
+      }
+    }
+  },
+  filters: {
+    formatDateValue (value) {
+      if (!value) return ''
+      // 返回的value的值都是这个样子2019-09-20T18:22:30.000Z
+      // 对value进行处理
+      value = value.replace('T', ' ').slice(0, value.lastIndexOf('.'))
+      // 转化后的value 2019-09-20 18:22:30
+      // 获取到时分秒
+      const h = Number(value.substr(11, 2))
+      const m = Number(value.substr(14, 2))
+      const s = Number(value.substr(17, 2))
+      // 判断时分秒是不是 00:00:00 (如果是用户手动输入的00:00:00也会不显示)
+      if (h > 0 || m > 0 || s > 0) {
+        // 时分秒有一个> 0 就说明用户输入一个非 00:00:00 的时分秒
+        return formatDate(value)
+      } else {
+        // 用户没有输入或者输入了 00:00:00
+        return formatDate(value, 'yyyy-MM-dd')
+      }
+    }
+  },
+  methods: {
+    goTags (tag) {
+      this.$router.push({ path: `/tags/${tag}/` })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.iconfont
+  display inline-block
+  line-height 1.5rem
+  &:not(:last-child)
+    margin-right 1rem
+  span
+    margin-left 0.5rem
+.tags
+  .tag-item
+    cursor pointer
+    font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
+    &.active
+      color $accentColor
+    &:hover
+      color $accentColor
+@media (max-width: $MQMobile)
+  .tags
+    display block
+    margin-left 0 !important
+</style>
diff --git a/website/.vuepress/theme/components/Password.vue b/website/.vuepress/theme/components/Password.vue
new file mode 100644
index 00000000..523f75a3
--- /dev/null
+++ b/website/.vuepress/theme/components/Password.vue
@@ -0,0 +1,327 @@
+<template>
+  <div class="password-shadow">
+    <ModuleTransition>
+      <h3 v-show="recoShowModule" class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.08">
+      <p class="description" v-if="recoShowModule && !isPage">{{$site.description || $localeConfig.description}}</p>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.16">
+      <label v-show="recoShowModule" class="inputBox" id="box">
+        <input
+          v-model="key"
+          type="password"
+          @keyup.enter="inter"
+          @focus="inputFocus"
+          @blur="inputBlur">
+        <span>{{warningText}}</span>
+        <button ref="passwordBtn" @click="inter">OK</button>
+      </label>
+    </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <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>
+        </span>
+        <span>
+          <i class="iconfont reco-copyright"></i>
+          <a>
+            <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
+            &nbsp;&nbsp;
+            <span v-if="$themeConfig.startYear && $themeConfig.startYear != year">{{ $themeConfig.startYear }} - </span>
+            {{ year }}
+          </a>
+        </span>
+      </div>
+    </ModuleTransition>
+  </div>
+</template>
+
+<script>
+import md5 from 'md5'
+import ModuleTransition from '@theme/components/ModuleTransition'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
+
+export default {
+  mixins: [moduleTransitonMixin],
+  components: { ModuleTransition },
+  props: {
+    isPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  name: 'Password',
+  data () {
+    return {
+      warningText: 'Konck! Knock!',
+      key: ''
+    }
+  },
+  computed: {
+    year () {
+      return new Date().getFullYear()
+    }
+  },
+  methods: {
+    inter () {
+      const {
+        key,
+        isPage,
+        isHasPageKey,
+        isHasKey,
+        $refs: { passwordBtn }
+      } = this
+      const keyVal = md5(key.trim())
+      const pageKey = `pageKey${window.location.pathname}`
+      const keyName = isPage ? pageKey : 'key'
+      sessionStorage.setItem(keyName, keyVal)
+      const isKeyTrue = isPage ? isHasPageKey() : isHasKey()
+      if (!isKeyTrue) {
+        this.warningText = 'Key Error'
+        return
+      }
+
+      this.warningText = 'Key Success'
+
+      const width = document.getElementById('box').style.width
+
+      passwordBtn.style.width = `${width - 2}px`
+      passwordBtn.style.opacity = 1
+      setTimeout(() => {
+        window.location.reload()
+      }, 800)
+    },
+    inputFocus () {
+      this.warningText = 'Input Your Key'
+    },
+    inputBlur () {
+      this.warningText = 'Konck! Knock!'
+    },
+    isHasKey () {
+      let { keys } = this.$themeConfig.keyPage
+      keys = keys.map(item => item.toLowerCase())
+      return keys.indexOf(sessionStorage.getItem('key')) > -1
+    },
+    isHasPageKey () {
+      const pageKeys = this.$frontmatter.keys.map(item => item.toLowerCase())
+      const pageKey = `pageKey${window.location.pathname}`
+
+      return pageKeys && pageKeys.indexOf(sessionStorage.getItem(pageKey)) > -1
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+
+.password-shadow {
+  overflow hidden
+  position relative
+  background #fff
+  background var(--background-color)
+  box-sizing border-box
+  .title {
+    margin 8rem auto 2rem
+    width 100%
+    text-align center
+    font-size 30px
+    box-sizing: border-box;
+    text-shadow $textShadow
+    color $textColor
+    color var(--text-color)
+  }
+  .description {
+    margin 0 auto 6rem
+    text-align center
+    color $textColor
+    color var(--text-color)
+    font-size 22px
+    box-sizing: border-box;
+    padding: 0 10px;
+    text-shadow $textShadow
+  }
+  .inputBox{
+    position absolute
+    top 40%
+    left 0
+    right 0
+    margin auto
+    display block
+    max-width:700px;
+    height: 100px;
+    background: $accentColor;
+    border-radius: $borderRadius
+    padding-left 20px
+    box-sizing border-box
+    opacity 0.9
+    input{
+      width:600px;
+      height:100%;
+      border:none;
+      padding:0;
+      padding-left:5px;
+      color: #fff;
+      background: none;
+      outline: none;
+      position: absolute;
+      bottom:0;
+      left 20px
+      opacity 0
+      font-size 50px
+      &:focus {
+        opacity 1
+      }
+      &:focus~span{
+        transform: translateY(-80px);
+        color $accentColor
+        font-size 30px
+        opacity:0.8;
+      }
+      &:focus~button{
+        opacity:1;
+        width:100px;
+      }
+    }
+    span{
+      width:200px;
+      height: 100%;
+      display: block;
+      position: absolute;
+      line-height:100px;
+      top:0;
+      left:20px;
+      color: #fff;
+      cursor: text;
+      transition: 0.5s;
+      transform-origin: left top;
+      font-size 30px
+    }
+    button{
+      overflow hidden
+      width:0px;
+      height:98px;
+      border-radius: $borderRadius
+      position: absolute;
+      border 1px solid $accentColor
+      background var(--background-color)
+      right:1px;
+      top 1px
+      border:0;
+      padding:0;
+      color: $accentColor;
+      font-size:18px;
+      outline:none;
+      cursor: pointer;
+      opacity:0;
+      transition: 0.5s;
+      z-index: 1;
+    }
+  }
+  .footer {
+    position: absolute;
+    left 0
+    right 0
+    bottom 10%
+    padding: 2.5rem;
+    text-align: center;
+    color: lighten($textColor, 25%);
+    > span {
+      margin-left 1rem
+      > i {
+        margin-right .5rem
+      }
+    }
+  }
+  @media (max-width: $MQMobile) {
+    .inputBox{
+      max-width:700px;
+      height: 60px;
+      background: $accentColor;
+      border-radius: $borderRadius
+      position: absolute;
+      left 0
+      right 0
+      top 43%
+      margin auto 20px
+      padding-left 0
+      box-sizing border-box
+      opacity 0.9
+      input{
+        width: 60%;
+        height:100%;
+        border:none;
+        padding:0;
+        padding-left:5px;
+        color: #fff;
+        background: none;
+        outline: none;
+        position: absolute;
+        bottom:0;
+        opacity 0
+        font-size 30px
+        &:focus {
+          opacity 1
+        }
+        &:focus~span{
+          transform: translateY(-60px);
+          color $accentColor
+          font-size 20px
+          opacity:0.8;
+        }
+        &:focus~button{
+          opacity:1;
+          width:60px;
+        }
+      }
+      span{
+        width:200px;
+        height: 100%;
+        display: block;
+        position: absolute;
+        line-height:60px;
+        top:0;
+        left:20px;
+        color: #fff;
+        cursor: text;
+        transition: 0.5s;
+        transform-origin: left top;
+        font-size 20px
+      }
+      button{
+        width:0px;
+        height:58px;
+        border-radius: $borderRadius
+        position: absolute;
+        border 1px solid $accentColor
+        right:1px;
+        top 1px
+        border:0;
+        padding:0;
+        background: #fff;
+        color: $accentColor;
+        font-size:18px;
+        outline:none;
+        cursor: pointer;
+        opacity:0;
+        transition: 0.5s;
+        z-index: 1;
+      }
+    }
+    .footer {
+      margin-left 0
+
+    }
+  }
+  @media (max-width: $MQNarrow) {
+    .footer {
+      margin-left 0
+    }
+  }
+}
+</style>
diff --git a/website/.vuepress/theme/components/PersonalInfo.vue b/website/.vuepress/theme/components/PersonalInfo.vue
new file mode 100644
index 00000000..036ea1ab
--- /dev/null
+++ b/website/.vuepress/theme/components/PersonalInfo.vue
@@ -0,0 +1,75 @@
+<template>
+<div class="personal-info-wrapper">
+  <img
+    class="personal-img"
+    v-if="$themeConfig.authorAvatar"
+    :src="http://github.com/$withBase($themeConfig.authorAvatar)"
+    alt="author-avatar"
+  >
+  <h3
+    class="name"
+    v-if="$themeConfig.author || $site.title"
+  >
+    {{ $themeConfig.author || $site.title }}
+  </h3>
+  <div class="num">
+    <div>
+      <h3>{{$recoPosts.length}}</h3>
+      <h6>{{homeBlogCfg.article}}</h6>
+    </div>
+    <div>
+      <h3>{{$tags.list.length}}</h3>
+      <h6>{{homeBlogCfg.tag}}</h6>
+    </div>
+  </div>
+  <hr>
+</div>
+</template>
+
+<script>
+export default {
+  computed: {
+    homeBlogCfg () {
+      return this.$recoLocals.homeBlog
+    }
+  }
+}
+</script>
+
+<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>
diff --git a/website/.vuepress/theme/components/SearchBox.vue b/website/.vuepress/theme/components/SearchBox.vue
new file mode 100644
index 00000000..365c308c
--- /dev/null
+++ b/website/.vuepress/theme/components/SearchBox.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="search-box">
+    <i class="iconfont reco-search"></i>
+    <input
+      @input="query = $event.target.value"
+      aria-label="Search"
+      :value="query"
+      :class="{ 'focused': focused }"
+      :placeholder="placeholder"
+      autocomplete="off"
+      spellcheck="false"
+      @focus="focused = true"
+      @blur="focused = false"
+      @keyup.enter="go(focusIndex)"
+      @keyup.up="onUp"
+      @keyup.down="onDown"
+      ref="input"
+    >
+    <ul
+      class="suggestions"
+      v-if="showSuggestions"
+      :class="{ 'align-right': alignRight }"
+      @mouseleave="unfocus"
+    >
+      <li
+        class="suggestion"
+        v-for="(s, i) in suggestions"
+        :key="i"
+        :class="{ focused: i === focusIndex }"
+        @mousedown="go(i)"
+        @mouseenter="focus(i)"
+      >
+        <a :href="http://github.com/s.path" @click.prevent>
+          <span class="page-title">{{ s.title || s.path }}</span>
+          <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      query: '',
+      focused: false,
+      focusIndex: 0,
+      placeholder: undefined
+    }
+  },
+  mounted () {
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+  },
+  computed: {
+    showSuggestions () {
+      return (
+        this.focused && this.suggestions && this.suggestions.length
+      )
+    },
+    suggestions () {
+      const query = this.query.trim().toLowerCase()
+      if (!query) {
+        return
+      }
+      const { pages } = this.$site
+      const max = this.$site.themeConfig.searchMaxSuggestions
+      const localePath = this.$localePath
+      const matches = item => (
+        item && item.title && item.title.toLowerCase().indexOf(query) > -1
+      )
+      const res = []
+      for (let i = 0; i < pages.length; i++) {
+        if (res.length >= max) break
+        const p = pages[i]
+        // filter out results that do not match current locale
+        if (this.getPageLocalePath(p) !== localePath) {
+          continue
+        }
+        if (matches(p)) {
+          res.push(p)
+        } else if (p.headers) {
+          for (let j = 0; j < p.headers.length; j++) {
+            if (res.length >= max) break
+            const h = p.headers[j]
+            if (matches(h)) {
+              res.push(Object.assign({}, p, {
+                path: p.path + '#' + h.slug,
+                header: h
+              }))
+            }
+          }
+        }
+      }
+      return res
+    },
+    // make suggestions align right when there are not enough items
+    alignRight () {
+      const navCount = (this.$site.themeConfig.nav || []).length
+      const repo = this.$site.repo ? 1 : 0
+      return navCount + repo <= 2
+    }
+  },
+  methods: {
+    getPageLocalePath (page) {
+      for (const localePath in this.$site.locales || {}) {
+        if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
+          return localePath
+        }
+      }
+      return '/'
+    },
+    onUp () {
+      if (this.showSuggestions) {
+        if (this.focusIndex > 0) {
+          this.focusIndex--
+        } else {
+          this.focusIndex = this.suggestions.length - 1
+        }
+      }
+    },
+    onDown () {
+      if (this.showSuggestions) {
+        if (this.focusIndex < this.suggestions.length - 1) {
+          this.focusIndex++
+        } else {
+          this.focusIndex = 0
+        }
+      }
+    },
+    go (i) {
+      if (!this.showSuggestions) {
+        return
+      }
+      this.$router.push(this.suggestions[i].path)
+      this.query = ''
+      this.focusIndex = 0
+    },
+    focus (i) {
+      this.focusIndex = i
+    },
+    unfocus () {
+      this.focusIndex = -1
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.search-box
+  display inline-block
+  position relative
+  margin-right 1rem
+  .iconfont
+    position absolute
+    top 0
+    bottom 0
+    z-index 0
+    left .6rem
+    margin auto
+  input
+    cursor text
+    width 10rem
+    height: 2rem
+    color lighten($textColor, 25%)
+    display inline-block
+    border 1px solid var(--border-color)
+    border-radius $borderRadius
+    font-size 0.9rem
+    line-height 2rem
+    padding 0 0.5rem 0 2rem
+    outline none
+    transition all .2s ease
+    background transparent
+    background-size 1rem
+    &:focus
+      cursor auto
+      border-color $accentColor
+  .suggestions
+    background var(--background-color)
+    width 20rem
+    position absolute
+    top 1.5rem
+    border 1px solid darken($borderColor, 10%)
+    border-radius 6px
+    padding 0.4rem
+    list-style-type none
+    &.align-right
+      right 0
+  .suggestion
+    line-height 1.4
+    padding 0.4rem 0.6rem
+    border-radius 4px
+    cursor pointer
+    a
+      white-space normal
+      color var(--text-color)
+      .page-title
+        font-weight 600
+      .header
+        font-size 0.9em
+        margin-left 0.25em
+    &.focused
+      background-color var(--border-color)
+      a
+        color $accentColor
+@media (max-width: $MQNarrow)
+  .search-box
+    input
+      cursor pointer
+      width 0
+      border-color transparent
+      position relative
+      &:focus
+        cursor text
+        left 0
+        width 10rem
+// Match IE11
+@media all and (-ms-high-contrast: none)
+  .search-box input
+    height 2rem
+@media (max-width: $MQNarrow) and (min-width: $MQMobile)
+  .search-box
+    margin-right 0
+    .suggestions
+      left 0
+@media (max-width: $MQMobile)
+  .search-box
+    margin-right 0
+    .suggestions
+      right 0
+@media (max-width: $MQMobileNarrow)
+  .search-box
+    .suggestions
+      width calc(100vw - 4rem)
+    input:focus
+      width 8rem
+</style>
diff --git a/website/.vuepress/theme/components/Sidebar.vue b/website/.vuepress/theme/components/Sidebar.vue
new file mode 100644
index 00000000..57f34d7e
--- /dev/null
+++ b/website/.vuepress/theme/components/Sidebar.vue
@@ -0,0 +1,65 @@
+<template>
+  <aside class="sidebar">
+    <PersonalInfo/>
+    <NavLinks/>
+    <slot name="top"/>
+    <SidebarLinks :depth="0" :items="items"/>
+    <slot name="bottom"/>
+  </aside>
+</template>
+
+<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, PersonalInfo },
+
+  props: ['items']
+}
+</script>
+
+<style lang="stylus">
+.sidebar
+  .personal-info-wrapper
+    display none
+  ul
+    padding 0
+    margin 0
+    list-style-type none
+  a
+    display inline-block
+  .nav-links
+    display none
+    border-bottom 1px solid var(--border-color)
+    padding 0.5rem 0 0.75rem 0
+    a
+      font-weight 600
+    .nav-item, .repo-link
+      display block
+      line-height 1.25rem
+      font-size 1.1em
+      padding 0.5rem 0 0.5rem 1.5rem
+  & > .sidebar-links
+    padding 1.5rem 0
+    & > li > a.sidebar-link
+      font-size 1.1em
+      line-height 1.7
+      font-weight bold
+    & > li:not(:first-child)
+      margin-top .75rem
+
+@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
+        top calc(1rem - 2px)
+    & > .sidebar-links
+      padding 1rem 0
+</style>
diff --git a/website/.vuepress/theme/components/SidebarButton.vue b/website/.vuepress/theme/components/SidebarButton.vue
new file mode 100644
index 00000000..b8fb4150
--- /dev/null
+++ b/website/.vuepress/theme/components/SidebarButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="sidebar-button" @click="$emit('toggle-sidebar')">
+    <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
+      <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
+    </svg>
+  </div>
+</template>
+
+<style lang="stylus">
+.sidebar-button
+  cursor pointer
+  display none
+  width 1.25rem
+  height 1.25rem
+  position absolute
+  padding 0.6rem
+  top 0.6rem
+  left 1rem
+  .icon
+    display block
+    width 1.25rem
+    height 1.25rem
+
+@media (max-width: $MQMobile)
+  .sidebar-button
+    display block
+</style>
diff --git a/website/.vuepress/theme/components/SidebarGroup.vue b/website/.vuepress/theme/components/SidebarGroup.vue
new file mode 100644
index 00000000..5f726a97
--- /dev/null
+++ b/website/.vuepress/theme/components/SidebarGroup.vue
@@ -0,0 +1,129 @@
+<template>
+  <section
+    class="sidebar-group"
+    :class="[
+      {
+        collapsable,
+        'is-sub-group': depth !== 0
+      },
+      `depth-${depth}`
+    ]"
+  >
+    <router-link
+      v-if="item.path"
+      class="sidebar-heading clickable"
+      :class="{
+        open,
+        'active': isActive($route, item.path)
+      }"
+      :to="item.path"
+      @click.native="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        class="arrow"
+        v-if="collapsable"
+        :class="open ? 'down' : 'right'">
+      </span>
+    </router-link>
+
+    <p
+      v-else
+      class="sidebar-heading"
+      :class="{ open }"
+      @click="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        class="arrow"
+        v-if="collapsable"
+        :class="open ? 'down' : 'right'">
+      </span>
+    </p>
+
+    <DropdownTransition>
+      <SidebarLinks
+        class="sidebar-group-items"
+        :items="item.children"
+        v-if="open || !collapsable"
+        :sidebarDepth="item.sidebarDepth"
+        :depth="depth + 1"
+      />
+    </DropdownTransition>
+  </section>
+</template>
+
+<script>
+import { isActive } from '@theme/helpers/utils'
+import DropdownTransition from '@theme/components/DropdownTransition'
+
+export default {
+  name: 'SidebarGroup',
+  props: ['item', 'open', 'collapsable', 'depth'],
+  components: { DropdownTransition },
+  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+  beforeCreate () {
+    this.$options.components.SidebarLinks = require('./SidebarLinks.vue').default
+  },
+  methods: { isActive }
+}
+</script>
+
+<style lang="stylus">
+.sidebar-group
+  .sidebar-group
+    padding-left 0.5em
+  &:not(.collapsable)
+    .sidebar-heading:not(.clickable)
+      cursor auto
+      color var(--text-color)
+  // refine styles of nested sidebar groups
+  &.is-sub-group
+    padding-left 0
+    & > .sidebar-heading
+      font-size 0.95em
+      line-height 1.4
+      font-weight normal
+      padding-left 2rem
+      &:not(.clickable)
+        opacity 0.5
+    & > .sidebar-group-items
+      padding-left 1rem
+      & > li > .sidebar-link
+        font-size: 0.95em;
+        border-left none
+  &.depth-2
+    & > .sidebar-heading
+      border-left none
+
+.sidebar-heading
+  color var(--text-color)
+  transition color .15s ease
+  cursor pointer
+  font-size 1.1em
+  font-weight bold
+  // text-transform uppercase
+  padding 0.35rem 1.5rem 0.35rem 1.25rem
+  width 100%
+  box-sizing border-box
+  margin 0
+  border-left 0.25rem solid transparent
+  &.open, &:hover
+    color $accentColor
+  .arrow
+    position relative
+    top -0.12em
+    left 0.5em
+  &.clickable
+    &.active
+      font-weight 600
+      color $accentColor
+      border-left-color $accentColor
+    &:hover
+      color $accentColor
+
+.sidebar-group-items
+  transition height .1s ease-out
+  font-size 0.95em
+  overflow hidden
+</style>
diff --git a/website/.vuepress/theme/components/SidebarLink.vue b/website/.vuepress/theme/components/SidebarLink.vue
new file mode 100644
index 00000000..7ad741a5
--- /dev/null
+++ b/website/.vuepress/theme/components/SidebarLink.vue
@@ -0,0 +1,115 @@
+<script>
+import { isActive, hashRE, groupHeaders } from '@theme/helpers/utils'
+
+export default {
+  functional: true,
+
+  props: ['item', 'sidebarDepth'],
+
+  render (h,
+    {
+      parent: {
+        $page,
+        $site,
+        $route,
+        $themeConfig,
+        $themeLocaleConfig
+      },
+      props: {
+        item,
+        sidebarDepth
+      }
+    }) {
+    // use custom active class matching logic
+    // due to edge case of paths ending with / + hash
+    const selfActive = isActive($route, item.path)
+    // for sidebar: auto pages, a hash link should be active if one of its child
+    // matches
+    const active = item.type === 'auto'
+      ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
+      : selfActive
+    const link = renderLink(h, item.path, item.title || item.path, active)
+
+    const configDepth = $page.frontmatter.sidebarDepth ||
+      sidebarDepth ||
+      $themeLocaleConfig.sidebarDepth ||
+      $themeConfig.sidebarDepth
+
+    const maxDepth = configDepth == null ? 1 : configDepth
+
+    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders ||
+      $themeConfig.displayAllHeaders
+
+    if (item.type === 'auto') {
+      return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
+    } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
+      const children = groupHeaders(item.headers)
+      return [link, renderChildren(h, children, item.path, $route, maxDepth)]
+    } else {
+      return link
+    }
+  }
+}
+
+function renderLink (h, to, text, active) {
+  return h('router-link', {
+    props: {
+      to,
+      activeClass: '',
+      exactActiveClass: ''
+    },
+    class: {
+      active,
+      'sidebar-link': true
+    }
+  }, text)
+}
+
+function renderChildren (h, children, path, route, maxDepth, depth = 1) {
+  if (!children || depth > maxDepth) return null
+  return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
+    const active = isActive(route, path + '#' + c.slug)
+    return h('li', { class: 'sidebar-sub-header' }, [
+      renderLink(h, path + '#' + c.slug, c.title, active),
+      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
+    ])
+  }))
+}
+</script>
+
+<style lang="stylus">
+.sidebar .sidebar-sub-headers
+  padding-left 1.5rem
+  font-size 0.95em
+
+.sidebar-sub-headers a.sidebar-link
+  margin 0 1rem 0 0.6rem
+
+a.sidebar-link
+  font-size 1em
+  font-weight 400
+  display block!important
+  color var(--text-color)
+  padding 0.35rem 1rem 0.35rem .75rem
+  line-height 1.4
+  margin 0 1rem 0 1.5rem
+  box-sizing: border-box
+  border-radius .25rem
+  &:hover
+    color $accentColor
+  &.active
+    font-weight 600
+    color #fff
+    background $accentColor
+    // border-left-color $accentColor
+  .sidebar-group &
+    // padding-left 2rem
+  .sidebar-sub-headers &
+    padding-top 0.25rem
+    padding-bottom 0.25rem
+    border-left none
+    &.active
+      font-weight 500
+      background transparent
+      color $accentColor
+</style>
diff --git a/website/.vuepress/theme/components/SidebarLinks.vue b/website/.vuepress/theme/components/SidebarLinks.vue
new file mode 100644
index 00000000..9d45bfe3
--- /dev/null
+++ b/website/.vuepress/theme/components/SidebarLinks.vue
@@ -0,0 +1,141 @@
+<template>
+  <ul
+    class="sidebar-links"
+    v-if="items.length"
+  >
+    <li v-for="(item, i) in items" :key="i">
+      <SidebarGroup
+        v-if="item.type === 'group'"
+        :item="item"
+        :open="i === openGroupIndex"
+        :collapsable="item.collapsable || item.collapsible"
+        :depth="depth"
+        @toggle="toggleGroup(i)"
+      />
+      <SidebarLink
+        v-else
+        :sidebarDepth="sidebarDepth"
+        :item="item"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import SidebarGroup from '@theme/components/SidebarGroup'
+import SidebarLink from '@theme/components/SidebarLink'
+import { isActive } from '@theme/helpers/utils'
+
+export default {
+  name: 'SidebarLinks',
+
+  components: { SidebarGroup, SidebarLink },
+
+  props: [
+    'items',
+    'depth', // depth of current sidebar links
+    'sidebarDepth' // depth of headers to be extracted
+  ],
+
+  data () {
+    return {
+      openGroupIndex: 0
+    }
+  },
+
+  created () {
+    this.refreshIndex()
+  },
+
+  watch: {
+    '$route' () {
+      this.refreshIndex()
+    }
+  },
+
+  mounted () {
+    this.activationLink()
+    this.isInViewPortOfOne()
+  },
+
+  updated: function () {
+    this.isInViewPortOfOne()
+  },
+
+  methods: {
+    activationLink () {
+      const subtitleName = decodeURIComponent(this.$route.fullPath)
+      if (!subtitleName || subtitleName == '') return
+      // eslint-disable-next-line no-undef
+      const subtitles = [].slice.call(document.querySelectorAll(AHL_SIDEBAR_LINK_SELECTOR))
+      for (let i = 0; i < subtitles.length; i++) {
+        if (decodeURIComponent(subtitles[i].getAttribute('href')).indexOf(subtitleName) != -1) {
+          subtitles[i].click()
+          this.activationAnchor()
+          return
+        }
+      }
+    },
+
+    activationAnchor () {
+      // eslint-disable-next-line no-undef
+      const anchors = [].slice.call(document.querySelectorAll(AHL_HEADER_ANCHOR_SELECTOR))
+        .filter(anchor => decodeURIComponent(this.$route.fullPath).indexOf(decodeURIComponent(anchor.hash)) != -1)
+      if (anchors == null || anchors.length < 1 || anchors[0].offsetTop == undefined) return
+      setTimeout(function () {
+        window.scrollTo(0, anchors[0].offsetTop + 160)
+      }, 100)
+    },
+
+    isInViewPortOfOne () {
+      const siderbarScroll = document.getElementsByClassName('sidebar')[0]
+      let el = document.getElementsByClassName('active sidebar-link')[1]
+      if (el == null || el == undefined || el.offsetTop == undefined) {
+        el = document.getElementsByClassName('active sidebar-link')[0]
+      }
+      if (el == null || el == undefined || el.offsetTop == undefined) return
+
+      const viewPortHeight = siderbarScroll.clientHeight || window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+      const offsetTop = el.offsetTop
+      const offsetBottom = el.offsetTop + el.offsetHeight
+      const scrollTop = siderbarScroll.scrollTop
+      const bottomVisible = (offsetBottom <= viewPortHeight + scrollTop)
+      if (!bottomVisible) {
+        siderbarScroll.scrollTop = (offsetBottom + 5 - viewPortHeight)
+      }
+      const topVisible = (offsetTop >= scrollTop)
+      if (!topVisible) {
+        siderbarScroll.scrollTop = (offsetTop - 5)
+      }
+    },
+
+    refreshIndex () {
+      const index = resolveOpenGroupIndex(
+        this.$route,
+        this.items
+      )
+      if (index > -1) {
+        this.openGroupIndex = index
+      }
+    },
+
+    toggleGroup (index) {
+      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
+    },
+
+    isActive (page) {
+      return isActive(this.$route, page.regularPath)
+    }
+  }
+}
+
+function resolveOpenGroupIndex (route, items) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.type === 'group' && item.children.some(c => c.type === 'page' && isActive(route, c.path))) {
+      return i
+    }
+  }
+  return -1
+}
+</script>
diff --git a/website/.vuepress/theme/components/TagList.vue b/website/.vuepress/theme/components/TagList.vue
new file mode 100644
index 00000000..55e3e956
--- /dev/null
+++ b/website/.vuepress/theme/components/TagList.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="tags">
+    <span
+      v-for="(item, index) in tags"
+      :key="index"
+      :class="{'active': item.name == currentTag}"
+      :style="{ 'backgroundColor': getOneColor() }"
+      @click="tagClick(item)">{{item.name}}</span>
+  </div>
+</template>
+
+<script>
+import { getOneColor } from '@theme/helpers/other'
+
+export default {
+  props: {
+    currentTag: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    tags () {
+      return [{ name: '全部', path: '/tag/' }, ...this.$tags.list]
+    }
+  },
+  methods: {
+    tagClick (tag) {
+      this.$emit('getCurrentTag', tag)
+    },
+    getOneColor
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+
+.tags
+  margin 30px 0
+  span
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 4px 8px;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: $borderRadius
+    background: #fff;
+    color: #fff;
+    line-height 13px
+    font-size: 13px;
+    box-shadow var(--box-shadow)
+    transition: all .5s
+    &:hover
+      transform scale(1.04)
+    &.active
+      transform scale(1.2)
+</style>
diff --git a/website/.vuepress/theme/enhanceApp.js b/website/.vuepress/theme/enhanceApp.js
new file mode 100644
index 00000000..e325e2bb
--- /dev/null
+++ b/website/.vuepress/theme/enhanceApp.js
@@ -0,0 +1,9 @@
+import postMixin from '@theme/mixins/posts'
+import localMixin from '@theme/mixins/locals'
+
+export default ({
+  Vue
+}) => {
+  Vue.mixin(postMixin)
+  Vue.mixin(localMixin)
+}
diff --git a/website/.vuepress/theme/global-components/Badge.vue b/website/.vuepress/theme/global-components/Badge.vue
new file mode 100644
index 00000000..019ba4d6
--- /dev/null
+++ b/website/.vuepress/theme/global-components/Badge.vue
@@ -0,0 +1,45 @@
+<script>
+export default {
+  functional: true,
+  props: {
+    type: {
+      type: String,
+      default: 'tip'
+    },
+    text: String,
+    vertical: {
+      type: String,
+      default: 'top'
+    }
+  },
+  render (h, { props, slots }) {
+    return h('span', {
+      class: ['badge', props.type],
+      style: {
+        verticalAlign: props.vertical
+      }
+    }, props.text || slots().default)
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+.badge
+  display inline-block
+  font-size 14px
+  height 18px
+  line-height 18px
+  border-radius $borderRadius
+  padding 0 6px
+  color white
+  background-color #42b983
+  &.tip, &.green
+    background-color #42b983
+  &.error
+    background-color #DA5961
+  &.warning, &.warn, &.yellow
+    background-color darken(#ffe564, 35%)
+  & + &
+    margin-left 5px
+</style>
diff --git a/website/.vuepress/theme/helpers/other.js b/website/.vuepress/theme/helpers/other.js
new file mode 100644
index 00000000..be543189
--- /dev/null
+++ b/website/.vuepress/theme/helpers/other.js
@@ -0,0 +1,18 @@
+export function getOneColor () {
+  const tagColorArr = [
+    '#e15b64',
+    '#f47e60',
+    '#f8b26a',
+    '#abbd81',
+    '#849b87',
+    '#e15b64',
+    '#f47e60',
+    '#f8b26a',
+    '#f26d6d',
+    '#67cc86',
+    '#fb9b5f',
+    '#3498db'
+  ]
+  const index = Math.floor(Math.random() * tagColorArr.length)
+  return tagColorArr[index]
+}
diff --git a/website/.vuepress/theme/helpers/postData.js b/website/.vuepress/theme/helpers/postData.js
new file mode 100644
index 00000000..95748e29
--- /dev/null
+++ b/website/.vuepress/theme/helpers/postData.js
@@ -0,0 +1,41 @@
+import { compareDate } from '@theme/helpers/utils'
+
+// 过滤博客数据
+export function filterPosts (posts, isTimeline) {
+  posts = posts.filter((item, index) => {
+    const { title, frontmatter: { home, date, publish }} = item
+    // 过滤多个分类时产生的重复数据
+    if (posts.indexOf(item) !== index) {
+      return false
+    } else {
+      const someConditions = home == true || title == undefined || publish === false
+      const boo = isTimeline === true
+        ? !(someConditions || date === undefined)
+        : !someConditions
+      return boo
+    }
+  })
+  return posts
+}
+
+// 排序博客数据
+export function sortPostsByStickyAndDate (posts) {
+  posts.sort((prev, next) => {
+    const prevSticky = prev.frontmatter.sticky
+    const nextSticky = next.frontmatter.sticky
+    if (prevSticky && nextSticky) {
+      return prevSticky == nextSticky ? compareDate(prev, next) : (prevSticky - nextSticky)
+    } else if (prevSticky && !nextSticky) {
+      return -1
+    } else if (!prevSticky && nextSticky) {
+      return 1
+    }
+    return compareDate(prev, next)
+  })
+}
+
+export function sortPostsByDate (posts) {
+  posts.sort((prev, next) => {
+    return compareDate(prev, next)
+  })
+}
diff --git a/website/.vuepress/theme/helpers/utils.js b/website/.vuepress/theme/helpers/utils.js
new file mode 100644
index 00000000..80c3efcb
--- /dev/null
+++ b/website/.vuepress/theme/helpers/utils.js
@@ -0,0 +1,273 @@
+export const hashRE = /#.*$/
+export const extRE = /\.(md|html)$/
+export const endingSlashRE = /\/$/
+export const outboundRE = /^(https?:|mailto:|tel:)/
+
+export function normalize (path) {
+  return decodeURI(path)
+    .replace(hashRE, '')
+    .replace(extRE, '')
+}
+
+export function getHash (path) {
+  const match = path.match(hashRE)
+  if (match) {
+    return match[0]
+  }
+}
+
+export function isExternal (path) {
+  return outboundRE.test(path)
+}
+
+export function isMailto (path) {
+  return /^mailto:/.test(path)
+}
+
+export function isTel (path) {
+  return /^tel:/.test(path)
+}
+
+export function ensureExt (path) {
+  if (isExternal(path)) {
+    return path
+  }
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  const normalized = normalize(path)
+
+  if (endingSlashRE.test(normalized)) {
+    return path
+  }
+  return normalized + '.html' + hash
+}
+
+export function isActive (route, path) {
+  const routeHash = route.hash
+  const linkHash = getHash(path)
+  if (linkHash && routeHash !== linkHash) {
+    return false
+  }
+  const routePath = normalize(route.path)
+  const pagePath = normalize(path)
+  return routePath === pagePath
+}
+
+export function resolvePage (pages, rawPath, base) {
+  if (base) {
+    rawPath = resolvePath(rawPath, base)
+  }
+  const path = normalize(rawPath)
+  for (let i = 0; i < pages.length; i++) {
+    if (normalize(pages[i].regularPath) === path) {
+      return Object.assign({}, pages[i], {
+        type: 'page',
+        path: ensureExt(pages[i].path)
+      })
+    }
+  }
+  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
+  return {}
+}
+
+function resolvePath (relative, base, append) {
+  const firstChar = relative.charAt(0)
+  if (firstChar === '/') {
+    return relative
+  }
+
+  if (firstChar === '?' || firstChar === '#') {
+    return base + relative
+  }
+
+  const stack = base.split('/')
+
+  // remove trailing segment if:
+  // - not appending
+  // - appending to trailing slash (last segment is empty)
+  if (!append || !stack[stack.length - 1]) {
+    stack.pop()
+  }
+
+  // resolve relative path
+  const segments = relative.replace(/^\//, '').split('/')
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i]
+    if (segment === '..') {
+      stack.pop()
+    } else if (segment !== '.') {
+      stack.push(segment)
+    }
+  }
+
+  // ensure leading slash
+  if (stack[0] !== '') {
+    stack.unshift('')
+  }
+
+  return stack.join('/')
+}
+
+/**
+ * @param { Page } page
+ * @param { string } regularPath
+ * @param { SiteData } site
+ * @param { string } localePath
+ * @returns { SidebarGroup }
+ */
+export function resolveSidebarItems (page, regularPath, site, localePath) {
+  const { pages, themeConfig } = site
+
+  const localeConfig = localePath && themeConfig.locales
+    ? themeConfig.locales[localePath] || themeConfig
+    : themeConfig
+
+  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
+  if (pageSidebarConfig === 'auto') {
+    return resolveHeaders(page)
+  }
+
+  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
+  if (!sidebarConfig) {
+    return []
+  } else {
+    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+    return config
+      ? config.map(item => resolveItem(item, pages, base))
+      : []
+  }
+}
+
+/**
+ * @param { Page } page
+ * @returns { SidebarGroup }
+ */
+function resolveHeaders (page) {
+  const headers = groupHeaders(page.headers || [])
+  return [{
+    type: 'group',
+    collapsable: false,
+    title: page.title,
+    path: null,
+    children: headers.map(h => ({
+      type: 'auto',
+      title: h.title,
+      basePath: page.path,
+      path: page.path + '#' + h.slug,
+      children: h.children || []
+    }))
+  }]
+}
+
+export function groupHeaders (headers) {
+  // group h3s under h2
+  headers = headers.map(h => Object.assign({}, h))
+  let lastH2
+  headers.forEach(h => {
+    if (h.level === 2) {
+      lastH2 = h
+    } else if (lastH2) {
+      (lastH2.children || (lastH2.children = [])).push(h)
+    }
+  })
+  return headers.filter(h => h.level === 2)
+}
+
+export function resolveNavLinkItem (linkItem) {
+  return Object.assign(linkItem, {
+    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
+  })
+}
+
+/**
+ * @param { Route } route
+ * @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
+ * @returns { base: string, config: SidebarConfig }
+ */
+export function resolveMatchingConfig (regularPath, config) {
+  if (Array.isArray(config)) {
+    return {
+      base: '/',
+      config: config
+    }
+  }
+  for (const base in config) {
+    if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
+      return {
+        base,
+        config: config[base]
+      }
+    }
+  }
+  return {}
+}
+
+export function formatDate (time, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  time = time.replace(/-/g, '/')
+  const date = new Date(time)
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, date.getFullYear() + '').substr(4 - RegExp.$1.length)
+  }
+
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+
+  for (const key in o) {
+    if (RegExp(`(${key})`).test(fmt)) {
+      const str = o[key] + ''
+      fmt = fmt.replace(RegExp.$1, str.length === 2 ? str : '0' + str)
+    }
+  }
+  return fmt
+}
+
+// 获取时间的数字类型
+export function getTimeNum (date) {
+  return new Date(date.frontmatter.date).getTime()
+}
+
+// 比对时间
+export function compareDate (a, b) {
+  return getTimeNum(b) - getTimeNum(a)
+}
+
+function ensureEndingSlash (path) {
+  return /(\.html|\/)$/.test(path)
+    ? path
+    : path + '/'
+}
+
+function resolveItem (item, pages, base, groupDepth = 1) {
+  if (typeof item === 'string') {
+    return resolvePage(pages, item, base)
+  } else if (Array.isArray(item)) {
+    return Object.assign(resolvePage(pages, item[0], base), {
+      title: item[1]
+    })
+  } else {
+    if (groupDepth > 3) {
+      console.error(
+        '[vuepress] detected a too deep nested sidebar group.'
+      )
+    }
+    const children = item.children || []
+    if (children.length === 0 && item.path) {
+      return Object.assign(resolvePage(pages, item.path, base), {
+        title: item.title
+      })
+    }
+    return {
+      type: 'group',
+      path: item.path,
+      title: item.title,
+      sidebarDepth: item.sidebarDepth,
+      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
+      collapsable: item.collapsable !== false
+    }
+  }
+}
diff --git a/website/.vuepress/theme/images/home-bg.jpg b/website/.vuepress/theme/images/home-bg.jpg
new file mode 100644
index 00000000..02d4a81b
Binary files /dev/null and b/website/.vuepress/theme/images/home-bg.jpg differ
diff --git a/website/.vuepress/theme/images/home-head.png b/website/.vuepress/theme/images/home-head.png
new file mode 100644
index 00000000..72247268
Binary files /dev/null and b/website/.vuepress/theme/images/home-head.png differ
diff --git a/website/.vuepress/theme/images/icon_vuepress_reco.png b/website/.vuepress/theme/images/icon_vuepress_reco.png
new file mode 100644
index 00000000..ac012529
Binary files /dev/null and b/website/.vuepress/theme/images/icon_vuepress_reco.png differ
diff --git a/website/.vuepress/theme/index.js b/website/.vuepress/theme/index.js
new file mode 100644
index 00000000..6835f6d7
--- /dev/null
+++ b/website/.vuepress/theme/index.js
@@ -0,0 +1,97 @@
+const path = require('path')
+
+// Theme API.
+module.exports = (options, ctx) => ({
+  alias () {
+    const { themeConfig, siteConfig } = ctx
+    // resolve algolia
+    const isAlgoliaSearch = (
+      themeConfig.algolia ||
+      Object.keys(siteConfig.locales && themeConfig.locales || {})
+        .some(base => themeConfig.locales[base].algolia)
+    )
+    return {
+      '@AlgoliaSearchBox': isAlgoliaSearch
+        ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
+        : path.resolve(__dirname, 'noopModule.js'),
+      '@SearchBox': path.resolve(__dirname, 'components/SearchBox.vue')
+    }
+  },
+
+  plugins: [
+    '@vuepress-reco/back-to-top',
+    '@vuepress-reco/loading-page',
+    '@vuepress-reco/pagation',
+    '@vuepress-reco/comments',
+    '@vuepress/active-header-links',
+    ['@vuepress/medium-zoom', {
+      selector: '.theme-reco-content :not(a) > img'
+    }],
+    '@vuepress/plugin-nprogress',
+    ['@vuepress/plugin-blog', {
+      permalink: '/:regular',
+      frontmatters: [
+        {
+          id: 'tags',
+          keys: ['tags'],
+          path: '/tag/',
+          layout: 'Tags',
+          scopeLayout: 'Tag'
+        },
+        {
+          id: 'categories',
+          keys: ['categories'],
+          path: '/categories/',
+          layout: 'Categories',
+          scopeLayout: 'Category'
+        },
+        {
+          id: 'timeline',
+          keys: ['timeline'],
+          path: '/timeline/',
+          layout: 'TimeLines',
+          scopeLayout: 'TimeLine'
+        }
+      ]
+    }],
+    ['container', {
+      type: 'tip',
+      defaultTitle: {
+        '/': '',
+        '/zh/': '提示'
+      }
+    }],
+    ['container', {
+      type: 'warning',
+      defaultTitle: {
+        '/': '',
+        '/zh/': '注意'
+      }
+    }],
+    ['container', {
+      type: 'danger',
+      defaultTitle: {
+        '/': '',
+        '/zh/': '警告'
+      }
+    }],
+    ['container', {
+      type: 'right',
+      defaultTitle: ''
+    }],
+    ['container', {
+      type: 'theorem',
+      before: info => `<div class="custom-block theorem"><p class="title">${info}</p>`,
+      after: '</div>'
+    }],
+    ['container', {
+      type: 'details',
+      before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`,
+      after: () => '</details>\n',
+      defaultTitle: {
+        '/': 'See More',
+        '/zh/': '更多'
+      }
+    }]
+  ]
+})
diff --git a/website/.vuepress/theme/layouts/404.vue b/website/.vuepress/theme/layouts/404.vue
new file mode 100644
index 00000000..3b3a22fc
--- /dev/null
+++ b/website/.vuepress/theme/layouts/404.vue
@@ -0,0 +1,69 @@
+<template>
+  <section class="theme-container" v-if="!noFoundPageByTencent">
+    <article class="content">
+      <h1>404</h1>
+      <blockquote>{{ getMsg() }}</blockquote>
+      <router-link to="/">Take me home.</router-link>
+    </article>
+  </section>
+</template>
+
+<script>
+const msgs = [
+  `There's nothing here.`,
+  `How did we get here?`,
+  `That's a Four-Oh-Four.`,
+  `Looks like we've got some broken links.`
+]
+
+export default {
+  computed: {
+    noFoundPageByTencent () {
+      return this.$themeConfig.noFoundPageByTencent !== false
+    }
+  },
+  mounted () {
+    if (this.noFoundPageByTencent) {
+      const dom = document.createElement('script')
+      dom.setAttribute('homePageName', '回到首页')
+      dom.setAttribute('homePageUrl', '/')
+      dom.setAttribute('src', '//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js')
+
+      document.body.append(dom)
+    }
+  },
+  methods: {
+    getMsg () {
+      return msgs[Math.floor(Math.random() * msgs.length)]
+    }
+  }
+}
+</script>
+
+<style src="http://github.com/styles/theme.styl" lang="stylus"></style>
+
+<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/website/.vuepress/theme/layouts/Category.vue b/website/.vuepress/theme/layouts/Category.vue
new file mode 100644
index 00000000..71fb8153
--- /dev/null
+++ b/website/.vuepress/theme/layouts/Category.vue
@@ -0,0 +1,169 @@
+<template>
+  <Common class="categories-wrapper" :sidebar="false">
+    <!-- 分类集合 -->
+    <ModuleTransition>
+      <ul v-show="recoShowModule" class="category-wrapper">
+        <li
+          class="category-item"
+          :class="title == item.name ? 'active': ''"
+          v-for="(item, index) in this.$categories.list"
+          :key="index">
+          <router-link :to="item.path">
+            <span class="category-name">{{ item.name }}</span>
+            <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
+          </router-link>
+        </li>
+      </ul>
+    </ModuleTransition>
+
+    <!-- 博客列表 -->
+    <ModuleTransition delay="0.08">
+      <note-abstract
+        v-show="recoShowModule"
+        class="list"
+        :data="posts"
+        :currentPage="currentPage"
+        @currentTag="getCurrentTag"></note-abstract>
+    </ModuleTransition>
+
+    <!-- 分页 -->
+    <ModuleTransition delay="0.16">
+      <pagation
+        class="pagation"
+        :total="posts.length"
+        :currentPage="currentPage"
+        @getCurrentPage="getCurrentPage"></pagation>
+    </ModuleTransition>
+  </Common>
+</template>
+
+<script>
+import Common from '@theme/components/Common'
+import NoteAbstract from '@theme/components/NoteAbstract'
+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, moduleTransitonMixin],
+  components: { Common, NoteAbstract, ModuleTransition },
+
+  data () {
+    return {
+      currentPage: 1
+    }
+  },
+
+  computed: {
+    // 时间降序后的博客列表
+    posts () {
+      let posts = this.$currentCategories.pages
+      posts = filterPosts(posts)
+      sortPostsByStickyAndDate(posts)
+      return posts
+    },
+    // 标题只显示分类名称
+    title () {
+      return this.$currentCategories.key
+    }
+  },
+
+  mounted () {
+    this._setPage(this._getStoragePage())
+  },
+
+  methods: {
+    // 获取当前tag
+    getCurrentTag (tag) {
+      this.$emit('currentTag', tag)
+    },
+    // 获取当前页码
+    getCurrentPage (page) {
+      this._setPage(page)
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
+    _setPage (page) {
+      this.currentPage = page
+      this.$page.currentPage = page
+      this._setStoragePage(page)
+    },
+    getOneColor
+  },
+
+  watch: {
+    $route () {
+      this._setPage(this._getStoragePage())
+    }
+  }
+}
+</script>
+
+<style src="http://github.com/styles/theme.styl" lang="stylus"></style>
+
+<style src="http://github.com/prismjs/themes/prism-tomorrow.css"></style>
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+.categories-wrapper
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 4.6rem 2.5rem 0;
+  .category-wrapper {
+    list-style none
+    padding-left 0
+    .category-item {
+      vertical-align: middle;
+      margin: 4px 8px 10px;
+      display: inline-block;
+      cursor: pointer;
+      border-radius: $borderRadius
+      font-size: 13px;
+      box-shadow var(--box-shadow)
+      transition: all .5s
+      background-color var(--background-color)
+      &:hover, &.active {
+        background $accentColor
+        a span.category-name {
+          color #fff
+          .post-num {
+            color $accentColor
+          }
+        }
+      }
+      a {
+        display flex
+        box-sizing border-box
+        width 100%
+        height 100%
+        padding: 8px 14px;
+        justify-content: space-between
+        align-items center
+        color: #666
+        .post-num {
+          margin-left 4px
+          width 1.2rem;
+          height 1.2rem
+          text-align center
+          line-height 1.2rem
+          border-radius $borderRadius
+          font-size .7rem
+          color #fff
+        }
+      }
+    }
+  }
+
+@media (max-width: $MQMobile)
+  .categories-wrapper
+    padding: 4.6rem 1rem 0;
+  .page-edit
+    .edit-link
+      margin-bottom .5rem
+    .last-updated
+      font-size .8em
+      float none
+      text-align left
+</style>
diff --git a/website/.vuepress/theme/layouts/Layout.vue b/website/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 00000000..8123cbf8
--- /dev/null
+++ b/website/.vuepress/theme/layouts/Layout.vue
@@ -0,0 +1,41 @@
+<template>
+  <Common>
+    <component v-if="$frontmatter.home" :is="homeCom"/>
+    <Page v-else :sidebar-items="sidebarItems"/>
+    <Footer v-if="$frontmatter.home" class="footer" />
+  </Common>
+</template>
+
+<script>
+import Home from '@theme/components/Home'
+import HomeBlog from '@theme/components/HomeBlog'
+import Page from '@theme/components/Page'
+import Footer from '@theme/components/Footer'
+import Common from '@theme/components/Common'
+import { resolveSidebarItems } from '@theme/helpers/utils'
+
+export default {
+  components: { HomeBlog, Home, Page, Common, Footer },
+
+  computed: {
+    sidebarItems () {
+      return resolveSidebarItems(
+        this.$page,
+        this.$page.regularPath,
+        this.$site,
+        this.$localePath
+      )
+    },
+    homeCom () {
+      const { type } = this.$themeConfig
+      if (type !== undefined) {
+        return type == 'blog' ? 'HomeBlog' : type
+      }
+      return 'Home'
+    }
+  }
+}
+</script>
+
+<style src="http://github.com/prismjs/themes/prism-tomorrow.css"></style>
+<style src="http://github.com/styles/theme.styl" lang="stylus"></style>
diff --git a/website/.vuepress/theme/layouts/Tag.vue b/website/.vuepress/theme/layouts/Tag.vue
new file mode 100644
index 00000000..7f761c1d
--- /dev/null
+++ b/website/.vuepress/theme/layouts/Tag.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 公共布局 -->
+  <Common class="tag-wrapper" :sidebar="false">
+    <!-- 标签集合 -->
+    <ModuleTransition>
+      <TagList
+        v-show="recoShowModule"
+        class="tags"
+        :currentTag="$currentTags.key"
+        @getCurrentTag="tagClick"></TagList>
+    </ModuleTransition>
+
+    <!-- 博客列表 -->
+    <ModuleTransition delay="0.08">
+      <note-abstract
+        v-show="recoShowModule"
+        class="list"
+        :data="posts"
+        :currentPage="currentPage"
+        @currentTag="$currentTags.key"></note-abstract>
+    </ModuleTransition>
+
+    <!-- 分页 -->
+    <ModuleTransition delay="0.16">
+      <pagation
+        class="pagation"
+        :total="posts.length"
+        :currentPage="currentPage"
+        @getCurrentPage="getCurrentPage"></pagation>
+    </ModuleTransition>
+  </Common>
+</template>
+
+<script>
+import Common from '@theme/components/Common'
+import NoteAbstract from '@theme/components/NoteAbstract'
+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, moduleTransitonMixin],
+  components: { Common, NoteAbstract, TagList, ModuleTransition },
+
+  data () {
+    return {
+      currentPage: 1,
+      currentTag: '全部'
+    }
+  },
+
+  computed: {
+    // 时间降序后的博客列表
+    posts () {
+      let posts = this.$currentTags.pages
+      posts = filterPosts(posts)
+      sortPostsByStickyAndDate(posts)
+      return posts
+    }
+  },
+
+  mounted () {
+    this._setPage(this._getStoragePage())
+  },
+
+  methods: {
+    // 获取当前tag
+    getCurrentTag (tag) {
+      this.$emit('currentTag', tag)
+    },
+    tagClick (tagInfo) {
+      this.$router.push({ path: tagInfo.path })
+    },
+    // 获取当前页码
+    getCurrentPage (page) {
+      this._setPage(page)
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
+    _setPage (page) {
+      this.currentPage = page
+      this.$page.currentPage = page
+      this._setStoragePage(page)
+    }
+  },
+
+  watch: {
+    $route () {
+      this._setPage(this._getStoragePage())
+    }
+  }
+}
+</script>
+
+<style src="http://github.com/styles/theme.styl" lang="stylus"></style>
+
+<style src="http://github.com/prismjs/themes/prism-tomorrow.css"></style>
+<style lang="stylus" scoped>
+@require '../styles/mode.styl'
+.tag-wrapper
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 4.6rem 2.5rem 0;
+
+@media (max-width: $MQMobile)
+  .tag-wrapper
+    padding: 4.6rem 1rem 0;
+</style>
diff --git a/website/.vuepress/theme/layouts/Tags.vue b/website/.vuepress/theme/layouts/Tags.vue
new file mode 100644
index 00000000..aecf550c
--- /dev/null
+++ b/website/.vuepress/theme/layouts/Tags.vue
@@ -0,0 +1,100 @@
+<template>
+  <Common  class="tags-wrapper" :sidebar="false">
+    <!-- 标签集合 -->
+    <ModuleTransition>
+      <TagList
+        v-show="recoShowModule"
+        :currentTag="currentTag"
+        @getCurrentTag="tagClick"></TagList>
+    </ModuleTransition>
+
+    <!-- 博客列表 -->
+    <ModuleTransition delay="0.08">
+      <note-abstract
+        v-show="recoShowModule"
+        class="list"
+        :data="$recoPosts"
+        :currentPage="currentPage"
+        :currentTag="currentTag"
+        @currentTag="getCurrentTag"></note-abstract>
+    </ModuleTransition>
+
+    <!-- 分页 -->
+    <ModuleTransition delay="0.16">
+      <pagation
+        class="pagation"
+        :total="$recoPosts.length"
+        :currentPage="currentPage"
+        @getCurrentPage="getCurrentPage"></pagation>
+    </ModuleTransition>
+  </Common>
+</template>
+
+<script>
+import Common from '@theme/components/Common'
+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, moduleTransitonMixin],
+  components: { Common, NoteAbstract, TagList, ModuleTransition },
+  data () {
+    return {
+      tags: [],
+      currentTag: '全部',
+      currentPage: 1,
+      allTagName: '全部'
+    }
+  },
+
+  created () {
+    if (this.$tags.list.length > 0) {
+      this.currentTag = this.$route.query.tag ? this.$route.query.tag : this.currentTag
+    }
+  },
+
+  mounted () {
+    this._setPage(this._getStoragePage())
+  },
+
+  methods: {
+
+    tagClick (tagInfo) {
+      this.$router.push({ path: tagInfo.path })
+    },
+
+    getCurrentTag (tag) {
+      this.$emit('currentTag', tag)
+    },
+
+    getCurrentPage (page) {
+      this._setPage(page)
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
+    _setPage (page) {
+      this.currentPage = page
+      this.$page.currentPage = page
+      this._setStoragePage(page)
+    }
+  }
+}
+</script>
+
+<style src="http://github.com/prismjs/themes/prism-tomorrow.css"></style>
+<style src="http://github.com/styles/theme.styl" lang="stylus"></style>
+
+<style lang="stylus" scoped>
+.tags-wrapper
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 4.6rem 2.5rem 0;
+
+@media (max-width: $MQMobile)
+  .tags-wrapper
+    padding: 5rem 0.6rem 0;
+</style>
diff --git a/website/.vuepress/theme/layouts/TimeLines.vue b/website/.vuepress/theme/layouts/TimeLines.vue
new file mode 100644
index 00000000..30dd5f2a
--- /dev/null
+++ b/website/.vuepress/theme/layouts/TimeLines.vue
@@ -0,0 +1,153 @@
+<template>
+  <Common class="timeline-wrapper" :sidebar="false">
+    <ul class="timeline-content">
+      <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-show="recoShowModule">
+          <h3 class="year">{{item.year}}</h3>
+          <ul class="year-wrapper">
+            <li v-for="(subItem, subIndex) in item.data" :key="subIndex">
+              <span class="date">{{subItem.frontmatter.date | dateFormat}}</span>
+              <span class="title" @click="go(subItem.path)">{{subItem.title}}</span>
+            </li>
+          </ul>
+        </li>
+      </ModuleTransition>
+    </ul>
+  </Common>
+</template>
+
+<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: {
+    dateFormat (date, type) {
+      function renderTime (date) {
+        const dateee = new Date(date).toJSON()
+        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/-/g, '/')
+      }
+      date = renderTime(date)
+      const dateObj = new Date(date)
+      const mon = dateObj.getMonth() + 1
+      const day = dateObj.getDate()
+      return `${mon}-${day}`
+    }
+  },
+  methods: {
+    go (url) {
+      this.$router.push({ path: url })
+    }
+  }
+}
+</script>
+
+<style src="http://github.com/styles/theme.styl" lang="stylus"></style>
+
+<style lang="stylus" scoped>
+@require '../styles/wrapper.styl'
+
+.timeline-wrapper
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 4.6rem 2.5rem 0;
+  .timeline-content
+    box-sizing border-box
+    position relative
+    list-style none
+    &::after {
+      content: " ";
+      position: absolute;
+      top: 14px;
+      left: 0;
+      z-index: -1;
+      margin-left: -2px;
+      width: 4px;
+      height: 100%;
+      background: var(--border-color);
+    }
+    .desc, .year {
+      position: relative;
+      color var(--text-color);
+      font-size 16px
+      &:before {
+        content: " ";
+        position: absolute;
+        z-index 2;
+        left: -20px;
+        top: 50%;
+        margin-left: -4px;
+        margin-top: -4px;
+        width: 8px;
+        height: 8px;
+        background: var(--background-color);
+        border: 1px solid var(--border-color);
+        border-radius: 50%;
+      }
+    }
+    .year {
+      margin: 80px 0 0px;
+      color var(--text-color);
+      font-weight: 700;
+      font-size 26px
+    }
+    .year-wrapper {
+      padding-left 0!important
+      li {
+        display flex
+        padding 30px 0 10px
+        list-style none
+        border-bottom: 1px dashed var(--border-color);
+        position relative
+        &:hover {
+          .date {
+            color $accentColor
+            &::before {
+              background $accentColor
+            }
+          }
+          .title {
+            color $accentColor
+          }
+        }
+        .date {
+          width 40px
+          line-height 30px
+          color var(--text-color-sub)
+          font-size 12px
+          &::before {
+            content: " ";
+            position: absolute;
+            left: -19px;
+            top: 41px;
+            width: 6px;
+            height: 6px;
+            margin-left: -4px;
+            background: var(--background-color);
+            border-radius: 50%;
+            border: 1px solid var(--border-color);
+            z-index 2
+          }
+        }
+        .title {
+          line-height 30px
+          color var(--text-color-sub)
+          font-size 16px
+          cursor pointer
+        }
+      }
+    }
+@media (max-width: $MQMobile)
+  .timeline-wrapper
+    margin: 0 1.2rem;
+</style>
diff --git a/website/.vuepress/theme/lib/vuepress-theme-reco.js b/website/.vuepress/theme/lib/vuepress-theme-reco.js
new file mode 100644
index 00000000..ee7a9c3c
--- /dev/null
+++ b/website/.vuepress/theme/lib/vuepress-theme-reco.js
@@ -0,0 +1,7 @@
+'use strict'
+
+module.exports = vuepressThemeReco
+
+function vuepressThemeReco () {
+  // TODO
+}
diff --git a/website/.vuepress/theme/locals/en.js b/website/.vuepress/theme/locals/en.js
new file mode 100644
index 00000000..1d917f24
--- /dev/null
+++ b/website/.vuepress/theme/locals/en.js
@@ -0,0 +1,8 @@
+export default {
+  homeBlog: {
+    article: 'Article',
+    tag: 'Tag',
+    category: 'Category',
+    friendLink: 'Friend Link'
+  }
+}
diff --git a/website/.vuepress/theme/locals/index.js b/website/.vuepress/theme/locals/index.js
new file mode 100644
index 00000000..05f22191
--- /dev/null
+++ b/website/.vuepress/theme/locals/index.js
@@ -0,0 +1,7 @@
+import zhHans from './zh-hans.js'
+import zhHant from './zh-hant.js'
+import en from './en.js'
+import ja from './ja.js'
+import ko from './ko.js'
+
+export { zhHans, zhHant, en, ja, ko }
diff --git a/website/.vuepress/theme/locals/ja.js b/website/.vuepress/theme/locals/ja.js
new file mode 100644
index 00000000..c5b81f8f
--- /dev/null
+++ b/website/.vuepress/theme/locals/ja.js
@@ -0,0 +1,8 @@
+export default {
+  homeBlog: {
+    article: '文章',
+    tag: 'ラベル',
+    category: '分類',
+    friendLink: '友情リンク'
+  }
+}
diff --git a/website/.vuepress/theme/locals/ko.js b/website/.vuepress/theme/locals/ko.js
new file mode 100644
index 00000000..7b53fe35
--- /dev/null
+++ b/website/.vuepress/theme/locals/ko.js
@@ -0,0 +1,8 @@
+export default {
+  homeBlog: {
+    article: '글',
+    tag: '태그',
+    category: '분류',
+    friendLink: '링크 참조'
+  }
+}
diff --git a/website/.vuepress/theme/locals/zh-hans.js b/website/.vuepress/theme/locals/zh-hans.js
new file mode 100644
index 00000000..adf34dba
--- /dev/null
+++ b/website/.vuepress/theme/locals/zh-hans.js
@@ -0,0 +1,8 @@
+export default {
+  homeBlog: {
+    article: '文章',
+    tag: '标签',
+    category: '分类',
+    friendLink: '友情链接'
+  }
+}
diff --git a/website/.vuepress/theme/locals/zh-hant.js b/website/.vuepress/theme/locals/zh-hant.js
new file mode 100644
index 00000000..e84913f2
--- /dev/null
+++ b/website/.vuepress/theme/locals/zh-hant.js
@@ -0,0 +1,8 @@
+export default {
+  homeBlog: {
+    article: '文章',
+    tag: '標簽',
+    category: '分類',
+    friendLink: '友情鏈接'
+  }
+}
diff --git a/website/.vuepress/theme/mixins/index.js b/website/.vuepress/theme/mixins/index.js
new file mode 100644
index 00000000..5afa78a9
--- /dev/null
+++ b/website/.vuepress/theme/mixins/index.js
@@ -0,0 +1,26 @@
+export default {
+  methods: {
+    _tagColor () {
+      const tagColorArr = ['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87', '#e15b64', '#f47e60', '#f8b26a', '#f26d6d', '#67cc86', '#fb9b5f', '#3498db']
+      const index = Math.floor(Math.random() * tagColorArr.length)
+      return tagColorArr[index]
+    },
+    // 获取当前页码
+    _getStoragePage () {
+      const path = window.location.pathname
+      const currentPage = JSON.parse(sessionStorage.getItem('currentPage'))
+
+      if (currentPage === null || path !== currentPage.path) {
+        sessionStorage.setItem('currentPage', { page: 1, path: '' })
+        return 1
+      }
+
+      return parseInt(currentPage.page)
+    },
+    // 设置当前页码
+    _setStoragePage (page) {
+      const path = window.location.pathname
+      sessionStorage.setItem('currentPage', JSON.stringify({ page, path }))
+    }
+  }
+}
diff --git a/website/.vuepress/theme/mixins/locals.js b/website/.vuepress/theme/mixins/locals.js
new file mode 100644
index 00000000..58abc458
--- /dev/null
+++ b/website/.vuepress/theme/mixins/locals.js
@@ -0,0 +1,25 @@
+import { zhHans, zhHant, en, ja, ko } from '../locals/index'
+
+export default {
+  computed: {
+    $recoLocals () {
+      const recoLocals = this.$themeLocaleConfig.recoLocals
+      if (recoLocals) {
+        return recoLocals
+      }
+      if (/^zh\-(CN|SG)$/.test(this.$lang)) {
+        return zhHans
+      }
+      if (/^zh\-(HK|MO|TW)$/.test(this.$lang)) {
+        return zhHant
+      }
+      if (/^ja\-JP$/.test(this.$lang)) {
+        return ja
+      }
+      if (/^ko\-KR$/.test(this.$lang)) {
+        return ko
+      }
+      return en
+    }
+  }
+}
diff --git a/website/.vuepress/theme/mixins/moduleTransiton.js b/website/.vuepress/theme/mixins/moduleTransiton.js
new file mode 100644
index 00000000..42cf101a
--- /dev/null
+++ b/website/.vuepress/theme/mixins/moduleTransiton.js
@@ -0,0 +1,13 @@
+export default {
+  data () {
+    return {
+      recoShowModule: false
+    }
+  },
+  mounted () {
+    this.recoShowModule = true
+  },
+  destroyed () {
+    this.recoShowModule = false
+  }
+}
diff --git a/website/.vuepress/theme/mixins/pagination.js b/website/.vuepress/theme/mixins/pagination.js
new file mode 100644
index 00000000..dbefecc7
--- /dev/null
+++ b/website/.vuepress/theme/mixins/pagination.js
@@ -0,0 +1,21 @@
+export default {
+  methods: {
+    // 获取当前页码
+    _getStoragePage () {
+      const path = window.location.pathname
+      const currentPage = JSON.parse(sessionStorage.getItem('currentPage'))
+
+      if (currentPage === null || path !== currentPage.path) {
+        sessionStorage.setItem('currentPage', { page: 1, path: '' })
+        return 1
+      }
+
+      return parseInt(currentPage.page)
+    },
+    // 设置当前页码
+    _setStoragePage (page) {
+      const path = window.location.pathname
+      sessionStorage.setItem('currentPage', JSON.stringify({ page, path }))
+    }
+  }
+}
diff --git a/website/.vuepress/theme/mixins/posts.js b/website/.vuepress/theme/mixins/posts.js
new file mode 100644
index 00000000..4c71405b
--- /dev/null
+++ b/website/.vuepress/theme/mixins/posts.js
@@ -0,0 +1,60 @@
+import { filterPosts, sortPostsByStickyAndDate, sortPostsByDate } from '../helpers/postData'
+
+export default {
+  computed: {
+    $recoPosts () {
+      const {
+        $categories: { list: articles }
+      } = this
+
+      let posts = articles.reduce((allData, currentData) => {
+        return [...allData, ...currentData.pages]
+      }, [])
+
+      posts = filterPosts(posts, false)
+      sortPostsByStickyAndDate(posts)
+
+      return posts
+    },
+    $recoPostsForTimeline () {
+      let pages = this.$recoPosts
+      const formatPages = {}
+      const formatPagesArr = []
+      pages = filterPosts(pages, true)
+      this.pages = pages.length == 0 ? [] : pages
+      for (let i = 0, length = pages.length; i < length; i++) {
+        const page = pages[i]
+        const pageDateYear = dateFormat(page.frontmatter.date, 'year')
+        if (formatPages[pageDateYear]) formatPages[pageDateYear].push(page)
+        else {
+          formatPages[pageDateYear] = [page]
+        }
+      }
+
+      for (const key in formatPages) {
+        const data = formatPages[key]
+        sortPostsByDate(data)
+        formatPagesArr.unshift({
+          year: key,
+          data
+        })
+      }
+
+      return formatPagesArr
+    }
+  }
+}
+
+function renderTime (date) {
+  var dateee = new Date(date).toJSON()
+  return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/-/g, '/')
+}
+function dateFormat (date, type) {
+  date = renderTime(date)
+  const dateObj = new Date(date)
+  const year = dateObj.getFullYear()
+  const mon = dateObj.getMonth() + 1
+  const day = dateObj.getDate()
+  if (type == 'year') return year
+  else return `${mon}-${day}`
+}
diff --git a/website/.vuepress/theme/noopModule.js b/website/.vuepress/theme/noopModule.js
new file mode 100644
index 00000000..b1c6ea43
--- /dev/null
+++ b/website/.vuepress/theme/noopModule.js
@@ -0,0 +1 @@
+export default {}
diff --git a/website/.vuepress/theme/package.json b/website/.vuepress/theme/package.json
new file mode 100644
index 00000000..650d415e
--- /dev/null
+++ b/website/.vuepress/theme/package.json
@@ -0,0 +1,65 @@
+{
+  "_args": [
+    [
+      "vuepress-theme-reco@1.4.5",
+      "/Users/haolin3/Project/hello-algorithm"
+    ]
+  ],
+  "_development": true,
+  "_from": "vuepress-theme-reco@1.4.5",
+  "_id": "vuepress-theme-reco@1.4.5",
+  "_inBundle": false,
+  "_integrity": "sha512-6PUIzDIzfs8ZCdnUiPdYuCc1IHpRDuNXvD0RuBCbw8N6LsBsPSJy7aiffcDebjDyOpFFkEzTBDNH1EtVGkbExg==",
+  "_location": "/vuepress-theme-reco",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "version",
+    "registry": true,
+    "raw": "vuepress-theme-reco@1.4.5",
+    "name": "vuepress-theme-reco",
+    "escapedName": "vuepress-theme-reco",
+    "rawSpec": "1.4.5",
+    "saveSpec": null,
+    "fetchSpec": "1.4.5"
+  },
+  "_requiredBy": [
+    "#DEV:/"
+  ],
+  "_resolved": "https://registry.npmjs.org/vuepress-theme-reco/-/vuepress-theme-reco-1.4.5.tgz",
+  "_spec": "1.4.5",
+  "_where": "/Users/haolin3/Project/hello-algorithm",
+  "author": {
+    "name": "reco_luan"
+  },
+  "bugs": {
+    "url": "https://github.com/vuepress-reco/vuepress-theme-reco/issues"
+  },
+  "dependencies": {
+    "@vuepress-reco/vuepress-plugin-back-to-top": "^1.4.0",
+    "@vuepress-reco/vuepress-plugin-comments": "^1.4.3",
+    "@vuepress-reco/vuepress-plugin-loading-page": "^1.4.0",
+    "@vuepress-reco/vuepress-plugin-pagation": "^1.4.0",
+    "@vuepress/plugin-blog": "1.9.2",
+    "@vuepress/plugin-medium-zoom": "1.4.1",
+    "docsearch.js": "2.6.3",
+    "md5": "2.2.1",
+    "valine": "1.4.4",
+    "vue-click-outside": "1.1.0"
+  },
+  "description": "A simple and beautiful vuepress Blog & Doc theme.",
+  "gitHead": "44f9d0eb140fed40ba3cce815213c978a06faee0",
+  "homepage": "https://vuepress-theme-reco.recoluan.com/",
+  "keywords": [
+    "vuepress",
+    "vue",
+    "theme"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "name": "vuepress-theme-reco",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress-reco/vuepress-theme-reco.git"
+  },
+  "version": "1.4.5"
+}
diff --git a/website/.vuepress/theme/styles/arrow.styl b/website/.vuepress/theme/styles/arrow.styl
new file mode 100644
index 00000000..d116e1cc
--- /dev/null
+++ b/website/.vuepress/theme/styles/arrow.styl
@@ -0,0 +1,22 @@
+@require './config'
+
+.arrow
+  display inline-block
+  width 0
+  height 0
+  &.up
+    border-left 4px solid transparent
+    border-right 4px solid transparent
+    border-bottom 6px solid var(--text-color-sub)
+  &.down
+    border-left 4px solid transparent
+    border-right 4px solid transparent
+    border-top 6px solid var(--text-color-sub)
+  &.right
+    border-top 4px solid transparent
+    border-bottom 4px solid transparent
+    border-left 6px solid var(--text-color-sub)
+  &.left
+    border-top 4px solid transparent
+    border-bottom 4px solid transparent
+    border-right 6px solid var(--text-color-sub)
diff --git a/website/.vuepress/theme/styles/code.styl b/website/.vuepress/theme/styles/code.styl
new file mode 100644
index 00000000..0cfa3c1d
--- /dev/null
+++ b/website/.vuepress/theme/styles/code.styl
@@ -0,0 +1,135 @@
+.content__default
+  code
+    color lighten($textColor, 20%)
+    padding 0.25rem 0.5rem
+    margin 0
+    font-size 0.85em
+    background-color var(--code-color)
+    border-radius 3px
+    .token
+      &.deleted
+        color #EC5975
+      &.inserted
+        color $accentColor
+
+.content__default
+  pre, pre[class*="language-"]
+    line-height 1.4
+    padding 1.25rem 1.5rem
+    margin 0.85rem 0
+    background-color $codeBgColor
+    border-radius 6px
+    overflow auto
+    code
+      color #fff
+      padding 0
+      background-color transparent
+      border-radius 0
+
+div[class*="language-"]
+  position relative
+  background-color $codeBgColor
+  border-radius 6px
+  .highlight-lines
+    user-select none
+    padding-top 1.3rem
+    position absolute
+    top 0
+    left 0
+    width 100%
+    line-height 1.4
+    .highlighted
+      background-color rgba(0, 0, 0, 66%)
+  pre, pre[class*="language-"]
+    background transparent
+    position relative
+    z-index 1
+  &::before
+    position absolute
+    z-index 3
+    top 0.8em
+    right 1em
+    font-size 0.75rem
+    color rgba(255, 255, 255, 0.4)
+  &:not(.line-numbers-mode)
+    .line-numbers-wrapper
+      display none
+  &.line-numbers-mode
+    .highlight-lines .highlighted
+        position relative
+        &:before
+          content ' '
+          position absolute
+          z-index 3
+          left 0
+          top 0
+          display block
+          width $lineNumbersWrapperWidth
+          height 100%
+          background-color rgba(0, 0, 0, 66%)
+    pre
+      padding-left $lineNumbersWrapperWidth + 1 rem
+      vertical-align middle
+    .line-numbers-wrapper
+      position absolute
+      top 0
+      width $lineNumbersWrapperWidth
+      text-align center
+      color rgba(255, 255, 255, 0.3)
+      padding 1.25rem 0
+      line-height 1.4
+      br
+        user-select none
+      .line-number
+        position relative
+        z-index 4
+        user-select none
+        font-size 0.85em
+    &::after
+      content ''
+      position absolute
+      z-index 2
+      top 0
+      left 0
+      width $lineNumbersWrapperWidth
+      height 100%
+      border-radius 6px 0 0 6px
+      border-right 1px solid rgba(0, 0, 0, 66%)
+      background-color $codeBgColor
+
+
+for lang in $codeLang
+  div{'[class~="language-' + lang + '"]'}
+    &:before
+      content ('' + lang)
+
+div[class~="language-javascript"]
+  &:before
+    content "js"
+
+div[class~="language-typescript"]
+  &:before
+    content "ts"
+
+div[class~="language-markup"]
+  &:before
+    content "html"
+
+div[class~="language-markdown"]
+  &:before
+    content "md"
+
+div[class~="language-json"]:before
+  content "json"
+
+div[class~="language-ruby"]:before
+  content "rb"
+
+div[class~="language-python"]:before
+  content "py"
+
+div[class~="language-bash"]:before
+  content "sh"
+
+div[class~="language-php"]:before
+  content "php"
diff --git a/website/.vuepress/theme/styles/custom-blocks.styl b/website/.vuepress/theme/styles/custom-blocks.styl
new file mode 100644
index 00000000..54c564ec
--- /dev/null
+++ b/website/.vuepress/theme/styles/custom-blocks.styl
@@ -0,0 +1,51 @@
+.custom-block
+  .custom-block-title
+    font-weight 600
+    margin-bottom -0.4rem
+  &.tip, &.warning, &.danger
+    padding .1rem 1.5rem
+    border-left-width .5rem
+    border-left-style solid
+    margin 1rem 0
+  &.tip
+    background-color var(--code-color)
+    border-color #67cc86
+    .custom-block-title
+      color #67cc86
+  &.warning
+    background-color var(--code-color)
+    border-color #fb9b5f
+    .custom-block-title
+      color #fb9b5f
+  &.danger
+    background-color var(--code-color)
+    border-color #f26d6d
+    .custom-block-title
+      color #f26d6d
+  &.right
+    color transparentify($textColor, 0.4)
+    font-size 0.9rem
+    text-align right
+  &.theorem
+    margin 1rem 0
+    padding .1rem 1.5rem
+    border-radius 0.4rem
+    background-color var(--code-color)
+    .title
+      font-weight bold
+  &.details
+    display block
+    position relative
+    border-radius 2px
+    margin 1em 0
+    padding 1rem
+    background-color var(--code-color)
+    h4
+      margin-top 0
+    figure, p
+      &:last-child
+        margin-bottom 0
+        padding-bottom 0
+    summary
+      outline none
+      cursor pointer
diff --git a/website/.vuepress/theme/styles/iconfont.css b/website/.vuepress/theme/styles/iconfont.css
new file mode 100644
index 00000000..63028ad1
--- /dev/null
+++ b/website/.vuepress/theme/styles/iconfont.css
@@ -0,0 +1,174 @@
+@font-face {
+  font-family:"iconfont";
+  src: url('http://at.alicdn.com/t/font_1030519_ookn0nnv0z8.eot?t=1574737898757');
+  /* IE9 */
+  src: url('http://at.alicdn.com/t/font_1030519_ookn0nnv0z8.eot?t=1574737898757#iefix') format('embedded-opentype'),
+  /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('http://at.alicdn.com/t/font_1030519_ookn0nnv0z8.woff?t=1574737898757') format('woff'), url('http://at.alicdn.com/t/font_1030519_ookn0nnv0z8.ttf?t=1574737898757') format('truetype'),
+  /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('http://at.alicdn.com/t/font_1030519_ookn0nnv0z8.svg?t=1574737898757#iconfont') format('svg');
+  /* iOS 4.1- */
+}
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.reco-douban:before {
+  content:"\e603";
+}
+.reco-wechat:before {
+  content:"\e720";
+}
+.reco-color:before {
+  content:"\eae9";
+}
+.reco-blog:before {
+  content:"\e61d";
+}
+.reco-sf:before {
+  content:"\e610";
+}
+.reco-message:before {
+  content:"\e634";
+}
+.reco-eye:before {
+  content:"\e669";
+}
+.reco-search:before {
+  content:"\e611";
+}
+.reco-category:before {
+  content:"\e61e";
+}
+.reco-npm:before {
+  content:"\e88d";
+}
+.reco-menu:before {
+  content:"\e67c";
+}
+.reco-suggestion:before {
+  content:"\e608";
+}
+.reco-coding:before {
+  content:"\e601";
+}
+.reco-github:before {
+  content:"\e628";
+}
+.reco-mail:before {
+  content:"\e624";
+}
+.reco-other:before {
+  content:"\e60e";
+}
+.reco-home:before {
+  content:"\e65b";
+}
+.reco-document:before {
+  content:"\e67a";
+}
+.reco-huawei:before {
+  content:"\e6b9";
+}
+.reco-up:before {
+  content:"\e68b";
+}
+.reco-weibo:before {
+  content:"\e612";
+}
+.reco-lock:before {
+  content:"\e60f";
+}
+.reco-fullscreen:before {
+  content:"\e602";
+}
+.reco-tag:before {
+  content:"\e633";
+}
+.reco-date:before {
+  content:"\e63b";
+}
+.reco-jianshu:before {
+  content:"\e60c";
+}
+.reco-friend:before {
+  content:"\e62f";
+}
+.reco-bokeyuan:before {
+  content:"\e626";
+}
+.reco-beian:before {
+  content:"\e667";
+}
+.reco-copyright:before {
+  content:"\ef87";
+}
+.reco-rss:before {
+  content:"\f09d";
+}
+.reco-bilibili:before {
+  content:"\e630";
+}
+.reco-account:before {
+  content:"\e607";
+}
+.reco-qq:before {
+  content:"\e67b";
+}
+.reco-theme:before {
+  content:"\e7e8";
+}
+.reco-three:before {
+  content:"\e644";
+}
+.reco-gitlab:before {
+  content:"\e63c";
+}
+.reco-api:before {
+  content:"\e662";
+}
+.reco-mayun:before {
+  content:"\e6d0";
+}
+.reco-zhihu:before {
+  content:"\e605";
+}
+.reco-facebook:before {
+  content:"\e606";
+}
+.reco-taobao:before {
+  content:"\e6a5";
+}
+.reco-tongzhi:before {
+  content:"\e764";
+}
+.reco-douyin:before {
+  content:"\e654";
+}
+.reco-v2ex:before {
+  content:"\e62a";
+}
+.reco-sticky:before {
+  content:"\e62b";
+}
+.reco-toutiao:before {
+  content:"\e6b7";
+}
+.reco-linkedin:before {
+  content:"\e668";
+}
+.reco-faq:before {
+  content:"\e643";
+}
+.reco-twitter:before {
+  content:"\e60b";
+}
+.reco-csdn:before {
+  content:"\e609";
+}
+.reco-juejin:before {
+  content:"\e613";
+}
diff --git a/website/.vuepress/theme/styles/mobile.styl b/website/.vuepress/theme/styles/mobile.styl
new file mode 100644
index 00000000..cb44a7d7
--- /dev/null
+++ b/website/.vuepress/theme/styles/mobile.styl
@@ -0,0 +1,39 @@
+// @require './config'
+
+$mobileSidebarWidth = $sidebarWidth * 0.82
+
+// narrow desktop / iPad
+@media (max-width: $MQNarrow)
+  .sidebar
+    font-size 15px
+    width $mobileSidebarWidth
+  .page, .password-wrapper-in
+    margin-left $mobileSidebarWidth
+
+// wide mobile
+@media (max-width: $MQMobile)
+  .sidebar
+    top 0
+    padding-top $navbarHeight
+    transform translateX(-100%)
+    transition transform .2s ease
+  .page, .password-wrapper-in
+    margin-left 0
+  .theme-container
+    &.sidebar-open
+      .sidebar
+        transform translateX(0)
+    &.no-navbar
+      .sidebar
+        padding-top: 0
+  .password-shadow
+    padding-left 0
+
+// narrow mobile
+@media (max-width: $MQMobileNarrow)
+  h1
+    font-size 1.9rem
+  .content__default
+    div[class*="language-"]
+      margin 0.85rem -1.5rem
+      border-radius 0
diff --git a/website/.vuepress/theme/styles/mode.styl b/website/.vuepress/theme/styles/mode.styl
new file mode 100644
index 00000000..c74ac858
--- /dev/null
+++ b/website/.vuepress/theme/styles/mode.styl
@@ -0,0 +1,38 @@
+:root
+  --default-color-10 $lightColor10
+  --default-color-9 $lightColor9
+  --default-color-8 $lightColor8
+  --default-color-7 $lightColor7
+  --default-color-6 $lightColor6
+  --default-color-5 $lightColor5
+  --default-color-4 $lightColor4
+  --default-color-3 $lightColor3
+  --default-color-2 $lightColor2
+  --default-color-1 $lightColor1
+  --background-color $backgroundColor
+  --box-shadow $boxShadow
+  --box-shadow-hover $boxShadowHover
+  --text-color $textColor
+  --text-color-sub $textColorSub
+  --border-color $borderColor
+  --code-color $codeColor
+  --mask-color $maskColor
+  @media (prefers-color-scheme: dark)
+    --default-color-10 $darkColor10
+    --default-color-9 $darkColor9
+    --default-color-8 $darkColor8
+    --default-color-7 $darkColor7
+    --default-color-6 $darkColor6
+    --default-color-5 $darkColor5
+    --default-color-4 $darkColor4
+    --default-color-3 $darkColor3
+    --default-color-2 $darkColor2
+    --default-color-1 $darkColor1
+    --background-color $backgroundColorDark
+    --box-shadow $boxShadowDark
+    --box-shadow-hover $boxShadowHoverDark
+    --text-color $textColorDark
+    --text-color-sub $textColorSubDark
+    --border-color $borderColorDark
+    --code-color $codeColorDark
+    --mask-color $maskColorDark
diff --git a/website/.vuepress/theme/styles/palette.styl b/website/.vuepress/theme/styles/palette.styl
new file mode 100644
index 00000000..a0dfaa83
--- /dev/null
+++ b/website/.vuepress/theme/styles/palette.styl
@@ -0,0 +1,47 @@
+$darkColor10 = rgba(0, 0, 0, 1)
+$darkColor9 = rgba(0, 0, 0, .9)
+$darkColor8 = rgba(0, 0, 0, .8)
+$darkColor7 = rgba(0, 0, 0, .7)
+$darkColor6 = rgba(0, 0, 0, .6)
+$darkColor5 = rgba(0, 0, 0, .5)
+$darkColor4 = rgba(0, 0, 0, .4)
+$darkColor3 = rgba(0, 0, 0, .3)
+$darkColor2 = rgba(0, 0, 0, .2)
+$darkColor1 = rgba(0, 0, 0, .1)
+
+$lightColor10 = rgba(255, 255, 255, 1)
+$lightColor9 = rgba(255, 255, 255, .9)
+$lightColor8 = rgba(255, 255, 255, .8)
+$lightColor7 = rgba(255, 255, 255, .7)
+$lightColor6 = rgba(255, 255, 255, .6)
+$lightColor5 = rgba(255, 255, 255, .5)
+$lightColor4 = rgba(255, 255, 255, .4)
+$lightColor3 = rgba(255, 255, 255, .3)
+$lightColor2 = rgba(255, 255, 255, .2)
+$lightColor1 = rgba(255, 255, 255, .1)
+
+$textShadow = 0 2px 4px $darkColor1;
+$borderRadius = .25rem
+$lineNumbersWrapperWidth = 2.5rem
+
+$backgroundColor ?= #fff
+$backgroundColorDark ?= #181818
+
+$boxShadow = 0 1px 6px 0 $darkColor2
+$boxShadowHover = 0 2px 16px 0 $darkColor2
+$boxShadowDark = 0 1px 6px 0 $darkColor6
+$boxShadowHoverDark = 0 2px 16px 0 $darkColor6
+
+$textColor ?= #242424
+$textColorDark ?= $lightColor8
+$textColorSub = #7F7F7F
+$textColorSubDark = #8B8B8B
+
+$borderColor ?= #eaecef
+$borderColorDark ?= $darkColor3
+
+$codeColor ?= rgba(27, 31, 35, 0.05)
+$codeColorDark ?= $darkColor3
+
+$maskColor ?= #888
+$maskColorDark ?= #000
diff --git a/website/.vuepress/theme/styles/theme.styl b/website/.vuepress/theme/styles/theme.styl
new file mode 100644
index 00000000..535eb7e3
--- /dev/null
+++ b/website/.vuepress/theme/styles/theme.styl
@@ -0,0 +1,226 @@
+@require './mode'
+@require './code'
+@require './custom-blocks'
+@require './arrow'
+@require './wrapper'
+@require './toc'
+@require './iconfont.css'
+
+html, body
+  padding 0
+  margin 0
+body
+  font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  font-size 15px
+  color var(--text-color)
+  background-color var(--background-color)
+
+.page, .password-wrapper-in
+  overflow-x: hidden
+  margin-left $sidebarWidth
+
+.navbar
+  position fixed
+  z-index 20
+  top 0
+  left 0
+  right 0
+  height $navbarHeight
+  box-sizing border-box
+
+.sidebar-mask
+  position fixed
+  z-index 9
+  top 0
+  left 0
+  width 100vw
+  height 100vh
+  display none
+  background-color: rgba(0,0,0,.65);
+
+.sidebar
+  font-size 16px
+  background-color var(--background-color)
+  width $sidebarWidth
+  position fixed
+  z-index 10
+  margin 0
+  top $navbarHeight
+  left 0
+  bottom 0
+  box-sizing border-box
+  border-right 1px solid var(--border-color)
+  overflow-y auto
+
+.content__default:not(.custom)
+  @extend $wrapper
+  // > *:first-child
+  //   margin-top 1.6rem
+  a:hover
+    text-decoration underline
+  p.demo
+    padding 1rem 1.5rem
+    border 1px solid #ddd
+    border-radius 4px
+  img
+    max-width 100%
+
+.content__default.custom
+  padding 0
+  margin 0
+  img
+    max-width 100%
+
+a
+  font-weight 500
+  color $accentColor
+  text-decoration none
+
+p a code
+  font-weight 400
+  color $accentColor
+
+kbd
+  background #eee
+  border solid 0.15rem #ddd
+  border-bottom solid 0.25rem #ddd
+  border-radius 0.15rem
+  padding 0 0.15em
+
+blockquote
+  font-size .9rem
+  color #999
+  border-left .25rem solid #999
+  background-color var(--code-color)
+  margin 0.5rem 0
+  padding .25rem 0 .25rem 1rem
+  & > p
+    margin 0
+
+ul, ol
+  padding-left 1.2em
+
+strong
+  font-weight 600
+
+h1, h2, h3, h4, h5, h6
+  font-weight 500
+  line-height 1.25
+  .content__default:not(.custom) > &
+    margin-top (0.5rem - $navbarHeight)
+    padding-top ($navbarHeight + 1rem)
+    margin-bottom 0
+    &:first-child
+      margin-top -3.5rem
+      margin-bottom 1rem
+      + p, + pre, + .custom-block
+        margin-top 2rem
+  &:hover .header-anchor
+    opacity: 1
+
+h1
+  font-size 1.6rem
+
+h2
+  font-size 1.4rem
+  padding-bottom .3rem
+  border-bottom 1px solid var(--border-color)
+
+h3
+  font-size 1.2rem
+
+a.header-anchor
+  font-size 0.85em
+  float left
+  margin-left -0.87em
+  padding-right 0.23em
+  margin-top 0.125em
+  opacity 0
+  &:hover
+    text-decoration none
+
+code, kbd, .line-number
+  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
+
+p, ul, ol
+  line-height 1.7
+
+hr
+  border 0
+  border-top 1px solid var(--border-color)
+
+table
+  border-collapse collapse
+  margin 1rem 0
+  display: block
+  overflow-x: auto
+
+tr
+  border-top 1px solid var(--border-color)
+  &:nth-child(2n)
+    background-color var(--code-color)
+
+th, td
+  border 1px solid var(--border-color)
+  padding .6em 1em
+
+.theme-container
+  &.sidebar-open
+    .sidebar-mask
+      display: block
+  &.no-navbar
+    .content__default:not(.custom) > h1, h2, h3, h4, h5, h6
+        margin-top 1.5rem
+        padding-top 0
+    .sidebar
+      top 0
+
+@media (min-width: ($MQMobile + 1px))
+  .theme-container.no-sidebar
+    .sidebar
+      display none
+    .page, .password-wrapper-in
+      margin-left 0
+
+@require 'mobile.styl'
+
+.iconfont
+  font-size: 0.9rem;
+  color: var(--text-color-sub);
+
+/************** 滚动条 **************/
+::-webkit-scrollbar
+  width: 5px;
+  height: 5px;
+
+::-webkit-scrollbar-track-piece
+  // background-color: rgba(0, 0, 0, 0.2);
+
+::-webkit-scrollbar-thumb:vertical
+  height: 5px;
+  background-color: $accentColor;
+
+::-webkit-scrollbar-thumb:horizontal
+  width: 5px;
+  background-color: $accentColor;
+
+/************** 流程图的滚动条 **************/
+.vuepress-flowchart
+  overflow: auto
+
+/************** SW-Update Popup **************/
+
+.sw-update-popup
+  border-radius: $borderRadius!important;
+  box-shadow: var(--box-shadow)!important;
+  color: var(--text-color)!important;
+  background: var(--background-color)!important;
+  border: none!important;
+  > button
+    background: $accentColor;
+    border-radius: $borderRadius;
+    color: #fff;
+    -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
+    border: none;
diff --git a/website/.vuepress/theme/styles/toc.styl b/website/.vuepress/theme/styles/toc.styl
new file mode 100644
index 00000000..d3e71069
--- /dev/null
+++ b/website/.vuepress/theme/styles/toc.styl
@@ -0,0 +1,3 @@
+.table-of-contents
+  .badge
+    vertical-align middle
diff --git a/website/.vuepress/theme/styles/wrapper.styl b/website/.vuepress/theme/styles/wrapper.styl
new file mode 100644
index 00000000..a99262c7
--- /dev/null
+++ b/website/.vuepress/theme/styles/wrapper.styl
@@ -0,0 +1,9 @@
+$wrapper
+  max-width $contentWidth
+  margin 0 auto
+  padding 2rem 2.5rem
+  @media (max-width: $MQNarrow)
+    padding 2rem
+  @media (max-width: $MQMobileNarrow)
+    padding 1.5rem
+
diff --git a/website/README.md b/website/README.md
index a03eab9e..c5f7a3d5 100644
--- a/website/README.md
+++ b/website/README.md
@@ -1,5 +1,13 @@
----
-title:  奥利给
----
+# 这是你的主页
 
-这是一个彩蛋。
\ No newline at end of file
+---
+home: true
+heroImage: /hero.png
+heroImageStyle: {
+  maxHeight: '200px',
+  display: block,
+  margin: '6rem auto 1.5rem',
+  borderRadius: '50%',
+  boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
+}
+---
\ No newline at end of file