Merge branch 'master' of github.com:recoluan/vuepress-theme-reco

2019-01-29 14:23:29 +08:00 · 2019-01-29 14:23:29 +08:00 · ce9736c3c4
commit ce9736c3c4
parent 13698ee470 1841995529
39 changed files with 1030 additions and 261 deletions
--- a/21
+++ b/21
@ -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.
--- a/Layout.vue
+++ b/Layout.vue
@ -19,14 +19,16 @@

    <Home v-else-if="$page.frontmatter.home"/>

-    <Page v-else :sidebar-items="sidebarItems">
+    <Page v-else :sidebar-items="sidebarItems" @tagChange="tagChange">
      <slot name="page-top" slot="top"/>
      <slot name="page-bottom" slot="bottom"/>
    </Page>

-    <router-view></router-view>
+    <Valine :valineRefresh="valineRefresh"></Valine>

+    <router-view></router-view>
    <SWUpdatePopup :updateEvent="swUpdateEvent"/>
+    <BackToTop></BackToTop>
  </div>
 </template>

@ -39,14 +41,17 @@ import Page from "./pages/Page/";
 import Sidebar from "./components/Sidebar/";
 import SWUpdatePopup from "./components/SWUpdatePopup/";
 import { resolveSidebarItems } from "./util/"
+import BackToTop from "./components/BackToTop/"
+import Valine from './components/Valine/'

 export default {
-  components: { Home, Page, Sidebar, Navbar, SWUpdatePopup },
+  components: { Home, Page, Sidebar, Navbar, SWUpdatePopup, BackToTop, Valine },

  data() {
    return {
      isSidebarOpen: false,
-      swUpdateEvent: null
+      swUpdateEvent: null,
+      valineRefresh: false
    };
  },

@ -117,18 +122,15 @@ export default {
    });

    this.$on("sw-updated", this.onSWUpdated);
