加入滚动分页组件,页面微调

components/BlogPost.js

@@ -4,7 +4,7 @@ import TagItemMini from '@/components/TagItemMini'
 const BlogPost = ({ post }) => {
   return (
     <article key={post.id}
-             className='inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+             className='animate__animated animate__fadeIn inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>

components/BlogPostList.js

@@ -0,0 +1,76 @@
+import BlogPost from '@/components/BlogPost'
+import Pagination from '@/components/Pagination'
+import BLOG from '@/blog.config'
+
+import { useRouter } from 'next/router'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostList = ({ page = 1, posts = [], tags }) => {
+  if (!posts) {
+    return <div>
+      <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+          <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
+      </div>
+    </div>
+  }
+  let filteredBlogPosts = posts
+
+  // 处理查询过滤 支持标签、关键词过滤
+  let currentSearch = ''
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    currentSearch = router.query.s
+    filteredBlogPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent + post.slug
+      return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
+    })
+  }
+
+  // 处理分页
+  const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
+  const postsToShow = filteredBlogPosts.slice(
+    BLOG.postsPerPage * (page - 1),
+    BLOG.postsPerPage * page
+  )
+  let showNext = false
+  if (filteredBlogPosts) {
+    const totalPosts = filteredBlogPosts.length
+    showNext = page * BLOG.postsPerPage < totalPosts
+  }
+
+  return <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
+    {(!page || page === 1) && (<div className='py-5' />)}
+
+    {(page && page !== 1) && (
+      <div className='pb-5'>
+        <div className='dark:text-gray-200 flex justify-between py-1'>
+          {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
+        </div>
+      </div>
+    )}
+
+    <div className=''>
+      {/* 文章列表 */}
+      <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+        {!postsToShow.length && (
+          <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
+        )}
+        {postsToShow.map(post => (
+          <BlogPost key={post.id} post={post} tags={tags} />
+        ))}
+      </div>
+
+      <Pagination page={page} showNext={showNext} />
+    </div>
+  </main>
+}
+
+export default BlogPostList

components/BlogPostListScrollPagination .js

@@ -0,0 +1,116 @@
+import BlogPost from '@/components/BlogPost'
+import Pagination from '@/components/Pagination'
+import BLOG from '@/blog.config'
+
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useState } from 'react'
+import throttle from 'lodash.throttle'
+
+/**
+ * 获取指定页码的文章
+ * @param page 第几页
+ * @param totalPosts 所有文章
+ * @param postsPerPage 每页文章数量
+ * @returns {*}
+ */
+const getPostByPage = function (page, totalPosts, postsPerPage) {
+  return totalPosts.slice(
+    postsPerPage * (page - 1),
+    postsPerPage * page
+  )
+}
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
+  if (!posts) {
+    return <div>
+      <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+        <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
+      </div>
+    </div>
+  }
+  let filteredBlogPosts = posts
+
+  // 处理查询过滤 支持标签、关键词过滤
+  let currentSearch = ''
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    currentSearch = router.query.s
+    filteredBlogPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent + post.slug
+      return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
+    })
+  }
+  const [page, updatePage] = useState(1)
+  const [postsToShow, updatePostToShow] = useState(getPostByPage(page, filteredBlogPosts, BLOG.postsPerPage))
+
+  let showNext = false
+  if (filteredBlogPosts) {
+    const totalPosts = filteredBlogPosts.length
+    showNext = page * BLOG.postsPerPage < totalPosts
+  }
+  const [loading, updateLoading] = useState(false)
+  const handleGetMore = function () {
+    if (!showNext) {
+      // 完了
+      return
+    }
+    if (loading) {
+      // 加载中
+      return
+    }
+    updateLoading(true)
+    updatePage(page + 1)
+    updatePostToShow(postsToShow.concat(getPostByPage(page + 1, filteredBlogPosts, BLOG.postsPerPage)))
+    updateLoading(false)
+  }
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY + window.outerHeight
+    const clientHeight = targetRef ? (targetRef.current.clientHeight) : 0
+    if (scrollS > clientHeight + 10) {
+      handleGetMore()
+    }
+  }, 500))
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  return <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
+    <div className=''>
+      {/* 文章列表 */}
+      <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+        {!postsToShow.length && (
+          <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
+        )}
+        {postsToShow.map(post => (
+          <BlogPost key={post.id} post={post} tags={tags} />
+        ))}
+      </div>
+
+      <div className='flex'>
+        {showNext
+          ? (<div className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer' onClick={ handleGetMore}> 加载更多 </div>)
+          : (
+          <div className='w-full my-4 py-4 bg-gray-200 text-center' > 加载完了😰 </div>
+            )}
+
+      </div>
+    </div>
+  </main>
+}
+
+export default BlogPostListScrollPagination

components/JumpToTop.js

