fix: Fix bug in tag page

Switch tab button does not display the number of readings.

Author: reco_luan

components/Common.vue

@@ -170,7 +170,7 @@ export default {
   },
 
   created () {
-    this.getPostData()
+    this._getPostData()
   },
 
   mounted () {
@@ -233,23 +233,6 @@ export default {
         this.firstLoad = false
         if (sessionStorage.getItem('firstLoad') == undefined) sessionStorage.setItem('firstLoad', false)
       }, time)
-    },
-    getPostData () {
-      if (!this.$themeConfig.posts) {
-        const {
-          $categories: { list: articles },
-          _filterPostData,
-          _sortPostData
-        } = this
-
-        let posts = articles.reduce((allData, currnetData) => {
-          return [...allData, ...currnetData.pages]
-        }, [])
-        posts = _filterPostData(posts)
-        _sortPostData(posts)
-
-        this.$themeConfig.posts = posts
-      }
     }
   },
 

components/HomeBlog.vue

@@ -127,7 +127,8 @@ export default {
       // reverse()是为了按时间最近排序排序
       this.pages = pages.length == 0 ? [] : pages
     },
-    getPagesByTags (currentTag) {
+    getPagesByTags (tagInfo) {
+      const currentTag = tagInfo.name
       const base = this.$site.base
       window.location.href = `${base}tag/?tag=${currentTag}`
     },

components/PageInfo.vue

@@ -86,8 +86,7 @@ export default {
   },
   methods: {
     goTags (tag) {
-      const base = this.$site.base
-      window.location.href = `${base}tag/?tag=${tag}`
+      this.$router.push({ path: `/tags/${tag}/` })
     }
   }
 }

components/TagList.vue

@@ -5,7 +5,7 @@
       :key="index"
       :class="{'active': item.name == currentTag}"
       :style="{ 'backgroundColor': _tagColor() }"
-      @click="tagClick(item.name)">{{item.name}}</span>
+      @click="tagClick(item)">{{item.name}}</span>
   </div>
 </template>
 
@@ -22,7 +22,7 @@ export default {
   },
   computed: {
     tags () {
-      return [{ name: '全部' }, ...this.$tags.list]
+      return [{ name: '全部', path: '/tag/' }, ...this.$tags.list]
     }
   },
   methods: {

layouts/Tag.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="tag-wrapper" :class="recoShow ?'reco-show' : 'reco-hide'">
+    <!-- 公共布局 -->
+    <Common :sidebar="false" :isComment="false">
+      <!-- 标签集合 -->
+      <TagList class="tags" :currentTag="$currentTags.key" @getCurrentTag="tagClick"></TagList>
+
+      <!-- 博客列表 -->
+      <note-abstract
+        class="list"
+        :data="posts"
+        :currentPage="currentPage"
+        @currentTag="$currentTags.key"></note-abstract>
+
+      <!-- 分页 -->
+      <pagation
+        class="pagation"
+        :total="posts.length"
+        :currentPage="currentPage"
+        @getCurrentPage="getCurrentPage"></pagation>
+    </Common>
+  </div>
+</template>
+
+<script>
+import Common from '@theme/components/Common.vue'
+import NoteAbstract from '@theme/components/NoteAbstract.vue'
+import TagList from '@theme/components/TagList.vue'
+import mixin from '@theme/mixins/index.js'
+
+export default {
+  mixins: [mixin],
+  components: { Common, NoteAbstract, TagList },
+
+  data () {
+    return {
+      // 当前页码
+      currentPage: 1,
+      recoShow: false,
+      currentTag: '全部',
+    }
+  },
+
+  computed: {
+    // 时间降序后的博客列表
+    posts () {
+      let posts = this.$currentTags.pages
+      posts = this._filterPostData(posts)
+      this._sortPostData(posts)
+      this._setPage(1)
+      return posts
+    },
+  },
+
+  mounted () {
+    this.recoShow = true
+  },
+
+  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
+    },
+  }
+}
+</script>
+
+<style src="../styles/theme.styl" lang="stylus"></style>
+
+<style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
+@require '../styles/loadMixin.styl'
+.tag-wrapper
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 4.6rem 2.5rem 0;
+  &.reco-hide {
+    .tags, .list, .pagation {
+      load-start()
+    }
+  }
+  &.reco-show {
+    .tags {
+      load-end(0.08s)
+    }
+    .list {
+      load-end(0.16s)
+    }
+    .pagation {
+      load-end(0.24s)
+    }
+  }
+
+@media (max-width: $MQMobile)
+  .tag-wrapper
+    padding: 4.6rem 1rem 0;
+</style>

layouts/Tags.vue

@@ -39,22 +39,10 @@ export default {
   computed: {
     // 时间降序后的博客列表
     posts () {
-      const currentTag = this.currentTag
-      let posts = []
-
-      if (currentTag !== '全部') {
-        posts = this.$tags.map[currentTag].pages
-      } else {
-        posts = this.$themeConfig.posts
-      }
-
-      posts = this._filterPostData(posts)
-      this._sortPostData(posts)
-      posts = posts.length == 0 ? [] : posts
-      this._setPage(1)
-      return posts
+      return this.$themeConfig.posts || this.$site.pages
     }
   },
+
   created () {
     if (this.$tags.list.length > 0) {
       this.currentTag = this.$route.query.tag ? this.$route.query.tag : this.currentTag
@@ -67,9 +55,8 @@ export default {
 
   methods: {
 
-    tagClick (currentTag) {
-      this.currentTag = currentTag
-      window.scrollTo(0, 0)
+    tagClick (tagInfo) {
+      this.$router.push({ path: tagInfo.path })
     },
 
     getCurrentTag (tag) {

mixins/index.js

@@ -1,3 +1,5 @@
+import { promise } from "when"
+
 export default {
   methods: {
     _tagColor () {
@@ -23,6 +25,27 @@ export default {
     // 获取时间的数字类型
     _getTimeNum (date) {
       return parseInt(new Date(date.frontmatter.date).getTime())
+    },
+    // 获取博客数据
+    _getPostData () {
+      return new Promise(resolve => {
+        if (!this.$themeConfig.posts) {
+          const {
+            $categories: { list: articles },
+            _filterPostData,
+            _sortPostData
+          } = this
+
+          let posts = articles.reduce((allData, currnetData) => {
+            return [...allData, ...currnetData.pages]
+          }, [])
+          posts = _filterPostData(posts)
+          _sortPostData(posts)
+
+          this.$themeConfig.posts = posts
+          resolve(posts)
+        }
+      })
     }
   }
 }