部分提交tag分页

This commit is contained in:
tangly
2022-11-11 18:06:14 +08:00
parent aa33febef4
commit d6d310a4e0
4 changed files with 49 additions and 45 deletions

View File

@@ -23,33 +23,22 @@ export async function getStaticProps() {
} }
// 处理分页 // 处理分页
const page = 1 if (BLOG.POST_LIST_STYLE === 'scroll') {
let postsToShow props.posts = Array.from(allPosts)
if (BLOG.POST_LIST_STYLE !== 'page') { } else if (BLOG.POST_LIST_STYLE === 'page') {
postsToShow = Array.from(allPosts) props.posts = allPosts?.slice(0, BLOG.POSTS_PER_PAGE)
} else { }
postsToShow = allPosts?.slice(
BLOG.POSTS_PER_PAGE * (page - 1), // 预览文章内容
BLOG.POSTS_PER_PAGE * page if (BLOG.POST_LIST_PREVIEW === 'true') {
) for (const i in props.posts) {
if (BLOG.POST_LIST_PREVIEW === 'true') { const post = props.posts[i]
for (const i in postsToShow) { if (post.password && post.password !== '') {
const post = postsToShow[i] continue
if (post.password && post.password !== '') {
continue
}
const blockMap = await getPostBlocks(
post.id,
'slug',
BLOG.POST_PREVIEW_LINES
)
if (blockMap) {
post.blockMap = blockMap
}
} }
post.blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
} }
} }
props.posts = postsToShow
return { return {
props: { props: {

View File

@@ -41,24 +41,16 @@ export async function getStaticProps({ params: { page } }) {
const { allPages } = props const { allPages } = props
const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published') const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
// 处理分页 // 处理分页
props.posts = allPosts.slice( props.posts = allPosts.slice(BLOG.POSTS_PER_PAGE * (page - 1), BLOG.POSTS_PER_PAGE * page)
BLOG.POSTS_PER_PAGE * (page - 1),
BLOG.POSTS_PER_PAGE * page // 处理预览
)
if (BLOG.POST_LIST_PREVIEW === 'true') { if (BLOG.POST_LIST_PREVIEW === 'true') {
for (const i in props.posts) { for (const i in props.posts) {
const post = props.posts[i] const post = props.posts[i]
if (post.password && post.password !== '') { if (post.password && post.password !== '') {
continue continue
} }
const blockMap = await getPostBlocks( post.blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
post.id,
'slug',
BLOG.POST_PREVIEW_LINES
)
if (blockMap) {
post.blockMap = blockMap
}
} }
} }

View File

@@ -3,18 +3,43 @@ import BlogPostListScroll from './components/BlogPostListScroll'
import BlogPostListPage from './components/BlogPostListPage' import BlogPostListPage from './components/BlogPostListPage'
import LayoutBase from './LayoutBase' import LayoutBase from './LayoutBase'
import TagItemMini from '../next/components/TagItemMini' import TagItemMini from '../next/components/TagItemMini'
import PaginationNumber from './PaginationNumber'
import BlogPostListEmpty from './BlogPostListEmpty'
export const LayoutTag = (props) => { export const LayoutTag = (props) => {
console.log(props)
const currentTag = props.tags.find((t) => { const currentTag = props.tags.find((t) => {
return t.name === props.tag return t.name === props.tag
}) })
const totalPage = Math.ceil(props.postCount / BLOG.POSTS_PER_PAGE)
const showPagination = props.postCount >= BLOG.POSTS_PER_PAGE
props.headerSlot = <div className="cursor-pointer px-5 py-1 mb-2 font-light hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform text-center dark:text-white">
<TagItemMini tag={currentTag}/>
</div>
// 空文章处理
if (!props.postToShow || props.postToShow.length === 0) {
return <LayoutBase {...props}> <BlogPostListEmpty/></LayoutBase>
}
const page = 1
return <LayoutBase {...props}> return <LayoutBase {...props}>
<div className="cursor-pointer px-5 py-1 mb-2 font-light hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform text-center dark:text-white"> <div className="cursor-pointer px-5 py-1 mb-2 font-light hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform text-center dark:text-white">
<TagItemMini tag={currentTag}/> <TagItemMini tag={currentTag}/>
</div> </div>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
{ props.postToShow && props.postToShow.length > 0
? (<>
{BLOG.POST_LIST_STYLE === 'page'
? (<div id="container" className='w-full'>
<BlogPostListPage {...props} />
{ showPagination && <PaginationNumber page={page} totalPage={totalPage} /> }
</div>)
: <BlogPostListScroll {...props} />}=
</>)
: (<BlogPostListEmpty/>)
}
</LayoutBase> </LayoutBase>
} }

View File

@@ -62,14 +62,12 @@ const PaginationNumber = ({ page, totalPage }) => {
function getPageElement(page, currentPage) { function getPageElement(page, currentPage) {
return ( return (
<Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref> <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
<a <a className={
className={
(page + '' === currentPage + '' (page + '' === currentPage + ''
? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white ' ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
: 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') + : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold' ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
} } >
>
{page} {page}
</a> </a>
</Link> </Link>