d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

标题处理、标签页分页处理

Browse Source
This commit is contained in:
tangly1024
2021-10-16 15:26:09 +08:00
parent bca507029c
commit 3d70843441
12 changed files with 205 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/BlogPostList.js
View File

@@ -3,6 +3,7 @@ import Pagination from '@/components/Pagination'
import BLOG from '@/blog.config'
import { useRouter } from 'next/router'
import BlogPostListEmpty from '@/components/BlogPostListEmpty'
/**
* 文章列表分页表格
@@ -13,13 +14,6 @@ import { useRouter } from 'next/router'
* @constructor
*/
const BlogPostList = ({ page = 1, posts = [], tags }) => {
if (!posts) {
return <div>
<div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
<p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
</div>
</div>
}
let filteredBlogPosts = posts
// 处理查询过滤 支持标签、关键词过滤
@@ -46,31 +40,32 @@ const BlogPostList = ({ page = 1, posts = [], tags }) => {
showNext = page * BLOG.postsPerPage < totalPosts
}
return <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
{(!page || page === 1) && (<div className='py-5' />)}
if (!postsToShow || postsToShow.length === 0) {
return <BlogPostListEmpty />
} else {
return <div id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
{(!page || page === 1) && (<div className='py-5' />)}
{(page && page !== 1) && (
<div className='pb-5'>
<div className='dark:text-gray-200 flex justify-between py-1'>
{page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
{(page && page !== 1) && (
<div className='pb-5'>
<div className='dark:text-gray-200 flex justify-between py-1'>
{page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
</div>
</div>
</div>
)}
)}
<div className=''>
{/* 文章列表 */}
<div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
{!postsToShow.length && (
<p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
)}
{postsToShow.map(post => (
<BlogPost key={post.id} post={post} tags={tags} />
))}
</div>
<div>
{/* 文章列表 */}
<div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
{postsToShow.map(post => (
<BlogPost key={post.id} post={post} tags={tags} />
))}
</div>
<Pagination page={page} showNext={showNext} />
<Pagination page={page} showNext={showNext} />
</div>
</div>
</main>
}
}
export default BlogPostList