feat: homepag add pagation

Author: recocopliot

components/HomeBlog.vue

@@ -8,12 +8,21 @@
     </div>
 
     <div class="home-blog-wrapper">
-      <!-- 博客列表 -->
-      <note-abstract
-        class="blog-list"
-        :data="posts"
-        :isHome="true"
-        :currentPage="1"></note-abstract>
+      <div>
+        <!-- 博客列表 -->
+        <note-abstract
+          class="blog-list"
+          :data="posts"
+          :isHome="true"
+          :currentPage="currentPage"></note-abstract>
+        <!-- 分页 -->
+        <pagation
+          class="pagation"
+          :total="posts.length"
+          :currentPage="currentPage"
+          @getCurrentPage="getCurrentPage" /> 
+      </div>
+      
       <div class="info-wrapper">
          <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
          <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
@@ -87,6 +96,7 @@ export default {
   data () {
     return {
       recoShow: false,
+      currentPage: 1,
       tags: []
     }
   },
@@ -140,6 +150,10 @@ export default {
         overflow: 'hidden'
       }
       return this.data.bgImageStyle ? { ...bgImageStyle, ...this.data.bgImageStyle } : bgImageStyle
+    },
+
+    heroHeight () {
+      return document.querySelector('.hero').clientHeight
     }
   },
   created () {
@@ -157,6 +171,13 @@ export default {
     this.recoShow = true
   },
   methods: {
+    // 获取当前页码
+    getCurrentPage (page) {
+      this._setPage(page)
+      setTimeout(() => {
+        window.scrollTo(0, this.heroHeight)
+      }, 100)
+    },
     // 根据分类获取页面数据
     getPages () {
       let pages = this.$site.pages
@@ -174,7 +195,11 @@ export default {
     // 获取时间的数字类型
     _getTimeNum (data) {
       return parseInt(new Date(data.frontmatter.date).getTime())
-    }
+    },
+    _setPage (page) {
+      this.currentPage = page
+      this.$page.currentPage = page
+    },
   }
 }
 </script>