feat: ✨ 完成文章页面的懒加载

README.md

@@ -41,7 +41,7 @@ pnpm run dev
 - npm 发布 ✅
 - 文章摘要标题 ✅
 - 图片懒加载 ✅
-- 文章懒加载 (working)
+- 文章懒加载 ✅
 - 站内搜索
 - 文章评论 ✅
 - 不同颜色主题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-theme-sakurairo",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "a sakurairo blog theme base on vitepress",
   "author": "wuyifan <[email protected]>",
   "license": "MIT",

src/components/ArticleBoard.vue

@@ -17,14 +17,8 @@
                 <br>
                 {{ theme.articleBoard.title }}
             </h1>
-            <ArticleList :list="pages"></ArticleList>
-        </div>
-        <div class="content-pagination">
-            <a href="" v-if="true">更早文章</a>
-            <span v-else>
-                很高兴你翻到这里，但是真的没有了...
-            </span>
         </div>
+        <ArticleList :list="pages"></ArticleList>
     </div>
 </template>
 
@@ -85,35 +79,6 @@ const pages = computed(() => {
         }
     }
 
-    .content-pagination {
-        display: inline-block;
-        padding: 20px 0;
-        margin: 40px 0 80px;
-        width: 100%;
-        text-align: center;
-
-        a {
-            padding: 13px 35px;
-            font-size: 13px;
-            color: $--theme-skin;
-            background: rgba(255 255 255 / 50%);
-            border: 1.5px solid #fff;
-            border-radius: 50px;
-            box-shadow: 0 1px 30px -4px #e8e8e8;
-            transition: all .8s ease;
-
-            &:hover {
-                color: #505050;
-                box-shadow: 0 1px 20px 10px #e8e8e8;
-                transition: all 0.8s ease !important;
-            }
-        }
 
-        span {
-            font-size: 15px;
-            color: $--theme-skin;
-            font-weight: $--global-font-weight;
-        }
-    }
 }
 </style>

src/components/ArticleList.vue

@@ -1,11 +1,10 @@
 <template>
     <div class="article-list">
         <ul class="clearfix">
-            <li v-for="(item, index) in list" :key="index" class="article-block">
+            <li v-for="(item, index) in showList" :key="index" class="article-block">
                 <article>
                     <div class="article-cover" :class="`article-list-${theme.articleBoard.layout}`">
                         <a :href="withBase(item.url)">
-                            <!-- <img :src="item.cover" alt=""> -->
                             <img v-lazy="item.cover" alt="">
                         </a>
                     </div>
@@ -45,25 +44,44 @@
                             </div>
                         </div>
                     </div>
-
                 </article>
             </li>
         </ul>
     </div>
+    <div class="content-pagination">
+        <a href="javascript:void(0);" @click="getPages" v-if="showList.length < list.length">更早文章</a>
+        <span v-else>
+            很高兴你翻到这里，但是真的没有了...
+        </span>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { PropType, computed, ref } from 'vue';
 import { Article, Theme } from '../types';
 import { useData, withBase } from 'vitepress';
 
 const theme = useData().theme.value as Theme;
 
+const times = ref(1)
 
-const { list } = defineProps({
+const getPages = (e: MouseEvent) => {
+    e.preventDefault();
+    times.value++;
+}
+
+const showList = computed(() => {
+    return list.slice(0, pageSize * times.value);
+})
+
+const { list, pageSize } = defineProps({
     list: {
         type: Array as PropType<Article[]>,
         default: () => []
+    },
+    pageSize: {
+        type: Number,
+        default: 5
     }
 })
 </script>
@@ -261,5 +279,38 @@ const { list } = defineProps({
         }
 
     }
+
+
+}
+
+.content-pagination {
+    display: inline-block;
+    padding: 20px 0;
+    margin: 40px 0 80px;
+    width: 100%;
+    text-align: center;
+
+    a {
+        padding: 13px 35px;
+        font-size: 13px;
+        color: $--theme-skin;
+        background: rgba(255 255 255 / 50%);
+        border: 1.5px solid #fff;
+        border-radius: 50px;
+        box-shadow: 0 1px 30px -4px #e8e8e8;
+        transition: all .8s ease;
+
+        &:hover {
+            color: #505050;
+            box-shadow: 0 1px 20px 10px #e8e8e8;
+            transition: all 0.8s ease !important;
+        }
+    }
+
+    span {
+        font-size: 15px;
+        color: $--theme-skin;
+        font-weight: $--global-font-weight;
+    }
 }
 </style>

src/utils/lazyLoad.ts

@@ -2,12 +2,12 @@
  * @Author: wuyifan0203 [email protected]
  * @Date: 2024-03-14 15:59:38
  * @LastEditors: wuyifan0203 [email protected]
- * @LastEditTime: 2024-03-15 13:39:48
+ * @LastEditTime: 2024-03-21 17:51:53
  * @FilePath: /vitepress-theme-sakurairo/src/utils/lazyLoad.ts
  * Copyright (c) 2024 by wuyifan0203 email: [email protected], All Rights Reserved.
  */
 
-import type { App, Ref } from "vue"
+import type { App, DirectiveBinding } from "vue"
 import { ImageLoader, State } from "./ImageLoader";
 
 function lazy(options: { loading: string, error?: string }) {
@@ -21,7 +21,6 @@ function lazy(options: { loading: string, error?: string }) {
                 const manager = managerQueue.find((manager) => {
                     return manager.el === entry.target
                 })
-                // console.log(manager, 'manager');
 
                 if (manager) {
                     if (manager.state === State.LOADED) {
@@ -49,8 +48,7 @@ function lazy(options: { loading: string, error?: string }) {
         }
     }
 
-    function add(el: HTMLImageElement, binding: Ref<string>) {
-        // console.log(el, binding, 'add');
+    function add(el: HTMLImageElement, binding: DirectiveBinding) {
 
         const src = binding.value;
         const manager = new ImageLoader({
@@ -73,7 +71,7 @@ function lazy(options: { loading: string, error?: string }) {
         manager && removeManager(manager)
     }
 
-    function update(el: HTMLImageElement, binding: Ref<string>) {
+    function update(el: HTMLImageElement, binding: DirectiveBinding) {
         // console.log(el, binding, 'update');
         const src = binding.value;
         const manager = managerQueue.find((manager) => {
@@ -82,11 +80,12 @@ function lazy(options: { loading: string, error?: string }) {
         manager && manager.update(src)
     }
 
+    // window.cache = cache;
     return {
         managerQueue,
         remove,
         add,
-        update
+        update,
     }