fuksawa post card

themes/fukasawa/components/BlogListPage.js

@@ -1,8 +1,10 @@
 import BLOG from '@/blog.config'
+import { deepClone } from '@/lib/utils'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
 import PaginationSimple from './PaginationSimple'
-
+import { useEffect, useState } from 'react'
+import { debounce } from 'lodash'
 /**
  * 文章列表分页表格
  * @param page 当前页
@@ -15,14 +17,43 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
   const showNext = page < totalPage
 
-  if (!posts || posts.length === 0) {
+  const [columns, setColumns] = useState(calculateColumns())
+  const [filterPosts, setFilterPosts] = useState([])
+
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      setColumns(calculateColumns())
+    }, 200)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  /**
+   * 文章重新布局，使纵向排列看起来是横向排列
+   */
+  useEffect(() => {
+    const count = posts?.length || 0
+    const rows = Math.ceil(count / columns)
+    const newFilterPosts = []
+    for (let i = 0; i < columns; i++) {
+      for (let j = 0; j < rows; j++) {
+        const index = j * columns + i
+        if (index < count) {
+          newFilterPosts.push(deepClone(posts[index]))
+        }
+      }
+    }
+    setFilterPosts(newFilterPosts)
+  }, [columns, posts])
+
+  if (!filterPosts || filterPosts.length === 0) {
     return <BlogPostListEmpty />
   } else {
     return (
       <div>
         {/* 文章列表 */}
         <div id="container" className='grid-container'>
-          {posts?.map(post => (
+          {filterPosts?.map(post => (
             <div key={post.id} className='grid-item justify-center flex' style={{ breakInside: 'avoid' }}>
               <BlogCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
             </div>
@@ -34,4 +65,14 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   }
 }
 
+const calculateColumns = () => {
+  if (window.innerWidth >= 1024) {
+    return 3
+  } else if (window.innerWidth >= 640) {
+    return 2
+  } else {
+    return 1
+  }
+}
+
 export default BlogListPage