|
import { siteConfig } from '@/lib/config' |
|
import { deepClone, isBrowser } from '@/lib/utils' |
|
import BlogCard from './BlogCard' |
|
import BlogPostListEmpty from './BlogListEmpty' |
|
import PaginationSimple from './PaginationSimple' |
|
import { useEffect, useState } from 'react' |
|
import { debounce } from 'lodash' |
|
import { AdSlot } from '@/components/GoogleAdsense' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => { |
|
const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) |
|
const showNext = page < totalPage |
|
|
|
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="posts-wrapper" className='grid-container'> |
|
{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> |
|
))} |
|
{siteConfig('ADSENSE_GOOGLE_ID') && ( |
|
<div className='p-3'> |
|
<AdSlot type='flow'/> |
|
</div> |
|
)} |
|
|
|
</div> |
|
<PaginationSimple page={page} showNext={showNext} /> |
|
</div> |
|
) |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
const calculateColumns = () => { |
|
if (!isBrowser) { |
|
return 3 |
|
} else { |
|
if (window.innerWidth >= 1024) { |
|
return 3 |
|
} else if (window.innerWidth >= 640) { |
|
return 2 |
|
} else { |
|
return 1 |
|
} |
|
} |
|
} |
|
|
|
export default BlogListPage |
|
|