File size: 2,597 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
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'
/**
* 文章列表分页表格
* @param page 当前页
* @param posts 所有文章
* @param tags 所有标签
* @returns {JSX.Element}
* @constructor
*/
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>
)
}
}
/**
* 计算文章列数
* @returns
*/
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
|