@@ -34,7 +34,7 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
 
   return (
     <div
-      className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
+      className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
       <div
         style={{ backgroundColor: 'rgb(56, 144, 255)' }}
         className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '

components/TagList.js

@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
         {Object.keys(tags).map(tag => {
           const selected = tag === currentTag
           return (
-            <TagItemMini tag={tag} selected={selected} count={tags[tag]}/>
+            <TagItemMini key={tag} tag={tag} selected={selected} count={tags[tag]}/>
           )
         })}
     </div>

layouts/IndexLayout.js

@@ -1,8 +1,5 @@
-import BlogPost from '@/components/BlogPost'
 import PropTypes from 'prop-types'
-import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
 import TagsBar from '@/components/TagsBar'
 import Footer from '@/components/Footer'
 import React, { useRef } from 'react'
@@ -10,6 +7,7 @@ import Container from '@/components/Container'
 import JumpToTop from '@/components/JumpToTop'
 import SideBar from '@/components/SideBar'
 import TopNav from '@/components/TopNav'
+import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination '
 
 const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
@@ -17,34 +15,6 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     type: 'website',
     ...customMeta
   }
-  page = page ?? 1
-  let postsToShow = []
-  let filteredBlogPosts = posts ?? []
-  let currentSearch = ''
-  if (posts) {
-    const router = useRouter()
-    if (router.query && router.query.s) {
-      currentSearch = router.query.s
-      filteredBlogPosts = posts.filter(post => {
-        const tagContent = post.tags ? post.tags.join(' ') : ''
-        const searchContent = post.title + post.summary + tagContent + post.slug
-        return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
-      })
-    }
-  }
-  const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
-
-  if (posts) {
-    postsToShow = filteredBlogPosts.slice(
-      BLOG.postsPerPage * (page - 1),
-      BLOG.postsPerPage * page
-    )
-  }
-  let showNext = false
-  if (filteredBlogPosts) {
-    const totalPosts = filteredBlogPosts.length
-    showNext = page * BLOG.postsPerPage < totalPosts
-  }
 
   const targetRef = useRef(null)
 
@@ -57,32 +27,7 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
         <SideBar />
         <div className='flex-grow'>
           <TagsBar tags={tags} currentTag={currentTag} />
-          <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
-            {(!page || page === 1) && (<div className='py-5' />)}
-
-            {/* 当前搜索 */}
-            {(currentSearch || (page && page !== 1)) && (
-              <div className='pb-5'>
-                <div className='dark:text-gray-200 flex justify-between py-1'>
-                  {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
-                </div>
-              </div>
-            )}
-
-            <div className=''>
-              {/* 文章列表 */}
-              <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
-                {!postsToShow.length && (
-                  <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
-                )}
-                {postsToShow.map(post => (
-                  <BlogPost key={post.id} post={post} tags={tags} />
-                ))}
-              </div>
-
-              <Pagination page={page} showNext={showNext} />
-            </div>
-          </main>
+          <BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef}/>
         </div>
       </div>
 

layouts/PageLayout.js

@@ -1,8 +1,5 @@
-import BlogPost from '@/components/BlogPost'
 import PropTypes from 'prop-types'
-import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
 import TagsBar from '@/components/TagsBar'
 import Footer from '@/components/Footer'
 import React, { useRef } from 'react'
@@ -10,6 +7,7 @@ import Container from '@/components/Container'
 import JumpToTop from '@/components/JumpToTop'
 import SideBar from '@/components/SideBar'
 import TopNav from '@/components/TopNav'
+import BlogPostList from '@/components/BlogPostList'
 
 const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
@@ -17,34 +15,6 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     type: 'website',
     ...customMeta
   }
-  page = page ?? 1
-  let postsToShow = []
-  let filteredBlogPosts = posts ?? []
-  let currentSearch = ''
-  if (posts) {
-    const router = useRouter()
-    if (router.query && router.query.s) {
-      currentSearch = router.query.s
-      filteredBlogPosts = posts.filter(post => {
-        const tagContent = post.tags ? post.tags.join(' ') : ''
-        const searchContent = post.title + post.summary + tagContent + post.slug
-        return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
-      })
-    }
-  }
-  const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
-
-  if (posts) {
-    postsToShow = filteredBlogPosts.slice(
-      BLOG.postsPerPage * (page - 1),
-      BLOG.postsPerPage * page
-    )
-  }
-  let showNext = false
-  if (filteredBlogPosts) {
-    const totalPosts = filteredBlogPosts.length
-    showNext = page * BLOG.postsPerPage < totalPosts
-  }
   const targetRef = useRef(null)
 
   return (
@@ -58,32 +28,7 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
 
           <TagsBar tags={tags} currentTag={currentTag} />
 
-          <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
-            {(!page || page === 1) && (<div className='py-5' />)}
-
-            {/* 当前搜索 */}
-            {(currentSearch || (page && page !== 1)) && (
-              <div className='pb-5'>
-                <div className='dark:text-gray-200 flex justify-between py-1'>
-                  {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
-                </div>
-              </div>
-            )}
-
-            <div className=''>
-              {/* 文章列表 */}
-              <div className='grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
-                {!postsToShow.length && (
-                  <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
-                )}
-                {postsToShow.map(post => (
-                  <BlogPost key={post.id} post={post} tags={tags} />
-                ))}
-              </div>
-
-              <Pagination page={page} showNext={showNext} />
-            </div>
-          </main>
+          <BlogPostList posts={posts} tags={tags} page={page}/>
 
         </div>