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
-
+ {BLOG.POST_LIST_STYLE === 'page' ? : }
}
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
+ } else {
+ return (
+
+ {/* 文章列表 */}
+
+ {postsToShow?.map(post => (
+
+
+
+ ))}
+
+
+
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+ )
+ }
+}
+
+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 (
{