👌文章列表分页按钮调整

This commit is contained in:
tangly1024
2021-10-07 17:41:44 +08:00
parent 17e65fdffc
commit 15a6a2cb51
2 changed files with 11 additions and 17 deletions

View File

@@ -8,7 +8,7 @@ const Pagination = ({ page, showNext }) => {
const router = useRouter()
const currentPage = +page
return (
<div className=' my-10 flex justify-between font-medium text-black dark:text-gray-100 mx-5'>
<div className=' my-10 flex justify-between font-medium text-black dark:text-gray-100'>
<Link
href={
{

View File

@@ -77,15 +77,13 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
return (
<div id='wrapper' className={theme}>
<CommonHead meta={meta}/>
<CommonHead meta={meta} />
<div className={`${BLOG.font} flex bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBar tags={tags} currentTag={currentTag} />
<main className='md:px-24 p-5 flex-grow'>
{(!page || page === 1) && (
<div className='py-5' />
)
}
{(!page || page === 1) && (<div className='py-5' />)}
{/* 标签 */}
{currentTag && (
<div className='pb-5 dark:text-gray-200'>
@@ -93,35 +91,31 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
<hr />
</div>
)}
{/* 当前搜索 */}
{(currentSearch || (page && page !== 1)) && (
<div className='pb-5'>
<div className='dark:text-gray-200 flex justify-between py-1'>
{currentSearch && (
<span>搜索关键词: {currentSearch}</span>
)}
{page && page !== 1 && (
<span> {page} / {totalPages}</span>
)}
{currentSearch && (<span>搜索关键词: {currentSearch}</span>)}
{page && page !== 1 && (<span> {page} / {totalPages}</span>)}
</div>
<hr />
</div>
)}
{/* 文章列表 */}
<div className='mx-auto'>
{/* <div className='col-4 grid md:grid-cols-2 grid-cols-1 gap-6'> */}
{/* 文章列表 */}
<div style={{ columnCount: column }}>
{!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} />
<BlogPost key={post.id} post={post} tags={tags} />
))}
</div>
</div>
<Pagination page={page} showNext={showNext} />
<Pagination page={page} showNext={showNext} />
</div>
</main>
</div>