Merge pull request #52 from vuepress-reco/master

Master

Author: reco_luan

components/Common.vue

@@ -5,7 +5,7 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd">
     <transition name="fade">
-      <Loading v-if="firstLoad"></Loading>
+      <LoadingPage v-if="firstLoad"></LoadingPage>
       <Password v-else-if="!isHasKey"></Password>
       <div v-else>
         <Navbar
@@ -42,12 +42,11 @@ import Navbar from '@theme/components/Navbar.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import { resolveSidebarItems } from '../util'
 import Password from '@theme/components/Password'
-import Loading from '@theme/components/Loading'
 import Valine from '@theme/components/Valine/'
 import { setTimeout } from 'timers'
 
 export default {
-  components: { Sidebar, Navbar, Password, Valine, Loading },
+  components: { Sidebar, Navbar, Password, Valine },
 
   props: ['sidebar', 'isComment'],
 

components/HomeBlog.vue

@@ -48,13 +48,7 @@
         </ul>
         <hr>
         <h4><i class="iconfont reco-tag"></i> 标签</h4>
-        <div class="tags">
-          <span
-            v-for="(item, index) in tags"
-            :key="index"
-            :style="{ 'backgroundColor': item.color }"
-            @click="getPagesByTags(item.name)">{{item.name}}</span>
-        </div>
+        <TagList @getCurrentTag="getPagesByTags"></TagList>
       </div>
     </div>
 
@@ -87,12 +81,11 @@
 
 <script>
 import AccessNumber from '@theme/components/Valine/AccessNumber'
+import TagList from '@theme/components/TagList.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
-import mixin from '@theme/mixins/index.js'
 
 export default {
-  mixins: [mixin],
-  components: { AccessNumber, NoteAbstract },
+  components: { AccessNumber, NoteAbstract, TagList },
   data () {
     return {
       recoShow: false,
@@ -156,17 +149,6 @@ export default {
       return document.querySelector('.hero').clientHeight
     }
   },
-  created () {
-    if (this.$tags.list.length > 0) {
-      const tags = this.$tags.list
-      tags.map(item => {
-        const color = this._tagColor()
-        item.color = color
-        return tags
-      })
-      this.tags = tags
-    }
-  },
   mounted () {
     this.recoShow = true
   },
@@ -318,28 +300,6 @@ export default {
           }
         }
       }
-      .tags {
-        margin-bottom 30px
-        span {
-          vertical-align: middle;
-          margin: 4px 4px 10px;
-          padding: 4px 8px;
-          display: inline-flex;
-          cursor: pointer;
-          border-radius: 2px;
-          background: #fff;
-          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 {
-            transform scale(1.2)
-          }
-        }
-      }
     }
   }
 

components/Loading.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="tags">
+    <span
+      v-for="(item, index) in tags"
+      :key="index"
+      :class="{'active': item.name == currentTag}"
+      :style="{ 'backgroundColor': item.color }"
+      @click="tagClick(item.name)">{{item.name}}</span>
+  </div>
+</template>
+
+<script>
+import mixin from '@theme/mixins/index.js'
+
+export default {
+  mixins: [mixin],
+  props: {
+    currentTag: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      tags: []
+    }
+  },
+  created () {
+    if (this.$tags.list.length > 0) {
+      const tags = this.$tags.list
+      tags.map(item => {
+        const color = this._tagColor()
+        item.color = color
+        return tags
+      })
+      this.tags = [{ name: '全部', color: this._tagColor() }, ...tags]
+    }
+  },
+  methods: {
+    tagClick (tag) {
+      this.$emit('getCurrentTag', tag)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.tags
+  margin 30px 0
+  span
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 4px 8px;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: 2px;
+    background: #fff;
+    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
+      transform scale(1.2)
+</style>

components/TagList.vue

@@ -18,9 +18,10 @@ module.exports = (options, ctx) => ({
   },
 
   plugins: [
-    '@vuepress-reco/vuepress-plugin-back-to-top',
-    '@vuepress-reco/vuepress-plugin-pagation',
-    '@vuepress-reco/vuepress-plugin-screenfull',
+    '@vuepress-reco/back-to-top',
+    '@vuepress-reco/loading-page',
+    '@vuepress-reco/pagation',
+    '@vuepress-reco/screenfull',
     '@vuepress/active-header-links',
     ['@vuepress/plugin-blog', {
       permalink: '/:regular',

index.js

@@ -1,14 +1,7 @@
 <template>
   <div class="tags-wrapper" :class="recoShow?'reco-show': 'reco-hide'">
     <Common :sidebar="false" :isComment="false"></Common>
-    <div class="tags">
-      <span
-        v-for="(item, index) in tags"
-        :key="index"
-        :class="{'active': item.name == currentTag}"
-        :style="{ 'backgroundColor': item.color }"
-          @click="tagClick(item.name)">{{item.name}}</span>
-    </div>
+    <TagList :currentTag="currentTag" @getCurrentTag="tagClick"></TagList>
     <note-abstract
       class="list"
       :data="posts"
@@ -26,13 +19,11 @@
 
 <script>
 import Common from '@theme/components/Common.vue'
+import TagList from '@theme/components/TagList.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
-import mixin from '@theme/mixins/index.js'
 
 export default {
-  mixins: [mixin],
-  components: { Common, NoteAbstract },
-
+  components: { Common, NoteAbstract, TagList },
   data () {
     return {
       posts: [],
@@ -43,7 +34,6 @@ export default {
       allTagName: '全部'
     }
   },
-
   computed: {
     // 时间降序后的博客列表
     handlePosts () {
@@ -58,17 +48,9 @@ export default {
       return posts
     }
   },
-
   created () {
     if (this.$tags.list.length > 0) {
       const currentTag = this.$route.query.tag ? this.$route.query.tag : this.currentTag
-      const tags = this.$tags.list
-      tags.map(item => {
-        const color = this._tagColor()
-        item.color = color
-        return tags
-      })
-      this.tags = [{ name: '全部', color: this._tagColor() }, ...tags]
 
       this.getPagesByTags(currentTag)
     }
@@ -135,24 +117,6 @@ export default {
   max-width: 740px;
   margin: 0 auto;
   padding: 4.6rem 2.5rem 0;
-  .tags
-    margin 30px 0
-    span
-      vertical-align: middle;
-      margin: 4px 4px 10px;
-      padding: 4px 8px;
-      display: inline-block;
-      cursor: pointer;
-      border-radius: 2px;
-      background: #fff;
-      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
-        transform scale(1.2)
   &.reco-hide {
     .tags, .list, .pagation {
       load-start()

layouts/Tags.vue

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.0.9-alpha.6",
+  "version": "1.0.9-alpha.8",
   "description": "this is a vuepress theme",
   "main": "index.js",
   "scripts": {
@@ -27,6 +27,7 @@
   "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
   "dependencies": {
     "@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.3",
+    "@vuepress-reco/vuepress-plugin-loading-page": "^1.0.0",
     "@vuepress-reco/vuepress-plugin-pagation": "^1.0.3",
     "@vuepress-reco/vuepress-plugin-screenfull": "^1.0.0",
     "@vuepress/plugin-blog": "1.3.0",