fukasawa主题微调逻辑

themes/fukasawa/components/BlogListPage.js

@@ -1,5 +1,4 @@
 import BLOG from '@/blog.config'
-import { useEffect, useState } from 'react'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
 import PaginationSimple from './PaginationSimple'
@@ -15,25 +14,6 @@ import PaginationSimple from './PaginationSimple'
 const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
   const showNext = page < totalPage
-  const [colCount, changeCol] = useState(1)
-
-  function updateCol() {
-    if (window.outerWidth > 1200) {
-      changeCol(3)
-    } else if (window.outerWidth > 900) {
-      changeCol(2)
-    } else {
-      changeCol(1)
-    }
-  }
-
-  useEffect(() => {
-    updateCol()
-    window.addEventListener('resize', updateCol)
-    return () => {
-      window.removeEventListener('resize', updateCol)
-    }
-  })
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
@@ -41,10 +21,10 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return (
       <div>
         {/* 文章列表 */}
-        <div id="container" style={{ columnCount: colCount }}>
+        <div id="container" className='grid-container'>
           {posts?.map(post => (
-            <div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
-              <BlogCard key={post.id} post={post} siteInfo={siteInfo} />
+            <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>
           ))}
         </div>