From c2b507297991efa6b405ef9fac4baeeb9a984596 Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Sun, 13 Nov 2022 11:11:06 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8Dfukasawa=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/fukasawa/LayoutCategory.js             |  4 +-
 themes/fukasawa/components/BlogListPage.js    |  2 +-
 themes/fukasawa/components/BlogListScroll.js  | 80 +++++++++++++++++++
 .../fukasawa/components/PaginationSimple.js   |  8 +-
 4 files changed, 89 insertions(+), 5 deletions(-)
 create mode 100644 themes/fukasawa/components/BlogListScroll.js

diff --git a/themes/fukasawa/LayoutCategory.js b/themes/fukasawa/LayoutCategory.js
index 8b3f3b04..fa6c8c0d 100644
--- a/themes/fukasawa/LayoutCategory.js
+++ b/themes/fukasawa/LayoutCategory.js
@@ -1,8 +1,10 @@
+import BLOG from '@/blog.config'
 import BlogListPage from './components/BlogListPage'
+import BlogListScroll from './components/BlogListScroll'
 import LayoutBase from './LayoutBase'
 
 export const LayoutCategory = props => {
   return <LayoutBase {...props}>
-    <BlogListPage page={props.page} posts={props.posts} postCount={props.postCount} />
+    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props}/>}
   </LayoutBase>
 }
diff --git a/themes/fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js
index 04ef2b47..47650b5b 100644
--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogListPage = ({ page = 1, posts = [], postCount }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-  const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
+  const showNext = page < totalPage
   const [colCount, changeCol] = useState(1)
 
   function updateCol() {
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js
new file mode 100644
index 00000000..b295cc09
--- /dev/null
+++ b/themes/fukasawa/components/BlogListScroll.js
@@ -0,0 +1,80 @@
+import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import BlogCard from './BlogCard'
+import BlogPostListEmpty from './BlogListEmpty'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogListScroll = props => {
+  const { posts = [] } = props
+  const [colCount, changeCol] = useState(1)
+  const { locale } = useGlobal()
+
+  function updateCol() {
+    if (window.outerWidth > 1200) {
+      changeCol(3)
+    } else if (window.outerWidth > 900) {
+      changeCol(2)
+    } else {
+      changeCol(1)
+    }
+  }
+
+  const [page, updatePage] = useState(1)
+
+  let hasMore = false
+  const postsToShow = posts
+    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    : []
+
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+  }
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  useEffect(() => {
+    updateCol()
+    window.addEventListener('resize', updateCol)
+    return () => {
+      window.removeEventListener('resize', updateCol)
+    }
+  })
+
+  if (!posts || posts.length === 0) {
+    return <BlogPostListEmpty />
+  } else {
+    return (
+      <div id="container">
+        {/* 文章列表 */}
+        <div style={{ columnCount: colCount }}>
+          {postsToShow?.map(post => (
+            <div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
+              <BlogCard key={post.id} post={post} />
+            </div>
+          ))}
+        </div>
+
+        <div
+              onClick={handleGetMore}
+              className="w-full my-4 py-4 text-center cursor-pointer "
+          >
+              {' '}
+              {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+          </div>
+      </div>
+    )
+  }
+}
+
+export default BlogListScroll
diff --git a/themes/fukasawa/components/PaginationSimple.js b/themes/fukasawa/components/PaginationSimple.js
index 11eb837d..dc13ecb5 100644
--- a/themes/fukasawa/components/PaginationSimple.js
+++ b/themes/fukasawa/components/PaginationSimple.js
@@ -14,14 +14,16 @@ const PaginationSimple = ({ page, showNext }) => {
   const { locale } = useGlobal()
   const router = useRouter()
   const currentPage = +page
+  const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+
   return (
     <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
       <Link
         href={{
           pathname:
             currentPage === 2
-              ? `${BLOG.SUB_PATH || '/'}`
-              : `/page/${currentPage - 1}`,
+              ? `${pagePrefix}`
+              : `${pagePrefix}/page/${currentPage - 1}`,
           query: router.query.s ? { s: router.query.s } : {}
         }}
         passHref
@@ -37,7 +39,7 @@ const PaginationSimple = ({ page, showNext }) => {
       </Link>
       <Link
         href={{
-          pathname: `/page/${currentPage + 1}`,
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
           query: router.query.s ? { s: router.query.s } : {}
         }}
         passHref