-
-    const { themeConfig } = this.$site;
-
-    if (!(themeConfig.showParticles != undefined && !themeConfig.showParticles)) {
-      localStorage.setItem('particle', JSON.stringify(themeConfig.particlesConfig || {}))
-      var script = document.createElement('script')
-      script.src = 'https://blog-static.cnblogs.com/files/luanhewei/particle.js'
-      document.querySelector('body').appendChild(script)
-    }
  },

  methods: {
+    tagChange () {
+      this.valineRefresh = true
+      setTimeout(() => {
+        this.valineRefresh = false
+      }, 300)
+    },
    toggleSidebar(to) {
      this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen;
    },
@ -162,3 +164,4 @@ export default {

 <style src="prismjs/themes/prism-tomorrow.css"></style>
 <style src="./styles/theme.styl" lang="stylus"></style> 
+
--- a/README.md
+++ b/README.md
@ -1,25 +1,32 @@
 # vuepress-theme-reco

-> 1. This is a vuepress theme aimed at adding the categories, TAB walls, pagination, comments and other features required for blogging;<br>
-> 2. The theme itself is minimalist and is modified based on the default theme of the vuepress.<br>
+![vuepress](https://img.shields.io/badge/vuepress-0.14.8-brightgreen.svg)
+![leancloud-storage](https://img.shields.io/badge/leancloud--storage-3.10.1-orange.svg)
+![valine](https://img.shields.io/badge/valine-1.3.4-blue.svg)
+
+> 1. It's a vuepress theme aimed at adding the categories, TAB walls, pagination, comments and other features required for blogging, suitable for `vuepress 0.x`;<br>
+> 2. The theme itself is minimalist and is modified based on the default theme of the vuepress;<br>
 > 3. You can open https://recoluan.gitlab.io to see it.

 ## Preview

-#### Home Page
-![home.png](https://upload-images.jianshu.io/upload_images/4660406-becd33be1de7391c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+### Home Page
+![home.png](https://upload-images.jianshu.io/upload_images/4660406-0bf9d91e9d289f75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


-#### Categories Page
-![category.png](https://upload-images.jianshu.io/upload_images/4660406-acdd68dfa730e5a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+### Categories Page
+![category.png](https://upload-images.jianshu.io/upload_images/4660406-8c7995d750c58536.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


-#### Tags page
-![tag.png](https://upload-images.jianshu.io/upload_images/4660406-d3b1ec44b870fbd6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+### Tags page
+![tag.png](https://upload-images.jianshu.io/upload_images/4660406-39c0d47627869e3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


-#### Article Page
-![article.png](https://upload-images.jianshu.io/upload_images/4660406-00303788bc2edcaa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+### Article Page
+![article.png](https://upload-images.jianshu.io/upload_images/4660406-a19cad487991409d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### Mobile
+![m.png](https://upload-images.jianshu.io/upload_images/4660406-7e2c78c48dd78284.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 ## Installation and use

@ -192,45 +199,44 @@ module.exports = {
 }  
 ```

-2. If you don't like the particle effect, you can turn it off. If you like it, you can also set the count and color of particles.
+2. You can add icon to the navigation menu，like this:
+
+```javascript
+{ text: 'Tags', link: '/tags/', icon: 'reco-tag' }
+```
+
+The project has built-in icons for you to choose
+
+![icon.png](https://upload-images.jianshu.io/upload_images/4660406-565b8ffd891b9cb3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+3. Sets the global author name

 ```javascript
 module.exports = {
-  title: "午后南杂",
-  theme: 'reco',
  themeConfig: {
-    // particles
-    showParticles: true,
-    // particlesConfig
-    particlesConfig: {
-      color: '0, 0, 0', //color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
-      pointColor: '0, 0, 0', //color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
-      opacity: 0.5, // the opacity of line (0~1), default: 0.5.
-      count: 60, // the number of lines, default: 66.
-      zIndex: -1,  // z-index property of the background, default: -1.
-    },
+    // author
+    author: 'reco_luan',
  }
 }
 ```

-3. If you want to click the tags in the list, you can set themeConfig's value of tagClick true 
+4. Set the author name for a single article

-```javascript
-module.exports = {
-  title: "午后南杂",
-  theme: 'reco',
-  themeConfig: {
-    // whether you can click the tags in the list
-    tagClick: true,
-  }  
-}  
+```bash
+---
+title: 你还没真的努力过，就轻易输给了懒惰
+date: 2015-04-23 11:21
+categories: article
+author: 渡渡
+---
 ```

+
 ## Home Config

 1. If your heroImage has your website title, maybe you need to set the value of `isShowTitleInHome` `false` to make title not show

-```
+```bash
 # this is your homepage

 ---
@ -242,7 +248,7 @@ isShowTitleInHome: false

 2. If you want change heroImage's style, you can set the value of `heroImageStyle` to achieve the effec you want

-```
+```bash
 # this is your homepage

 ---
@ -257,3 +263,18 @@ heroImageStyle: {
 }
 ---
 ```
+
+3. Home page footer can no longer be edited at will, only the owner's name can be changed. The global author name will be displayed first, and if not, the title of the blog will be displayed
+
+
+## Donate
+If you are enjoying this project, please consider making a donation to keep it alive, I will try my best to dedicate more time to work on it. 😉
+
+| Alipay | Wechat | 
+| :------: | :------: | 
+| ![Alipay.png](https://upload-images.jianshu.io/upload_images/4660406-43aff22cc8a5a4b1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240)|![WeChat.png](https://upload-images.jianshu.io/upload_images/4660406-58cfd94e92e60c48.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240)| 
+
+If you are not available for this, simply spreading the word for me would help too!
+
+## License
+[MIT](https://github.com/recoluan/vuepress-theme-reco/blob/master/LICENSE)
--- a/components/BackToTop/index.vue
+++ b/components/BackToTop/index.vue
@ -0,0 +1,110 @@
+<template>
+  <transition :name="transitionName">
+    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
+      <i class="iconfont reco-up"></i>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'BackToTop',
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    backPosition: {
+      type: Number,
+      default: 0
+    },
+    customStyle: {
+      type: Object,
+      default: function() {
+        return {
+          right: '1rem',
+          bottom: '3rem',
+          width: '2.5rem',
+          height: '2.5rem',
+          'border-radius': '.25rem',
+          'line-height': '2.5rem',
+          backgroundColor: 'rgba(231, 234, 241,.5)'
+        }
+      }
+    },
+    transitionName: {
+      type: String,
+      default: 'fade'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      interval: null,
+      isMoving: false
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.visible = window.pageYOffset > this.visibilityHeight
+    },
+    backToTop() {
+      if (this.isMoving) return
+      const start = window.pageYOffset
+      let i = 0
+      this.isMoving = true
+      this.interval = setInterval(() => {
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
+        if (next <= this.backPosition) {
+          window.scrollTo(0, this.backPosition)
+          clearInterval(this.interval)
+          this.isMoving = false
+        } else {
+          window.scrollTo(0, next)
+        }
+        i++
+      }, 16.7)
+    },
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return c / 2 * t * t + b
+      return -c / 2 * (--t * (t - 2) - 1) + b
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../../styles/config.styl'
+  .back-to-ceiling
+    position: fixed;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+    i 
+      font-size 1.6rem
+      color $accentColor
+  .back-to-ceiling:hover {
+    background: #d5dbe7;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0
+  }
+  .back-to-ceiling .Icon {
+    fill: #9aaabf;
+    background: none;
+  }
+</style>
--- a/components/Category/index.vue
+++ b/components/Category/index.vue
@ -76,7 +76,7 @@ export default {

@media (max-width: $MQMobile)
  .categories-wrapper
-    padding: 0 0.6rem;
+    padding: 0 1rem;
  .page-edit
    .edit-link
      margin-bottom .5rem
--- a/components/NavLink/index.vue
+++ b/components/NavLink/index.vue
@ -3,14 +3,19 @@
    class="nav-link"
    :to="{path: link}"
    v-if="!isExternal(link)"
-    :exact="exact">{{ item.text }}</router-link>
+    :exact="exact">
+    <i :class="`iconfont ${item.icon}`"></i>
+    {{ item.text }}
+  </router-link>
  <a
    v-else
    :href="link"
    class="nav-link external"
    :target="isMailto(link) || isTel(link) ? null : '_blank'"
    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'">
-    {{ item.text }}<OutboundLink/>
+    <i :class="`iconfont ${item.icon}`"></i>
+    {{ item.text }}
+    <!-- <OutboundLink/> -->
  </a>
 </template>

--- a/components/NavLinks/components/DropdownLink/index.vue
+++ b/components/NavLinks/components/DropdownLink/index.vue
@ -5,7 +5,10 @@
    <a
      class="dropdown-title"
      @click="toggle">
-      <span class="title">{{ item.text }}</span>
+      <span class="title">
+        <i :class="`iconfont ${item.icon}`"></i>
+        {{ item.text }}
+      </span>
      <span
        class="arrow"
        :class="open ? 'down' : 'right'"></span>
@ -93,7 +96,7 @@ export default {
        padding 0
        list-style none
        .dropdown-subitem
-          font-size 0.9em
+          font-size 0.9rem
      a
        display block
        line-height 1.7rem
@ -102,6 +105,7 @@ export default {
        font-weight 400
        margin-bottom 0
        padding 0 1.5rem 0 1.25rem
+        font-size .9rem
        &:hover
          color $accentColor
        &.router-link-active
@ -162,7 +166,7 @@ export default {
      position absolute
      top 100%
      right 0
-      background-color #fff
+      background-color $bgColor
      padding 0.6rem 0
      text-align left
      border-radius 0.25rem
--- a/components/NavLinks/index.vue
+++ b/components/NavLinks/index.vue
@ -116,10 +116,12 @@ export default {
 .nav-links
  display inline-block
  a
-    line-height 1.4rem
+    line-height 1.6rem
    color inherit
    &:hover, &.router-link-active
      color $accentColor
+      .iconfont
+        color $accentColor!important
  .nav-item
    position relative
    display inline-block
--- a/components/Navbar/components/SidebarButton/index.vue
+++ b/components/Navbar/components/SidebarButton/index.vue
@ -1,8 +1,6 @@
 <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>
+    <i class="iconfont reco-menu"></i>
  </div>
 </template>

@ -10,17 +8,15 @@
@import '../../../../styles/config.styl'

 .sidebar-button
-  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
+  display: none;
+  width: 1.8rem;
+  height: 1.8rem;
+  position: absolute;
+  padding: 0.8rem;
+  top: 0;
+  right: 0;
+  i
+    font-size 1.8rem

@media (max-width: $MQMobile)
  .sidebar-button
--- a/components/Navbar/index.vue
+++ b/components/Navbar/index.vue
@ -7,21 +7,17 @@
        class="logo"
        v-if="$site.themeConfig.logo"
        :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle"
-      >
+        :alt="$siteTitle">
      <span
        ref="siteName"
        class="site-name"
-        v-if="$siteTitle"
-        :class="{ 'can-hide': $site.themeConfig.logo }"
-      >{{ $siteTitle }}</span>
+        v-if="$siteTitle">{{ $siteTitle }}</span>
    </router-link>

    <div class="links" :style="{
        'max-width': linksWrapMaxWidth + 'px'
      }">
-      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
-      <SearchBox v-else-if="$site.themeConfig.search !== false"/>
+      <Search class="side-search-wrapper"></Search>
      <NavLinks class="can-hide"/>
    </div>
  </header>
@ -29,12 +25,11 @@

 <script>
 import SidebarButton from "./components/SidebarButton/";
-import AlgoliaSearchBox from "../Search/AlgoliaSearchBox/";
-import SearchBox from "../Search/SearchBox/";
+import Search from '../Search/'
 import NavLinks from "../NavLinks/";

 export default {
-  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
+  components: { SidebarButton, NavLinks, Search },

  data() {
    return {
@ -116,13 +111,16 @@ $navbar-horizontal-padding = 1.5rem;
 .navbar {
  transition all .4s
  padding: $navbar-vertical-padding $navbar-horizontal-padding;
-  line-height: $navbarHeight - 1.4rem;
  position: relative;

  a, span, img {
    display: inline-block;
  }

+  .home-link {
+    line-height $navbarHeight - 1.4rem
+  }  
+
  .logo {
    height: $navbarHeight - 1.4rem;
    min-width: $navbarHeight - 1.4rem;
@ -131,8 +129,7 @@ $navbar-horizontal-padding = 1.5rem;
  }

  .site-name {
-    font-size: 1.3rem;
-    font-weight: 600;
+    font-size: 1.2rem;
    color: $textColor;
    position: relative;
  }
@ -140,7 +137,7 @@ $navbar-horizontal-padding = 1.5rem;
  .links {
    padding-left: 1.5rem;
    box-sizing: border-box;
-    background-color: white;
+    background-color: $bgColor;
    white-space: nowrap;
    font-size: 0.9rem;
    position: absolute;
@ -148,11 +145,6 @@ $navbar-horizontal-padding = 1.5rem;
    top: $navbar-vertical-padding;
    display: flex;

-    .search-box {
-      flex: 0 0 auto;
-      vertical-align: top;
-    }
-
    .nav-links {
      flex: 1;
    }
@ -162,7 +154,6 @@ $navbar-horizontal-padding = 1.5rem;
@media (max-width: $MQMobile) {
  .navbar {
    transition all .5s
-    padding-left: 4rem;

    .can-hide {
      display: none;
@ -171,6 +162,9 @@ $navbar-horizontal-padding = 1.5rem;
    .links {
      padding-left: 1.5rem;
    }
+    .side-search-wrapper {
+      display none
+    }  
  }
 }
 </style>
--- a/components/NoteAbstract/index.vue
+++ b/components/NoteAbstract/index.vue
@ -1,9 +1,8 @@
 <template>
  <div class="abstract-wrapper">
    <div
-      v-for="(item, index) in data"
-      :key="index"
-      v-show="((index + 1) > (currentPage - 1) * 10) && ((index + 1) <= currentPage * 10)"
+      v-for="item in formatData"
+      :key="item.path"
      class="abstract-item">
      <div class="title">
        <router-link
@ -11,30 +10,27 @@
      </div>
      <div class="abstract" v-html="item.excerpt"></div>
      <hr>
-      <div class="tags">
-        <span 
-          v-for="(subItem, subIndex) in item.frontmatter.tags"
-          :key="subIndex"
-          class="tag-item"
-          @click="goTags(subItem)">
-          {{subItem}}
-        </span>
-      </div>
+      <PageInfo :pageInfo="item" :currentTag="currentTag" @currentTag="getCurrentTag"></PageInfo>
    </div>
  </div>
 </template>

 <script>
+import PageInfo from '../PageInfo/'
+
 export default {
-  props: ['data', 'currentPage'],
-  methods: {
-    goTags (tag) {
-      const tagClick = this.$site.themeConfig.tagClick
-      this.$emit('currentTag', tag)
-      if (tagClick == true) {
-        // 目前通过name跳转会报错
-        this.$router.push({path: '/tags/'})
+  components: { PageInfo },
+  props: ['data', 'currentPage', 'currentTag'],
+  computed: {
+    formatData () {
+      const data = this.data
+      const currentPage = this.currentPage
+      return data.slice(currentPage * 10 - 10, currentPage * 10)
    }
+  },
+  methods: {
+    getCurrentTag (tag) {
+      this.$emit('currentTag', tag)
    }
  }
 }
@ -54,7 +50,7 @@ export default {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
    transition all .3s
-    background-color #fff
+    background-color $bgColor
    &:hover
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
    .title
@ -80,17 +76,15 @@ export default {
        transform: scaleX(1);
    .tags
      .tag-item
-        transition: all .3s
-        vertical-align: middle;
-        margin: 4px;
-        padding 4px 8px
-        display: inline-flex;
        cursor: pointer;
-        border-radius: 2px;
-        background: #fff;
-        color: #999;
-        font-size: 13px; 
-        box-shadow 0 1px 5px 0 rgba(0,0,0,0.2)
+        &.active
+          color $accentColor
        &:hover 
-          transform scale(1.05)
+          color $accentColor
+
+@media (max-width: $MQMobile)
+  .tags
+    display block
+    margin-top 1rem;
+    margin-left: 0!important;
 </style>
--- a/components/Pagation/index.vue
+++ b/components/Pagation/index.vue
@ -1,14 +1,13 @@
 <template>
  <div class="pagation" v-show="show"> 
    <div class="pagation-list"> 
-      <span class="jump" v-show="currentPage>1" @click="goPrev">上一页</span> 
-      <span v-show="currentPage>5" class="jump" @click="jumpPage(1)">1</span> 
+      <span class="jump" v-show="currentPage>1" @click="goPrev" unselectable="on">Prev</span> 
+      <span v-show="efont" class="jump" @click="jumpPage(1)">1</span> 
      <span class="ellipsis"  v-show="efont">...</span> 
      <span class="jump" v-for="num in indexs" :key="num" :class="{bgprimary:currentPage==num}" @click="jumpPage(num)">{{num}}</span> 
      <span class="ellipsis"  v-show="efont&&currentPage<pages-4">...</span> 
-
-      <span class="jump" v-show="currentPage < pages" @click="goNext">下一页</span> 
-
+      <span v-show="efont&&currentPage<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
+      <span class="jump" v-show="currentPage < pages" @click="goNext">Next</span> 
      <span class="jumppoint">跳转到：</span> 
      <span class="jumpinp"><input type="text" v-model="changePage"></span> 
      <span class="jump gobtn" @click="jumpPage(changePage)">GO</span> 
@ -78,18 +77,22 @@ export default {
  },
  methods: {
    goPrev () {
+      let currentPage = this.currentPage
      if (this.currentPage > 1) {
-        const currentPage = this.currentPage
-        this.emit(currentPage--)
+        this.emit(--currentPage)
      }
    },
    goNext () {
-      if (this.currentPage < this.pages) {
-        const currentPage = this.currentPage
-        this.emit(currentPage++)
+      let currentPage = this.currentPage
+      if (currentPage < this.pages) {
+        this.emit(++currentPage)
      }
    },
    jumpPage: function(id) {
+      if(id == ''){
+        alert(`请输入页码！`)
+        return
+      }
      if (id <= this.pages) {
        this.emit(id)
        return
@ -107,7 +110,7 @@ export default {
@import '../../styles/config.styl'

 .pagation
-  font-weight: 900; 
+  font-weight: 700; 
  text-align: center; 
  color: #888; 
  margin: 20px auto 0; 
@ -116,6 +119,12 @@ export default {
    font-size: 0; 
    background: #fff; 
    line-height: 50px; 
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
    span
      font-size: 14px;
      &.jump
--- a/components/PageInfo/index.vue
+++ b/components/PageInfo/index.vue
@ -0,0 +1,70 @@
+<template>
+  <div>
+    <i
+      class="iconfont reco-account"
+      v-if="pageInfo.frontmatter.author || $site.themeConfig.author || $site.title">
+      <span>{{ pageInfo.frontmatter.author || $site.themeConfig.author || $site.title }}</span>
+    </i>
+    <i class="iconfont reco-date" v-if="pageInfo.frontmatter.date"><span>{{ new Date(pageInfo.frontmatter.date).toLocaleDateString() }}</span></i>
+    <AccessNumber :idVal="pageInfo.path" :numStyle="numStyle"></AccessNumber>
+    <i class="iconfont reco-tag tags" v-if="pageInfo.frontmatter.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>
+import AccessNumber from '../Valine/AccessNumber'
+
+export default {
+  data () {
+    return {
+      numStyle: {
+        fontSize: '.9rem',
+        fontWeight: 'normal',
+        color: '#999'
+      }
+    }
+  },
+  props: ['pageInfo', 'currentTag'],
+  components: { AccessNumber },
+  methods: {
+    goTags (tag) {
+      this.$emit('currentTag', tag)
+      this.$router.push({path: '/tags/'})
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../../styles/config.styl'
+
+.iconfont
+  display inline-block
+  line-height 1.5rem
+  &:not(:last-child)
+    margin-right 1rem
+  span 
+    margin-left .5rem
+.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>
--- a/components/SWUpdatePopup/index.vue
+++ b/components/SWUpdatePopup/index.vue
@ -67,7 +67,7 @@ export default {
  padding 1em
  border 1px solid $accentColor
  border-radius 3px
-  background #fff
+  background-color: $bgColor;
  box-shadow 0 4px 16px rgba(0, 0, 0, 0.5)
  text-align center

--- a/components/Search/AlgoliaSearchBox/index.vue
+++ b/components/Search/AlgoliaSearchBox/index.vue
@ -65,7 +65,7 @@ export default {
  .algolia-autocomplete
    line-height normal
    .ds-dropdown-menu
-      background-color #fff
+      background-color $bgColor
      border 1px solid #999
      border-radius 4px
      font-size 16px
--- a/components/Search/SearchBox/images/search.svg
+++ b/components/Search/SearchBox/images/search.svg
@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
--- a/components/Search/SearchBox/index.vue
+++ b/components/Search/SearchBox/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="search-box">
+  <div class="search-box" ref="searchBox" @click="searchBoxTap">
    <input
      @input="query = $event.target.value"
      aria-label="Search"
@ -11,14 +11,13 @@
      @blur="focused = false"
      @keyup.enter="go(focusIndex)"
      @keyup.up="onUp"
-      @keyup.down="onDown"
-    >
+      @keyup.down="onDown">
+    <i class="iconfont reco-search" @click="focused = true"></i>
    <ul
      class="suggestions"
      v-if="showSuggestions"
      :class="{ 'align-right': alignRight }"
-      @mouseleave="unfocus"
-    >
+      @mouseleave="unfocus">
      <li
        class="suggestion"
        v-for="(s, i) in suggestions"
@ -103,6 +102,9 @@ export default {
  },

  methods: {
+    searchBoxTap () {
+      this.$refs.searchBox.querySelector('input').focus()
+    },
    getPageLocalePath (page) {
      for (const localePath in this.$site.locales || {}) {
        if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
@ -152,7 +154,7 @@ export default {
 }
 </script>

-<style lang="stylus">
+<style lang="stylus" scoped>
@import '../../../styles/config.styl'

 .search-box
@ -167,21 +169,27 @@ export default {
    border 1px solid darken($borderColor, 10%)
    border-radius 2rem
    font-size 0.9rem
-    line-height 2rem
-    padding 0 0.5rem 0 2rem
+    padding 0.5rem 0.5rem .5rem 2rem
    outline none
    transition all .2s ease
-    background #fff url(./images/search.svg) 0.6rem 0.5rem no-repeat
-    background-size 1rem
    &:focus
      cursor auto
      border-color $accentColor
+  .iconfont
+    position: absolute;
+    left: 0.6rem;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 1rem;
  .suggestions
-    background #fff
+    margin: 1rem 0
+    background-color: $bgColor;
    width 20rem
    position absolute
    top 1.5rem
-    border 1px solid darken($borderColor, 10%)
+    z-index 1
+    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);
    border-radius 6px
    padding 0.4rem
    list-style-type none
@ -195,45 +203,22 @@ export default {
    a
      white-space normal
      color lighten($textColor, 35%)
+      font-size 0.9em
      .page-title
        font-weight 600
      .header
-        font-size 0.9em
        margin-left 0.25em
    &.focused
      background-color #f3f4f5
      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
-
-@media (max-width: $MQNarrow) and (min-width: $MQMobile)
-  .search-box
-    .suggestions
-      left 0
-
@media (max-width: $MQMobile)
  .search-box
-    margin-right 0
-    input
-      left 1rem
    .suggestions
-      right 0
-
-@media (max-width: $MQMobileNarrow)
-  .search-box
-    .suggestions
-      width calc(100vw - 4rem)
-    input:focus
-      width 8rem
+      width 100%
+      li 
+        padding: 0.3rem;
+        a 
+          font-size .7rem
 </style>
--- a/components/Search/index.vue
+++ b/components/Search/index.vue
@ -0,0 +1,27 @@
+<template>
+  <div>
+    <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
+    <SearchBox v-else-if="$site.themeConfig.search !== false"/>
+  </div>
+</template>
+
+<script>
+import AlgoliaSearchBox from "../Search/AlgoliaSearchBox/";
+import SearchBox from "../Search/SearchBox/";
+
+export default {
+  components: { SearchBox, AlgoliaSearchBox },
+  computed: {
+    algolia() {
+      return (
+        this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+      );
+    },
+
+    isAlgoliaSearch() {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
+    }
+  }
+}
+</script>
+
--- a/components/Sidebar/index.vue
+++ b/components/Sidebar/index.vue
@ -1,5 +1,6 @@
 <template>
  <div class="sidebar">
+    <Search class="side-search-wrapper"></Search>
    <NavLinks/>
    <slot name="top"/>
    <ul class="sidebar-links" v-if="items.length">
@ -10,8 +11,7 @@
          :first="i === 0"
          :open="i === openGroupIndex"
          :collapsable="item.collapsable || item.collapsible"
-          @toggle="toggleGroup(i)"
-        />
+          @toggle="toggleGroup(i)"/>
        <SidebarLink v-else :item="item"/>
      </li>
    </ul>
@ -23,10 +23,11 @@
 import SidebarGroup from '../SidebarGroup/'
 import SidebarLink from '../SidebarLink/'
 import NavLinks from '../NavLinks/'
+import Search from '../Search/'
 import { isActive } from '../../util/'

 export default {
-  components: { SidebarGroup, SidebarLink, NavLinks },
+  components: { SidebarGroup, SidebarLink, NavLinks, Search },

  props: ['items'],

@ -101,6 +102,9 @@ function resolveOpenGroupIndex (route, items) {
      padding 0.5rem 0 0.5rem 1.5rem
  .sidebar-links
    padding 1.5rem 0
+  .side-search-wrapper
+    padding: 0.5rem 0 0.5rem 1.5rem;
+    display none

@media (max-width: $MQMobile)
  .sidebar
@ -110,4 +114,6 @@ function resolveOpenGroupIndex (route, items) {
        top calc(1rem - 2px)
    .sidebar-links
      padding 1rem 0
+    .side-search-wrapper
+      display block  
 </style>
--- a/components/SidebarGroup/index.vue
+++ b/components/SidebarGroup/index.vue
@ -6,7 +6,7 @@
      class="sidebar-heading"
      :class="{ open }"
      @click="$emit('toggle')">
-      <span>{{ item.title }}</span>
+      <!-- <span>{{ item.title }}</span> -->
      <span
        class="arrow"
        v-if="collapsable"
--- a/components/Tag/index.vue
+++ b/components/Tag/index.vue
@ -2,19 +2,22 @@
  <div class="tags-wrapper">
    <div class="tags">
      <span 
-        v-for="(tag, index) in tags" 
+        v-for="(item, index) in tags" 
        :key="index"
-        :class="{'active': tag == trueCurrentTag}"
-        @click="getPagesByTags(tag)">{{tag}}</span>
+        :class="{'active': item.tag == currentTag}"
+        :style="{ 'backgroundColor': item.color }"
+        @click="getPagesByTags(item.tag)">{{item.tag}}</span>
    </div>

    <note-abstract
      :data="pages"
      :currentPage="currentPage"
+      :currentTag="currentTag"
      @currentTag="getCurrentTag"></note-abstract>
    
    <pagation
      :data="pages" 
+      :currentPage="currentPage"
      @getCurrentPage="getCurrentPage"></pagation>
  </div>
 </template>
@ -46,23 +49,26 @@ export default {
  },
  created () {
    let pages = this.$site.pages,
+        hasTags = [],
        newTags = []
    pages.forEach(page => {
      let tags = page.frontmatter.tags
      if (tags) {
        tags.forEach(tag => {
-          if (newTags.indexOf(tag) == -1) {
-            newTags.push(tag)
+          if (hasTags.indexOf(tag) == -1) {
+            hasTags.push(tag)
+            const color = this.tagColor()
+            newTags.push({
+              tag,
+              color
+            })
          }
        })
        this.tags = newTags
      }
-      
    })
-    if (this.currentTag != '') {
+    this.currentTag = this.tag != '' ? this.tag : hasTags[0]
    this.getPagesByTags(this.currentTag)
-    }
-    this.currentTag = this.tag
  },
  updated () {
    this.currentPage = this.$page.currentPage
@ -70,6 +76,7 @@ export default {
  methods: {
    // 根据分类获取页面数据
    getPagesByTags (tag) {
+      this.$emit('tagChange')
      let pages = this.$site.pages
      this.currentTag = tag
      pages = pages.filter(item => {
@ -78,6 +85,7 @@ export default {
      })
      // reverse()是为了按时间最近排序排序
      this.pages = pages.length == 0 ? [] : pages.reverse()
+      this.getCurrentPage(1);
    },
    getCurrentPage (page) {
      this.currentPage = page
@ -85,6 +93,12 @@ export default {
    },
    getCurrentTag (tag) {
      this.currentTag = tag
+    },
+    tagColor () {
+      // 红、蓝、绿、橙、灰
+      const tagColorArr = ['#f26d6d', '#3498db', '#67cc86', '#fb9b5f', '#838282']
+      const index = Math.floor(Math.random() * tagColorArr.length)
+      return tagColorArr[index]
    }
  },
  watch: {
@ -117,17 +131,16 @@ export default {
      cursor: pointer;
      border-radius: 2px;
      background: #fff;
-      color: #999;
+      color: #fff;
      font-size: 13px;
      box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
      transition: all .5s
      &:hover
        transform scale(1.04)
      &.active
-        background $accentColor
-        color #fff
+        transform scale(1.2)

@media (max-width: $MQMobile)
  .tags-wrapper
-    padding: 4rem 0.6rem 0;
+    padding: 0 0.6rem;
 </style>
--- a/components/Valine/AccessNumber.vue
+++ b/components/Valine/AccessNumber.vue
@ -0,0 +1,18 @@
+<template>
+  <span v-if="$site.themeConfig.valineConfig" :id="idVal" class="leancloud-visitors" data-flag-title="Your Article Title">
+    <i class="iconfont reco-eye" style="margin-right: .5rem"></i>
+    <a class="leancloud-visitors-count" :style="numStyle"></a>
+  </span>
+</template>
+
+<script>
+export default {
+  props: ['idVal', 'numStyle']
+}
+</script>
+
+<style lang="stylus" scoped>
+.leancloud-visitors
+  margin-right .5rem
+</style>
+
--- a/components/Valine/index.vue
+++ b/components/Valine/index.vue
@ -1,12 +1,26 @@
 <template>
-  <div id="valine"></div>
+  <div class="valine-wrapper">
+    <div id="valine" v-show="isComment"></div>
+  </div>
 </template>

 <script>


 export default {
+  props: ['valineRefresh'],
+  computed: {
+    // 是否显示评论
+    isComment () {
+      const frontmatter = this.$page.frontmatter
+      return frontmatter.isComment == false || frontmatter.home == true ? false : true
+    }
+  }, 
  mounted: function(){
+    this.createValine()
+  },
+  methods: {
+    createValine () {
      const valineConfig = this.$site.themeConfig.valineConfig
      if (valineConfig) {
        const Valine = require('valine');
@ -21,21 +35,47 @@ export default {
          el: '#valine' ,
          appId: valineConfig.appId,// your appId
          appKey: valineConfig.appKey, // your appKey
-        notify:false, 
          verify:false, 
-        avatar:'mm', 
+          visitor: true,
+          avatar:'retro', 
+          path: window.location.pathname,
          placeholder: 'just go go' 
        });
+        this.valineRefresh = false
      }
+    }
+  },
+  watch: {
+    '$route' (to, from) {
+      if(to.path !==  from.path){
+        // 切换页面时刷新评论
+        // this.$router.go(0)
+        setTimeout(() => {
+          this.createValine()
+        }, 300)
        
      }
+    },
+    'valineRefresh' (val) {
+      if (val) {
+        setTimeout(() => {
+          this.createValine()
+        }, 300)
+      }
+    }
+  },
 };
 </script>

 <style lang="stylus" scoped>
-#valine
+@import '../../styles/config.styl'
+
+.valine-wrapper
  max-width: 740px;
  margin: 0 auto;
-  padding: 0 2.5rem;
-  background-color #fff
+  background-color $bgColor
+  padding-left $sidebarWidth
+@media (max-width: $MQMobile)
+  .valine-wrapper
+    padding 1rem
 </style>
--- a/fonts/iconfont.css
+++ b/fonts/iconfont.css
@ -0,0 +1,105 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1548606483811'); /* IE9 */
+  src: url('iconfont.eot?t=1548606483811#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1548606483811') format('woff'),
+  url('iconfont.ttf?t=1548606483811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1548606483811#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-message:before {
+  content: "\e634";
+}
+
+.reco-eye:before {
+  content: "\e669";
+}
+
+.reco-search:before {
+  content: "\e611";
+}
+
+.reco-category:before {
+  content: "\e61e";
+}
+
+.reco-wechat:before {
+  content: "\e615";
+}
+
+.reco-npm:before {
+  content: "\e88d";
+}
+
+.reco-twitter:before {
+  content: "\e609";
+}
+
+.reco-csdn:before {
+  content: "\e60d";
+}
+
+.reco-menu:before {
+  content: "\e67c";
+}
+
+.reco-github:before {
+  content: "\e628";
+}
+
+.reco-qq:before {
+  content: "\e60a";
+}
+
+.reco-other:before {
+  content: "\e60e";
+}
+
+.reco-home:before {
+  content: "\e65b";
+}
+
+.reco-up:before {
+  content: "\e68b";
+}
+
+.reco-tag:before {
+  content: "\e633";
+}
+
+.reco-date:before {
+  content: "\e63b";
+}
+
+.reco-bokeyuan:before {
+  content: "\e626";
+}
+
+.reco-copyright:before {
+  content: "\ef87";
+}
+
+.reco-account:before {
+  content: "\e607";
+}
+
+.reco-jianshu:before {
+  content: "\e600";
+}
+
+.reco-theme:before {
+  content: "\e7e8";
+}
+
+.reco-three:before {
+  content: "\e644";
+}
+
--- a/fonts/iconfont.eot
+++ b/fonts/iconfont.eot
--- a/fonts/iconfont.svg
+++ b/fonts/iconfont.svg
@ -0,0 +1,92 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="message" unicode="&#58932;" d="M864.227 791.373h-702c-48.988 0-88.732-39.621-88.732-88.487v-519.688c0-48.866 42.607-84.866 91.616-84.866h218.638l122.113-106.65 122.134 106.65h233.366c48.988 0 91.596 36.021 91.596 84.866v519.688c0 48.866-39.763 88.487-88.732 88.487zM685.393 342.72299999999996h-309.702c-17.202 0-31.152 13.95-31.152 31.152s13.95 31.152 31.152 31.152h309.702c17.223 0 31.152-13.95 31.152-31.152s-13.95-31.152-31.152-31.152zM759.029 505.848h-484.343c-17.202 0-31.152 13.95-31.152 31.152 0 17.223 13.95 31.173 31.152 31.173h484.343c17.202 0 31.152-13.95 31.152-31.173 0.021-17.202-13.95-31.152-31.152-31.152z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="eye" unicode="&#58985;" d="M1023.997 384.169c0-99.79-211.129-312.67-511.999-312.67C218.787 71.49900000000002 0 280.875 0 384.169c0 103.279 219.73 312.334 511.999 312.334 303.234-0.001 512.071-209.057 511.999-312.335L1023.998 384.169zM512.45 639.471C376.184 639.471 265.72 525.087 265.72 384c0-141.089 110.463-255.471 246.729-255.471 136.307 0 246.774 114.383 246.774 255.471C759.223 525.087 648.756 639.471 512.45 639.471L512.45 639.471zM511.999 547.0989999999999c-86.778 0-157.126-72.827-157.126-162.673 0-89.836 70.348-162.677 157.126-162.677s157.097 72.841 157.097 162.677C669.096 474.273 598.776 547.0989999999999 511.999 547.0989999999999L511.999 547.0989999999999z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="search" unicode="&#58897;" d="M1023.991873-35.817713000000026l-92.147972-92.180481L728.542586 75.23810300000002c-76.088314-56.998056-169.675731-91.994455-272.138222-91.994455C204.34252-16.693138999999974 0.073146 187.606938 0.073146 439.605569c0 252.078099 204.269374 456.345667 456.392625 456.345667 251.984183 0 456.251751-204.269374 456.251751-456.345667 0-102.446236-34.965695-196.002949-91.963751-272.091263L1023.991873-35.817713000000026 1023.991873-35.817713000000026 1023.991873-35.817713000000026 1023.991873-35.817713000000026zM456.465771 765.490904c-180.066105 0-325.932293-145.896891-325.932293-325.948548 0-180.002893 145.866188-325.932293 325.932293-325.932293 179.927037 0 325.916038 145.929401 325.916038 325.932293C782.381809 619.657226 636.392808 765.490904 456.465771 765.490904L456.465771 765.490904 456.465771 765.490904 456.465771 765.490904zM456.465771 765.490904"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="category" unicode="&#58910;" d="M928 288C928 323.36 899.36 352 864 352 792.96 352 679.04 352 608 352 572.64 352 544 323.36 544 288 544 216.96000000000004 544 103.03999999999996 544 32 544-3.3600000000000136 572.64-32 608-32 679.04-32 792.96-32 864-32 899.36-32 928-3.3600000000000136 928 32 928 103.03999999999996 928 216.96000000000004 928 288ZM480 288C480 323.36 451.36 352 416 352 344.96 352 231.04 352 160 352 124.64 352 96 323.36 96 288 96 216.96000000000004 96 103.03999999999996 96 32 96-3.3600000000000136 124.64-32 160-32 231.04-32 344.96-32 416-32 451.36-32 480-3.3600000000000136 480 32 480 103.03999999999996 480 216.96000000000004 480 288ZM480 736C480 771.36 451.36 800 416 800 344.96 800 231.04 800 160 800 124.64 800 96 771.36 96 736 96 664.96 96 551.04 96 480 96 444.64 124.64 416 160 416 231.04 416 344.96 416 416 416 451.36 416 480 444.64 480 480 480 551.04 480 664.96 480 736ZM928 736C928 771.36 899.36 800 864 800 792.96 800 679.04 800 608 800 572.64 800 544 771.36 544 736 544 664.96 544 551.04 544 480 544 444.64 572.64 416 608 416 679.04 416 792.96 416 864 416 899.36 416 928 444.64 928 480 928 551.04 928 664.96 928 736Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wechat" unicode="&#58901;" d="M692.699238 559.112294c11.619123 0 23.117414-0.831898 34.517504-2.108006C696.19497 701.4500350000001 541.769728 808.7724029999999 365.488742 808.7724029999999 168.405197 808.7724029999999 6.977229 674.464461 6.977229 503.892582c0-98.493235 53.707366-179.306803 143.459123-242.033357l-35.857101-107.840102 125.329408 62.837146c44.84311-8.861798 80.827085-18.002022 125.578138-18.002022 11.250688 0 22.40215 0.561766 33.469645 1.428582-7.001702 23.95351-11.06647 49.054208-11.06647 75.120947C387.891917 432.023757 522.3936 559.112294 692.699238 559.112294zM497.405542 663.593882c30.611456 0 55.425536-24.815206 55.425536-55.427379s-24.814182-55.426355-55.425536-55.426355c-30.613504 0-55.427584 24.815206-55.427584 55.426355S466.794086 663.593882 497.405542 663.593882zM246.567526 551.622656c-30.611456 0-55.427584 24.815206-55.427584 55.426355 0 30.611149 24.81623 55.426355 55.427584 55.426355 30.613504 0 55.428608-24.815206 55.428608-55.426355C301.996134 576.438886 277.18103 551.622656 246.567526 551.622656zM1017.379942 278.544179c0 143.330406-143.423283 260.165325-304.515686 260.165325-170.58089 0-304.924979-116.834918-304.924979-260.165325 0-143.57801 134.34409-260.158157 304.924979-260.158157 35.697459 0 71.712154 9.0112 107.569254 17.99895l98.340659-53.861683-26.969293 89.592525C963.769856 126.10232299999996 1017.379942 197.69077800000002 1017.379942 278.544179zM619.184947 318.72430099999997c-21.799322 0-39.469466 17.673523-39.469466 39.471002 0 21.799526 17.671168 39.468954 39.469466 39.468954s39.469466-17.670451 39.469466-39.468954C658.656563 336.3968 640.983347 318.72430099999997 619.184947 318.72430099999997zM816.270541 316.485325c-21.80137 0-39.47049 17.672499-39.47049 39.468954 0 21.80055 17.670144 39.468954 39.47049 39.468954 21.798298 0 39.469466-17.669427 39.469466-39.468954C855.741133 334.157824 838.068941 316.485325 816.270541 316.485325z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="npm" unicode="&#59533;" d="M0 896l0-1024 1024 0 0 1024-1024 0zM832 64l-128 0 0 512-192 0 0-512-320 0 0 640 640 0 0-640z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="twitter" unicode="&#58889;" d="M1023.975952 701.055053c-37.679158-16.679891-78.102822-27.991518-120.592542-33.05279 43.367717 25.931602 76.668147 67.167772 92.285846 116.151393-40.551578-24.050766-85.536119-41.484833-133.394103-50.980091-38.304398 40.800241-92.849688 66.355267-153.272849 66.355267-116.02348 0-210.06225-94.039793-210.06225-210.004945 0-16.430204 1.874697-32.489972 5.438872-47.857984-174.508499 8.810666-329.278445 92.40762-432.870802 219.500203C53.388443 730.1087620000001 43.074539 693.99731 43.074539 655.571139c0-72.855308 32.520671-137.149637 88.880283-174.821631-34.428114 1.119497-99.69049 10.556427-99.69049 26.303063 0-0.876973 0-1.689479 0-2.622734 0-101.723799 77.008908-186.632631 173.045171-205.942419-17.619286-4.811586-33.908274-7.370875-53.090149-7.370875-13.563924 0-25.546839 1.375324-38.419008 3.812839 26.744107-83.476203 104.847953-144.149051 196.757223-145.895835-71.850421-56.297191-162.17152-89.912799-260.573667-89.912799-17.000186 0-33.537837 1.062192-49.973158 2.936889 92.976578-59.547211 203.388247-94.346785 322.041624-94.346785 386.323673 0 597.605703 320.032874 597.605703 597.570911 0 9.123798-0.167822 18.183128-0.602727 27.179013 41.050951 29.616528 76.606749 66.611094 104.785531 108.723214L1023.975952 701.055053z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="csdn" unicode="&#58893;" d="M906.475693-47.728792c-49.491181-17.325597-152.164608-28.913517-295.537993-28.913517-412.545894 0-635.223462 193.912431-608.80579 450.249611C33.545364 679.03555 363.386627 850.974527 724.595296 850.974527c139.829675 0 222.1301-11.388375 299.383578-30.263258l-24.720008-205.822692c-51.434439 17.35118-171.688267 33.208333-269.12032 33.208333-212.388225 0-392.96493-63.425541-413.440264-263.878946-18.429745-179.328271 108.114346-265.024026 347.120812-265.024026 83.251076 0 205.89944 11.884678 262.580371 29.214369L906.475693-47.728792z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="menu" unicode="&#59004;" d="M105.931034 595.862069C105.931034 615.363434 121.789652 631.172414 141.3498 631.172414L882.6502 631.172414C902.211443 631.172414 918.068966 615.499395 918.068966 595.862069 918.068966 576.3607039999999 902.210348 560.5517239999999 882.6502 560.5517239999999L141.3498 560.5517239999999C121.788557 560.5517239999999 105.931034 576.224743 105.931034 595.862069ZM105.931034 384C105.931034 403.501365 121.789652 419.310345 141.3498 419.310345L882.6502 419.310345C902.211443 419.310345 918.068966 403.637326 918.068966 384 918.068966 364.49863500000004 902.210348 348.689655 882.6502 348.689655L141.3498 348.689655C121.788557 348.689655 105.931034 364.36267399999997 105.931034 384ZM105.931034 172.13793099999998C105.931034 191.63929599999994 121.789652 207.44827599999996 141.3498 207.44827599999996L882.6502 207.44827599999996C902.211443 207.44827599999996 918.068966 191.775257 918.068966 172.13793099999998 918.068966 152.63656600000002 902.210348 136.827586 882.6502 136.827586L141.3498 136.827586C121.788557 136.827586 105.931034 152.50060499999995 105.931034 172.13793099999998Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="github" unicode="&#58920;" d="M0 371.008q0-166.016 95.488-298.496t247.488-185.504q6.016-0.992 10.016-0.992t6.496 1.504 4 3.008 2.016 4.992 0.512 4.992v100.512q-36.992-4-66.016 0.512t-45.504 14.016-28.992 23.488-16.992 25.504-8.992 24-5.504 14.496q-8.992 15.008-27.008 27.488t-27.008 20-2.016 14.496q50.016 26.016 112.992-66.016 34.016-51.008 119.008-30.016 10.016 40.992 40 70.016Q293.984 160 237.984 225.024t-56 158.016q0 87.008 55.008 151.008-22.016 64.992 6.016 136.992 28.992 2.016 64.992-11.488t50.496-23.008 25.504-17.504q56.992 16 128.512 16t129.504-16q12.992 8.992 28.992 19.008t48.992 21.504 60.992 9.504q27.008-71.008 7.008-135.008 56-64 56-151.008 0-92.992-56.992-158.496t-172-85.504q43.008-43.008 43.008-104v-128.992q0-0.992 0.992-3.008 0-6.016 0.512-8.992t4.512-6.016 12-3.008q152.992 52 250.496 185.504t97.504 300.512q0 104-40.512 199.008t-108.992 163.488-163.488 108.992T512.032 883.04 313.024 842.528 149.536 733.536t-108.992-163.488-40.512-199.008z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="qq" unicode="&#58890;" d="M933.446 252.138c-18.784 108.945-97.673 180.323-97.673 180.323 11.268 98.92-30.056 116.461-30.056 116.461-8.701 306.05-272.335 300.692-277.87 300.546-5.542 0.146-269.211 5.505-277.872-300.548 0 0-41.325-17.54-30.055-116.461 0 0-78.895-71.378-97.676-180.323 0 0-10.034-184.083 90.16-22.544 0 0 22.544-61.344 63.867-116.455 0 0-73.897-25.062-67.621-90.165 0 0-2.518-72.618 157.784-67.625 0 0 112.702 8.757 146.516 56.35h29.795c33.809-47.595 146.514-56.35 146.514-56.35 160.262-4.993 157.781 67.625 157.781 67.625 6.238 65.103-67.62 90.165-67.62 90.165 41.324 55.11 63.862 116.455 63.862 116.455 100.156-161.537 90.164 22.546 90.164 22.546z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="other" unicode="&#58894;" d="M1063.443927-128zM640.505087 896a414.805401 414.805401 0 0 0 414.805401-414.805401v-22.77363q-17.080222-308.257347-17.080223-372.511517a325.337569 325.337569 0 0 1 73.200953-197.642574A612.447975 612.447975 0 0 1 895.081735-24.705322000000024c-81.334392 0-143.148531-93.534551-178.12232-87.0278-81.334392 14.640191-124.44162 87.0278-148.028594 87.0278a154.535346 154.535346 0 0 1-127.694996-87.841143 139.895155 139.895155 0 0 1-121.188244 64.25417A251.323272 251.323272 0 0 1 163.072203-112.54646500000001a919.078634 919.078634 0 0 1 67.507546 297.683876 904.438443 904.438443 0 0 1-29.280381 226.922954v43.920572A439.205719 439.205719 0 0 0 640.505087 896zM1037.416921 209.53772800000002c94.347895 11.386815 92.721207-125.254964 168.362193-108.174742 52.054011 18.70691 65.880858 147.21525 24.400317 209.029389a244.003177 244.003177 0 0 1-175.682287 116.308181c-54.494043 8.946783-39.853852-219.602859-17.080223-217.162828zM213.499527 209.53772800000002c-91.094519 11.386815-89.467832-122.814932-162.668785-107.361398-54.494043 18.70691-68.32089 147.21525-26.027006 209.029389a244.003177 244.003177 0 0 0 175.682288 116.308181c54.494043 8.133439 39.853852-220.416203 13.013503-217.976172zM457.502704 574.72915m-101.667991 0a101.66799 101.66799 0 1 1 203.335981 0 101.66799 101.66799 0 1 1-203.335981 0ZM782.840273 574.72915m-101.66799 0a101.66799 101.66799 0 1 1 203.335981 0 101.66799 101.66799 0 1 1-203.335981 0Z"  horiz-adv-x="1255" />
+
+    
+    <glyph glyph-name="home" unicode="&#58971;" d="M964.835556 454.542222L857.884444 554.666667 580.266667 809.528889c-18.204444 18.204444-45.511111 29.582222-72.817778 29.582222-27.306667 0-54.613333-11.377778-72.817778-29.582222L59.164444 454.542222c-31.857778-31.857778-25.031111-56.888889-22.755555-63.715555 4.551111-11.377778 15.928889-25.031111 43.235555-25.031111h54.613334c13.653333 0 22.755556-11.377778 22.755555-22.755556v-302.648889c0-52.337778 36.408889-109.226667 95.573334-109.226667H766.862222c59.164444 0 95.573333 56.888889 95.573334 109.226667V340.764444c0 13.653333 11.377778 22.755556 22.755555 22.755556h54.613333c27.306667 0 38.684444 13.653333 43.235556 27.306667 6.826667 6.826667 13.653333 29.582222-18.204444 63.715555z m-307.2-386.844444c0-29.582222-22.755556-52.337778-52.337778-52.337778h-184.32c-29.582222 0-52.337778 25.031111-52.337778 52.337778V320.284444c0 29.582222 22.755556 52.337778 52.337778 52.337778h184.32c29.582222 0 52.337778-25.031111 52.337778-52.337778v-252.586666z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="up" unicode="&#59019;" d="M526.60727968 885.09814884a27.675 27.675 0 0 1-29.21455937 0c-131.36607665-82.28402758-218.69155461-228.01873535-218.69155402-394.07834331a462.20625001 462.20625001 0 0 1 5.36959153-69.94390903c1.00431239-6.55289093-0.34802892-13.13561351-3.76865779-18.80351572-32.63518765-54.11355614-51.75690182-118.55860487-51.7569018-187.94566865a371.06718723 371.06718723 0 0 1 11.50484808-91.98906777c6.53300375-25.50556257 41.68394495-28.14064038 52.69160883-4.22606766 17.37162448 37.73630017 42.14135425 72.50938081 72.80769204 103.21549295 2.18761121-3.04276886 4.15646224-6.24463696 6.40373557-9.22774369a1871.4375 1871.4375 0 0 1 140.04691725-5.34970492 1866.36093723 1866.36093723 0 0 1 140.04691723 5.34970492c2.24727335 2.98310674 4.21612437 6.18497483 6.3937923 9.2178004 30.66633723-30.70611158 55.4360664-65.4791928 72.80769147-103.21549355 11.00766384-23.91457269 46.15860503-21.27949489 52.69160879 4.22606768a371.15156223 371.15156223 0 0 1 11.514792 91.99901164c0 69.36717486-19.13165746 133.82216804-51.75690182 187.92578088-3.42062944 5.66790279-4.76302748 12.26056868-3.76865837 18.80351632a462.20625001 462.20625001 0 0 1 5.36959269 69.943909c-0.00994388 166.08943902-87.32547796 311.81420293-218.6915546 394.09823051zM605.93803103 538.12306142a93.93749974 93.93749974 0 1 0-187.89594924-6.1e-7 93.93749974 93.93749974 0 0 0 187.89594924 6.1e-7zM429.50777625 130.36139452999998C429.50777625 92.60644993000005 466.44236686-104.39046097000005 512.00932183-104.39046097000005c45.56695499 0 82.4922232 197.00623328 82.5015456 234.7518555 0 37.75494459-36.9345906 68.35043303-82.4922232 68.34111062-45.57627738 0.00932239-82.52019037-30.59548842-82.51086798-68.34111062z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tag" unicode="&#58931;" d="M814 773.2l-264.6-12.7c-35.1-1.7-68.3-16.4-93.1-41.2L107.7 370.70000000000005c-31.1-31.1-31.1-81.6 0-112.7l277.2-277.2c31.1-31.1 81.6-31.1 112.7 0l14.3 14.3 92.1 92.1 242.2 242.2c24.8 24.8 39.5 58 41.2 93.1l12.7 264.6c2.3 48.5-37.6 88.4-86.1 86.1zM689.6 426c-37.8-37.8-99-37.8-136.8 0s-37.8 99 0 136.8c37.8 37.8 99 37.8 136.8 0 37.8-37.8 37.8-99.1 0-136.8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="date" unicode="&#58939;" d="M512 832.1C264.5 832.1 63.9 631.5 63.9 384c0-247.5 200.7-448.2 448.2-448.2S960.2 136.39999999999998 960.2 384c0 247.5-200.6 448.1-448.2 448.1z m179.5-618.2c-7.8-9.5-19.1-14.5-30.6-14.5-8.8 0-17.6 2.9-25 8.9l-155 126.8a39.34 39.34 0 0 0-14.5 30.5V550.8c0 21.8 17.7 39.5 39.5 39.5s39.5-17.7 39.5-39.5v-166.4l140.6-115c16.8-13.8 19.3-38.7 5.5-55.5z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bokeyuan" unicode="&#58918;" d="M874.03867197 746.03867197C674.01230571 946.06503823 349.98769429 946.06503823 149.96132803 746.03867197s-200.02636626-524.05097767 0-724.07734394 524.05097767-200.02636626 724.07734394 0S1074.06503823 546.01230571 874.03867197 746.03867197z m-508.66433412-561.15994155c-12.67135352 0-25.34270704 5.43058008-35.29877051 15.38664356-9.95606348 9.95606348-14.48154688 21.72232032-15.38664356 35.29877051 0 12.67135352 5.43058008 25.34270704 14.48154688 36.2038672 9.95606348 9.95606348 21.72232032 14.48154688 36.20386719 14.48154688 12.67135352 0 25.34270704-5.43058008 35.29877052-15.38664356 9.95606348-9.95606348 14.48154688-21.72232032 15.38664356-35.29877052 0-12.67135352-5.43058008-25.34270704-15.38664356-35.29877051-9.95606348-9.95606348-21.72232032-14.48154688-35.29877052-15.38664356z m220.8435899 28.96309376c-9.0509668 0-17.19683692 2.71529004-23.53251367 9.05096679s-9.0509668 14.48154688-9.95606348 24.43761036l0 3.62038672c-1.81019336 48.87522072-18.1019336 88.69947463-50.68541408 121.28295511-32.58348048 32.58348048-72.40773439 48.87522072-120.37785843 49.7803174-9.0509668 0-18.1019336 3.62038672-24.43761036 9.95606348s-9.0509668 14.48154688-9.95606348 24.43761035c0 9.0509668 3.62038672 18.1019336 9.95606348 24.43761036s14.48154688 9.0509668 24.43761036 9.95606348c66.97715431-1.81019336 123.99824515-24.43761036 169.25307915-69.69244435s68.78734767-101.37082815 69.69244435-169.25307915l0-3.62038672c0-9.0509668-4.5254834-17.19683692-10.86116016-23.53251368-7.24077344-7.24077344-14.48154688-10.86116016-23.53251368-10.86116015z m197.31107623 23.53251367c-9.0509668 0-17.19683692 2.71529004-23.53251368 9.0509668s-9.0509668 14.48154688-9.95606348 24.43761036c-1.81019336 99.56063479-37.10896388 181.92443266-103.18102151 247.9964903-66.07205763 66.07205763-149.34095219 100.46573147-247.9964903 103.18102151-9.0509668 0-18.1019336 3.62038672-24.43761036 9.95606348s-9.0509668 14.48154688-9.0509668 23.53251368 3.62038672 18.1019336 9.95606348 24.43761035 14.48154688 9.0509668 23.53251368 10.86116016c118.56766507-2.71529004 217.22320318-43.44464064 295.96661433-122.18805179 78.74341115-78.74341115 119.47276175-177.39894926 122.18805179-295.96661433 0-9.0509668-4.5254834-17.19683692-10.86116016-23.53251368-5.43058008-9.0509668-13.5764502-11.76625684-22.62741699-11.76625684z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="copyright" unicode="&#61319;" d="M512 880C238.066 880 16 657.934 16 384s222.066-496 496-496 496 222.066 496 496S785.934 880 512 880z m234.268-693.506c-3.184-3.734-79.552-91.462-219.702-91.462-169.384 0-288.968 126.52-288.968 291.134 0 162.606 124.008 286.802 287.524 286.802 133.914 0 203.93-74.63 206.844-77.808a24 24 0 0 0 2.476-29.246l-44.76-69.31c-8.098-12.534-25.548-14.702-36.468-4.59-0.466 0.428-53.058 47.76-123.76 47.76-92.232 0-147.832-67.15-147.832-152.164 0-79.204 51.028-159.384 148.554-159.384 77.394 0 130.56 56.676 131.088 57.25 10.264 11.13 28.118 10.066 37.016-2.106l49.094-67.144a24.002 24.002 0 0 0-1.106-29.732z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="account" unicode="&#58887;" d="M723.4304 387.39968c-54.12352-47.74912-125.9776-77.056-205.16352-77.056-80.36352 0-153.40032 30.2592-207.76448 79.42144-126.45376-33.09056-204.69248-146.0736-204.69248-281.04192v-68.78208c0-160.96768 812.3904-160.96768 812.3904 0v68.78208c-0.00512 131.41504-74.21952 242.5088-194.76992 278.67648z m-205.16352-28.12928c140.16512 0 254.09536 109.44 254.09536 244.63872S658.66752 848.78336 518.26688 848.78336c-139.9296 0-253.85472-109.67552-253.85472-244.87424 0-135.20384 113.92512-244.63872 253.85472-244.63872z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jianshu" unicode="&#58880;" d="M0 384v-512h1024V896H0v-512z m356.864 331.776c-1.024-6.656-4.096-15.872-6.144-20.48-3.584-8.704 2.048-9.216 78.848-9.216H512v-51.2h-43.52c-24.064 0-43.52-0.512-43.52-1.024 0-1.024 4.608-16.384 10.24-34.816 5.632-18.432 10.24-33.792 10.24-34.304 0-1.024-18.432-1.536-40.448-1.536h-40.448l-3.584 16.896c-9.216 45.056-13.824 54.784-27.136 54.784-7.68 0-21.504-8.192-35.328-20.992-22.016-19.968-71.168-46.592-99.84-53.76-14.336-3.072-14.336-3.072-14.336 22.528 0 23.552 1.024 26.112 19.968 38.4 25.088 16.384 41.984 38.912 59.392 76.8l13.312 29.184h41.472c39.936 0 40.96-0.512 38.4-11.264z m306.688-6.656l-3.584-17.92h179.712v-56.32h-96.768l10.24-29.184c14.848-43.008 15.36-42.496-28.16-42.496h-37.888l-3.584 16.896c-2.048 8.704-6.144 25.088-8.704 35.84-5.12 17.92-7.168 18.944-25.6 18.944-16.384 0-23.552-3.584-41.472-20.992-19.456-18.944-76.288-50.176-104.448-58.368-10.752-3.072-11.776-1.536-11.776 18.944 0 20.992 2.048 24.576 27.648 46.592 25.6 22.016 49.152 59.392 61.44 97.28 2.048 7.168 9.216 8.704 44.544 8.704h41.472l-3.072-17.92z m-317.44-162.304c4.608-8.704 13.824-32.256 20.48-51.2 13.824-41.472 14.336-40.96-36.352-38.912l-34.816 1.536-11.264 35.84c-6.144 19.968-14.848 43.52-19.968 52.736L255.488 563.2h40.96c40.96 0 41.472 0 49.664-16.384z m462.848-225.792c0-200.192-0.512-217.6-9.216-233.984-15.872-28.672-40.448-37.888-103.424-38.4h-53.76l-1.536 29.696-1.536 29.184h33.792c29.184 0 35.328 1.536 46.08 12.8l12.8 12.288V476.16H384V537.6h424.96v-216.576zM291.84 243.2v-202.24h-76.8V445.44h76.8V243.2z m363.52 57.344c0-182.784 4.608-177.664-167.424-177.664H373.76V424.96h281.6v-124.416zM450.56 335.36v-33.28h128V368.64h-128v-33.28zM450.56 215.04v-35.84h55.808c65.024 0 69.12 2.56 69.632 43.008v26.112l-62.464 1.536-62.976 1.536v-36.352z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="theme" unicode="&#59368;" d="M949.6 535.4s-0.1 0-0.1 0.1L755.1 729.4c-15.6 25.3-43.4 42.4-75.4 42.4h-55.5c-16.2 0-29.7-11.6-32.7-27l-0.6-0.9v1.2c-0.8-2-2-3.9-3.4-5.9-9.4-32.3-38.9-56-74.3-56-31 0-57.6 18.3-70.1 44.5l-0.4 0.3c-0.1 0.4-0.3 0.8-0.4 1.2-0.9 2-1.5 4.1-2.3 6.2-1.4 3.6-3 7.1-4.6 10.6v-5.3h-0.2c-0.2 3.6-1 7.1-2.2 10.3-0.7 1.5-1.5 3-2.3 4.5-5.8 9.8-16.3 16.4-28.5 16.4-2 0-3.9-0.3-5.9-0.7-1 0.5-2.1 0.7-3.2 0.7-0.7 0-1.4-0.2-2.1-0.4v0.4h-44.4c-28.9 0-54.3-14-70.6-35.3l-201.4-201s-0.1 0-0.1-0.1c-13-13-13-34 0-47l141.3-141c11.5-11.5 28.9-12.2 41.9-3.4v-325.6h2.2c4.6-12.9 16.6-22.2 31.1-22.2h444.2c14.5 0 26.5 9.3 31.1 22.2h2.2v324c12.7-7.2 28.9-5.9 39.7 4.9l141.3 141c13.1 13 13.1 34 0.1 47z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="three" unicode="&#58948;" d="M861.798876 266.798732C835.998959 320.998557 830.598976 331.29852400000004 806.999052 385.398351c-12.59996 28.799907-38.399877 46.79985-61.899801 52.69983l62.499799 294.499054c9.29997 43.899859-18.299941 86.99972-61.699801 96.39969-43.399861 9.39997-86.099723-18.59994-95.399694-62.499799l-58.099813-273.79912-3.699988 322.598963C587.999756 860.296825 551.599873 896.396709 507.200015 895.99671c-44.499857-0.299999-79.999743-36.999881-79.499744-81.799737l3.499989-304.299022-66.199788 248.999199c-11.499963 43.299861-55.599821 68.999778-98.499683 57.399816-42.899862-11.599963-68.299781-56.199819-56.799818-99.49968L295.000697 395.898317c-62.899798-21.69993-92.899702-43.899859-103.399668-72.899766l-37.999878-108.399652c-8.499973-23.399925 3.19999-75.299758 11.499964-98.799682 39.699872-112.799638 86.399722-187.699397 114.499632-226.699272 4.899984-6.799978 9.099971-12.29996 12.799959-16.899946H760.9992c1.699995 3.09999 3.19999 6.29998 4.499986 9.699969l94.999694 256.299177c22.099929 52.099833 10.799965 108.499651 1.299996 128.599587z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/fonts/iconfont.ttf
+++ b/fonts/iconfont.ttf
--- a/fonts/iconfont.woff
+++ b/fonts/iconfont.woff
--- a/fonts/iconfont.woff2
+++ b/fonts/iconfont.woff2
--- a/images/bg-img.png
+++ b/images/bg-img.png
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
    "url": "git+https://github.com/recoluan/vuepress-theme-reco.git"
  },
  "author": "reco_luan",
-  "license": "ISC",
+  "license": "MIT",
  "bugs": {
    "url": "https://github.com/recoluan/vuepress-theme-reco/issues"
  },
@ -19,7 +19,7 @@
  "_from": "vuepress-theme-reco@0.1.0",
  "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.1.0.tgz",
  "dependencies": {
-    "leancloud-storage": "^3.10.0",
-    "valine": "^1.3.3"
+    "leancloud-storage": "^3.10.1",
+    "valine": "^1.3.4"
  }
 }
--- a/pages/Home/index.vue
+++ b/pages/Home/index.vue
@ -21,16 +21,36 @@

    <Content custom/>

-    <div class="footer" v-if="data.footer">{{ data.footer }}</div>
+    <div class="footer">
+      <span>
+        <i class="iconfont reco-theme"></i>
+        <a target="blank" href="https://www.npmjs.com/package/vuepress-theme-reco">vuePress-theme-reco</a>
+      </span>
+      <span>
+        <i class="iconfont reco-other"></i>
+        <a>{{ $site.themeConfig.author || $site.title }}</a>
+      </span>
+      <span>
+        <i class="iconfont reco-copyright"></i>
+        <a>{{ year }}</a>
+      </span>
+      <span>
+        <AccessNumber idVal="/"></AccessNumber>
+      </span>
+    </div>
  </div>
 </template>

 <script>
 import NavLink from "../../components/NavLink/";
+import AccessNumber from '../../components/Valine/AccessNumber'

 export default {
-  components: { NavLink },
+  components: { NavLink, AccessNumber },
  computed: {
+    year () {
+      return new Date().getFullYear()
+    },
    data() {
      return this.$page.frontmatter;
    },
@ -73,10 +93,8 @@ export default {

    .description {
      max-width: 35rem;
-      background-color #fff
      font-size: 1.6rem;
      line-height: 1.3;
-      background-color #fff
      color: lighten($textColor, 40%);
    }

@ -114,16 +132,14 @@ export default {
    max-width: 30%;
    transition: all .5s
    h2 {
-      font-size: 1.4rem;
+      font-size: 1.6rem;
      font-weight: 500;
      border-bottom: none;
      padding-bottom: 0;
-      background-color #fff
      color: lighten($textColor, 10%);
    }

    p {
-      background-color #fff
      color: lighten($textColor, 25%);
    }

@ -137,6 +153,12 @@ export default {
    border-top: 1px solid $borderColor;
    text-align: center;
    color: lighten($textColor, 25%);
+    > span {
+      margin-left 1rem
+      > i {
+        margin-right .5rem
+      } 
+    }
  }
 }

@ -151,6 +173,14 @@ export default {
      padding: 0 2.5rem;
    }
  }
+  .footer {
+    text-align: left!important;
+    > span {
+      display block
+      margin-left 0
+      line-height 2rem
+    }
+  }
 }

@media (max-width: $MQMobileNarrow) {
--- a/pages/Page/index.vue
+++ b/pages/Page/index.vue
@ -1,10 +1,14 @@
 <template>
  <div class="page">
    <slot name="top"/>
+    <div class="page-title" v-if="!(isCategories || isTags)">
+      <h1>{{$page.title}}</h1>
+      <hr>
+      <PageInfo :pageInfo="$page" @currentTag="getCurrentTag"></PageInfo>
+    </div>
    <Content :custom="false"/>
-    <valine v-if="isComment"></valine>
    <category v-if="isCategories" :currentPage="currentPage" @currentTag="getCurrentTag"></category>
-    <tag v-if="isTags" :tag="currentTag"></tag>
+    <tag v-if="isTags" :tag="currentTag" @tagChange="$emit('tagChange')"></tag>
    <div class="page-edit">
      <div
        class="edit-link"
@ -57,8 +61,8 @@

 <script>
 import { resolvePage, normalize, outboundRE, endingSlashRE } from '../../util/'
-import Valine from '../../components/Valine/'
 import Category from '../../components/Category/'
+import PageInfo from '../../components/PageInfo/'
 import Tag from '../../components/Tag/'

 export default {
@ -72,7 +76,6 @@ export default {
    }
  },
  props: ['sidebarItems'],
-
  computed: {
    isCategories () {
      return this.$page.frontmatter.isCategories
@ -80,12 +83,6 @@ export default {
    isTags () {
      return this.$page.frontmatter.isTags
    },
-
-    // 是否显示评论
-    isComment () {
-      const isComment = this.$page.frontmatter.isComment
-      return isComment == false ? false : true
-    },
    lastUpdated () {
      if (this.$page.lastUpdated) {
        return new Date(this.$page.lastUpdated).toLocaleString(this.$lang)
@ -187,9 +184,9 @@ export default {
    }
  },
  components: {
-    Valine,
    Category,
-    Tag
+    Tag,
+    PageInfo
  }
 }

@ -219,13 +216,16 @@ function find (page, items, offset) {
 }
 </script>

-<style lang="stylus">
+<style lang="stylus" scoped>
@import '../../styles/config.styl'
@require '../../styles/wrapper.styl'

 .page
  padding-bottom 2rem
-  background-color #fff
+
+.page-title
+  max-width: 740px;
+  margin: 6rem auto 0;

 .page-edit
  @extend $wrapper
@ -268,4 +268,10 @@ function find (page, items, offset) {
      font-size .8em
      float none
      text-align left
+  .page-title
+    padding: 0 1rem;    
+    .tags
+      display block
+      margin-top 1rem;
+      margin-left: 0!important;    
 </style>
--- a/styles/common.styl
+++ b/styles/common.styl
@ -0,0 +1,178 @@
+/* 左浮动 */
+
+.float-left {
+  float: left;
+}
+
+/* 有浮动 */
+
+.float-right {
+  float: right;
+}
+
+/* 清除浮动 */
+
+.clear-fix:after {
+  content: ' ';
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+/*************显示隐藏*************/
+
+/* 显示 */
+
+.show {
+  display: block;
+}
+
+/* 隐藏 */
+
+.hide {
+  display: none;
+}
+
+/*************盒子类型*************/
+
+/* block */
+
+.block {
+  display: block;
+}
+
+/* inline */
+
+.inline {
+  display: inline;
+}
+
+/* inline-block */
+
+.inline-block {
+  display: inline-block;
+}
+
+/************** flex布局 **************/
+
+/* 父元素 */
+
+.flex-wrapper {
+  display: flex;
+}
+
+/* 换行 */
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+/* 子元素 */
+
+.flex-item {
+  flex: 1;
+}
+
+/* 顺序从上到下 */
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+/* 顺序从左到右 */
+
+.flex-direction-row {
+  flex-direction: row;
+}
+
+/* 横向居中 */
+
+.flex-row-center {
+  justify-content: center;
+}
+
+/* 纵向居中 */
+
+.flex-column-center {
+  align-items: center;
+}
+
+/* 横向两边对齐，并且第一个元素前和最后一个元素后不留空白 */
+
+.flex-space-between {
+  justify-content: space-between;
+}
+
+/* 横向两边对齐，并且第一个元素前和最后一个元素后留有空白 */
+
+.flex-space-around {
+  justify-content: space-around;
+}
+
+/**************文字位置**************/
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.overflowView{
+  overflow: hidden;
+}
+
+/**************文字溢出省略号**************/
+
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**************文字2行溢出省略号**************/
+
+.text-overflowTow {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  white-space: normal !important;
+  /* -webkit-line-clamp: 2; */
+  -webkit-box-orient: vertical;
+}
+
+/**************文字溢出自动换行**************/
+
+.text-wrap {
+  word-wrap: break-word;
+  word-break: normal;
+}
+
+/**************盒模型**************/
+
+.border-box {
+  box-sizing: border-box;
+}
+
+.content-box {
+  box-sizing: content-box;
+}
+
+.hide {
+  display: none;
+}
+/* 禁止复制 */
+.user-select-no {
+  user-select: none;
+}
+
+/* 添加悬浮小手标志 */
+.pointer {
+  cursor: pointer;
+}
--- a/styles/config.styl
+++ b/styles/config.styl
@ -4,9 +4,10 @@ $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
 $arrowBgColor = #ccc
+$bgColor = #fff

 // layout
-$navbarHeight = 3.6rem
+$navbarHeight = 3.4rem
 $sidebarWidth = 20rem
 $contentWidth = 740px

--- a/styles/custom-blocks.styl
+++ b/styles/custom-blocks.styl
@ -9,18 +9,19 @@
    margin 1rem 0
  &.tip
    background-color #f3f5f7
-    border-color #42b983
+    border-color #67cc86
+    color darken(#67cc86, 70%)
  &.warning
-    background-color rgba(255,229,100,.3)
-    border-color darken(#ffe564, 35%)
+    background-color #fbf0ea
+    border-color #fb9b5f
    color darken(#ffe564, 70%)
    .custom-block-title
      color darken(#ffe564, 50%)
    a
      color $textColor
  &.danger
-    background-color #ffe6e6
-    border-color darken(red, 20%)
+    background-color #fceaea
+    border-color #f26d6d
    color darken(red, 70%)
    .custom-block-title
      color darken(red, 40%)
--- a/styles/mobile.styl
+++ b/styles/mobile.styl
@ -33,5 +33,5 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
    font-size 1.9rem
  .content
    div[class*="language-"]
-      margin 0.85rem -1.5rem
+      margin 0.85rem -1.3rem
      border-radius 0
--- a/styles/theme.styl
+++ b/styles/theme.styl
@ -5,10 +5,19 @@
@require './arrow'
@require './wrapper'
@require './toc'
+// @require './common'
+@require '../fonts/iconfont.css'

 html, body
  padding 0
  margin 0
+  -moz-user-select:none;/*火狐*/
+  -webkit-user-select:none;/*webkit浏览器*/
+  -ms-user-select:none;/*IE10*/
+  -khtml-user-select:none;/*早期浏览器*/
+  user-select:none;
+  background-color: $bgColor
+  overflow-x: hidden

 body
  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
@ -17,6 +26,10 @@ body
  font-size 16px
  color $textColor  

+input 
+  background-color: $bgColor
+  -webkit-appearance: none;
+
 .page
  padding-left $sidebarWidth

@ -27,7 +40,7 @@ body
  left 0
  right 0
  height $navbarHeight
-  background-color #fff
+  background-color $bgColor
  box-sizing border-box
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28)

@ -45,7 +58,7 @@ body

 .sidebar
  font-size 15px
-  background-color #fff
+  background-color $bgColor
  width $sidebarWidth
  position fixed
  z-index 10
@ -60,7 +73,7 @@ body
 .content:not(.custom)
  @extend $wrapper
  > *:first-child
-    margin-top $navbarHeight
+    margin-top 1rem
  a:hover
    text-decoration underline
  p.demo
@ -182,6 +195,32 @@ th, td
    .custom-layout
      padding-top 0

+.iconfont
+  font-size: 0.9rem;
+  color: #999;
+  // &:not(:first-child)
+  //   margin-left: 1rem
+  // span
+  //   margin-left: .5rem
+
+/************** 滚动条 **************/
+::-webkit-scrollbar
+  width: 5px;
+  height: 5px;
+
+::-webkit-scrollbar-track-piece
+  background-color: rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 6px;
+
+::-webkit-scrollbar-thumb:vertical
+  height: 5px;
+  background-color: rgba(125, 125, 125, 0.7);
+  -webkit-border-radius: 6px;
+
+::-webkit-scrollbar-thumb:horizontal
+  width: 5px;
+  background-color: rgba(125, 125, 125, 0.7);
+  -webkit-border-radius: 6px;    

@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
--- a/styles/wrapper.styl
+++ b/styles/wrapper.styl
@ -5,5 +5,5 @@ $wrapper
  @media (max-width: $MQNarrow)
    padding 2rem
  @media (max-width: $MQMobileNarrow)
-    padding 1.5rem
+    padding 1.5rem 1rem
				`@ -1 +0,0 @@`
				`<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>`