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

13
components/BlogPostListEmpty.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* 空白博客 列表
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListEmpty = () => {
return <div className='w-full h-full flex justify-center mx-auto'>
<div className='align-middle text-center my-auto'>
<p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
</div>
</div>
}
export default BlogPostListEmpty

179
components/BlogPostListScrollPagination .js → components/BlogPostListScrollPagination.js
View File

@@ -1,10 +1,91 @@
import BlogPost from '@/components/BlogPost' import BlogPost from '@/components/BlogPost'
import Pagination from '@/components/Pagination'
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle' import throttle from 'lodash.throttle'
import BlogPostListEmpty from '@/components/BlogPostListEmpty'
/**
* 博客列表滚动分页
* @param posts 所有文章
* @param tags 所有标签
* @param targetRef 指向父容器，用于计算下拉滚动的高度
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
let filteredBlogPosts = posts
// 处理查询过滤 支持标签、关键词过滤
let currentSearch = ''
const router = useRouter()
if (router.query && router.query.s) {
currentSearch = router.query.s
filteredBlogPosts = posts.filter(post => {
const tagContent = post.tags ? post.tags.join(' ') : ''
const searchContent = post.title + post.summary + tagContent + post.slug
return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
})
}
const [page, updatePage] = useState(1)
const initPosts = getPostByPage(page, filteredBlogPosts, BLOG.postsPerPage)
const [postsToShow, updatePostToShow] = useState(useRef(initPosts).current)
let hasMore = false
if (filteredBlogPosts) {
const totalPosts = filteredBlogPosts.length
hasMore = page * BLOG.postsPerPage < totalPosts
}
const handleGetMore = function () {
if (!hasMore) return
updatePage(page + 1)
updatePostToShow(postsToShow.concat(getPostByPage(page + 1, filteredBlogPosts, BLOG.postsPerPage)))
}
// 监听滚动自动分页加载
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY + window.outerHeight
const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
if (scrollS > clientHeight + 10) {
handleGetMore()
}
}, 500))
// 监听滚动
useEffect(() => {
window.addEventListener('scroll', scrollTrigger)
return () => {
window.removeEventListener('scroll', scrollTrigger)
}
})
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'>
<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>
<div className='flex'>
{hasMore
? (<div className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer'
onClick={handleGetMore}> 加载更多 </div>)
: (
<div className='w-full my-4 py-4 bg-gray-200 text-center'> 加载完了😰 </div>
)}
</div>
</div>
</div>
}
}
/** /**
* 获取指定页码的文章 * 获取指定页码的文章
@@ -19,98 +100,4 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
postsPerPage * page postsPerPage * page
) )
} }
/**
* 博客列表滚动分页
* @param posts 所有文章
* @param tags 所有标签
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
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
// 处理查询过滤 支持标签、关键词过滤
let currentSearch = ''
const router = useRouter()
if (router.query && router.query.s) {
currentSearch = router.query.s
filteredBlogPosts = posts.filter(post => {
const tagContent = post.tags ? post.tags.join(' ') : ''
const searchContent = post.title + post.summary + tagContent + post.slug
return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
})
}
const [page, updatePage] = useState(1)
const [postsToShow, updatePostToShow] = useState(getPostByPage(page, filteredBlogPosts, BLOG.postsPerPage))
let showNext = false
if (filteredBlogPosts) {
const totalPosts = filteredBlogPosts.length
showNext = page * BLOG.postsPerPage < totalPosts
}
const [loading, updateLoading] = useState(false)
const handleGetMore = function () {
if (!showNext) {
// 完了
return
}
if (loading) {
// 加载中
return
}
updateLoading(true)
updatePage(page + 1)
updatePostToShow(postsToShow.concat(getPostByPage(page + 1, filteredBlogPosts, BLOG.postsPerPage)))
updateLoading(false)
}
// 监听滚动自动分页加载
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY + window.outerHeight
const clientHeight = targetRef ? (targetRef.current.clientHeight) : 0
if (scrollS > clientHeight + 10) {
handleGetMore()
}
}, 500))
// 监听滚动
useEffect(() => {
window.addEventListener('scroll', scrollTrigger)
return () => {
window.removeEventListener('scroll', scrollTrigger)
}
})
return <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
<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 className='flex'>
{showNext
? (<div className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer' onClick={ handleGetMore}> 加载更多 </div>)
: (
<div className='w-full my-4 py-4 bg-gray-200 text-center' > 加载完了😰 </div>
)}
</div>
</div>
</main>
}
export default BlogPostListScrollPagination export default BlogPostListScrollPagination

1
components/CommonHead.js
View File

@@ -1,6 +1,5 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import Head from 'next/head' import Head from 'next/head'
import ThirdPartyScript from '@/components/ThirdPartyScript'
const CommonHead = ({ meta }) => { const CommonHead = ({ meta }) => {
const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link

33
components/JumpToTop.js
View File

@@ -33,20 +33,25 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
}, [show]) }, [show])
return ( return (
<div <div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' rounded-full animate__animated animate__faster shadow-xl'}> <div className='flex-wrap'>
<div <div
style={{ backgroundColor: 'rgb(56, 144, 255)' }} className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' rounded-full animate__animated animate__faster shadow-xl'}>
className='rounded-full dark:bg-gray-600 bg-white cursor-pointer ' <div
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}> style={{ backgroundColor: 'rgb(56, 144, 255)' }}
{showPercent && ( className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
<div style={{ backgroundColor: 'rgb(56, 144, 255)' }} className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'> onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
<span>{percent}%</span> {showPercent && (
</div> <div style={{ backgroundColor: 'rgb(56, 144, 255)' }}
)} className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
<div className='text-2xl'> <span>{percent}%</span>
<a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 ' </div>
title={locale.POST.TOP} /> )}
<div className='text-2xl'>
<a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 '
title={locale.POST.TOP} />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

1
layouts/ArticleLayout.js
View File

@@ -34,6 +34,7 @@ const ArticleLayout = ({
}) => { }) => {
const meta = { const meta = {
title: post.title, title: post.title,
description: post.summary,
type: 'article' type: 'article'
} }
const targetRef = useRef(null) const targetRef = useRef(null)

24
layouts/IndexLayout.js
View File

@@ -7,35 +7,23 @@ import Container from '@/components/Container'
import JumpToTop from '@/components/JumpToTop' import JumpToTop from '@/components/JumpToTop'
import SideBar from '@/components/SideBar' import SideBar from '@/components/SideBar'
import TopNav from '@/components/TopNav' import TopNav from '@/components/TopNav'
import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination ' import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination'
const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
const meta = {
title: `${BLOG.title} | 首页`,
type: 'website',
...customMeta
}
const IndexLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
const targetRef = useRef(null) const targetRef = useRef(null)
return ( return (
<Container id='wrapper' meta={meta} tags={tags}> <Container id='wrapper' meta={meta} tags={tags}>
<TopNav tags={tags} /> <TopNav tags={tags} />
{/* middle */}
<div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}> <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBar /> <SideBar />
<div className='flex-grow'> <main className='flex-grow'>
<TagsBar tags={tags} currentTag={currentTag} /> <TagsBar tags={tags} currentTag={currentTag} />
<BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef}/> <BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef} />
</div>
</div>
{/* 下方菜单组 */}
<div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
<div className='flex-wrap'>
<JumpToTop targetRef={targetRef} showPercent={false} /> <JumpToTop targetRef={targetRef} showPercent={false} />
</div> </main>
</div> </div>
<Footer /> <Footer />

30
layouts/PageLayout.js
View File

@@ -9,45 +9,31 @@ import SideBar from '@/components/SideBar'
import TopNav from '@/components/TopNav' import TopNav from '@/components/TopNav'
import BlogPostList from '@/components/BlogPostList' import BlogPostList from '@/components/BlogPostList'
const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => { const PageLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
const meta = {
title: BLOG.title,
type: 'website',
...customMeta
}
const targetRef = useRef(null) const targetRef = useRef(null)
return ( return (
<Container id='wrapper' meta={meta} tags={tags}> <Container id='wrapper' meta={meta} tags={tags}>
<TopNav tags={tags} /> <TopNav tags={tags} />
{/* middle */}
<div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}> <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBar /> <SideBar />
<div className='flex-grow'>
<main className='flex-grow'>
<TagsBar tags={tags} currentTag={currentTag} /> <TagsBar tags={tags} currentTag={currentTag} />
<BlogPostList posts={posts} tags={tags} page={page} />
<BlogPostList posts={posts} tags={tags} page={page}/> </main>
<JumpToTop targetRef={targetRef} showPercent={false} />
</div>
</div>
{/* 下方菜单组 */}
<div
className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
<div className='flex-wrap'>
<JumpToTop targetRef={targetRef} showPercent={false} />
</div>
</div> </div>
<Footer /> <Footer />
</Container> </Container>
) )
} }
IndexLayout.propTypes = { PageLayout.propTypes = {
posts: PropTypes.array.isRequired, posts: PropTypes.array.isRequired,
tags: PropTypes.object.isRequired, tags: PropTypes.object.isRequired,
currentTag: PropTypes.string currentTag: PropTypes.string
} }
export default IndexLayout export default PageLayout

21
pages/article/[slug].js
View File

@@ -7,7 +7,7 @@ import Custom404 from '@/pages/404'
const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => { const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
if (!post) { if (!post) {
return <Custom404/> return <Custom404 />
} }
return ( return (
<ArticleLayout <ArticleLayout
@@ -22,11 +22,18 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
} }
export async function getStaticPaths () { export async function getStaticPaths () {
let posts = await getAllPosts() if (BLOg.isProd) {
posts = posts.filter(post => post.status[0] === 'Published') let posts = await getAllPosts()
return { posts = posts.filter(post => post.status[0] === 'Published')
paths: posts.map(row => `${BLOG.path}/article/${row.slug}`), return {
fallback: true paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
fallback: true
}
} else {
return {
paths: [],
fallback: true
}
} }
} }
@@ -36,7 +43,7 @@ export async function getStaticProps ({ params: { slug } }) {
const post = posts.find(t => t.slug === slug) const post = posts.find(t => t.slug === slug)
if (!post) { if (!post) {
return { return {
props: { }, props: {},
revalidate: 1 revalidate: 1
} }
} }

14
pages/index.js
View File

@@ -1,5 +1,6 @@
import { getAllPosts, getAllTags } from '@/lib/notion' import { getAllPosts, getAllTags } from '@/lib/notion'
import IndexLayout from '@/layouts/IndexLayout' import IndexLayout from '@/layouts/IndexLayout'
import BLOG from '@/blog.config'
export async function getStaticProps () { export async function getStaticProps () {
let posts = await getAllPosts() let posts = await getAllPosts()
@@ -7,20 +8,25 @@ export async function getStaticProps () {
post => post.status[0] === 'Published' && post.type[0] === 'Post' post => post.status[0] === 'Published' && post.type[0] === 'Post'
) )
const tags = await getAllTags(posts) const tags = await getAllTags(posts)
const meta = {
title: `${BLOG.title} | 首页`,
description: BLOG.description,
type: 'website'
}
return { return {
props: { props: {
page: 1, // current page is 1 page: 1, // current page is 1
posts, posts,
tags tags,
meta
}, },
revalidate: 1 revalidate: 1
} }
} }
const index = ({ posts, page, tags }) => { const index = ({ posts, page, tags, meta }) => {
return ( return (
<IndexLayout tags={tags} posts={posts} page={page} /> <IndexLayout tags={tags} posts={posts} page={page} meta={meta} />
) )
} }

40
pages/page/[page].js
View File

@@ -15,25 +15,12 @@ const Page = ({ posts, tags, page }) => {
}) })
} }
} }
const meta = {
return <PageLayout tags={tags} posts={filteredBlogPosts} page={page} /> title: `${BLOG.title} | 博客列表`,
} description: BLOG.description,
type: 'website'
export async function getStaticProps (context) {
const { page } = context.params // Get Current Page No.
let posts = await getAllPosts()
posts = posts.filter(
post => post.status[0] === 'Published' && post.type[0] === 'Post'
)
const tags = await getAllTags(posts)
return {
props: {
tags,
posts,
page
},
revalidate: 1
} }
return <PageLayout tags={tags} posts={filteredBlogPosts} page={page} meta={meta} />
} }
export async function getStaticPaths () { export async function getStaticPaths () {
@@ -60,4 +47,21 @@ export async function getStaticPaths () {
} }
} }
export async function getStaticProps (context) {
const { page } = context.params // Get Current Page No.
let posts = await getAllPosts()
posts = posts.filter(
post => post.status[0] === 'Published' && post.type[0] === 'Post'
)
const tags = await getAllTags(posts)
return {
props: {
tags,
posts,
page
},
revalidate: 1
}
}
export default Page export default Page

9
pages/tag/[tag].js
View File

@@ -1,9 +1,14 @@
import { getAllPosts, getAllTags } from '@/lib/notion' import { getAllPosts, getAllTags } from '@/lib/notion'
import IndexLayout from '@/layouts/IndexLayout'
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import PageLayout from '@/layouts/PageLayout'
export default function Tag ({ tags, posts, currentTag }) { export default function Tag ({ tags, posts, currentTag }) {
return <IndexLayout tags={tags} posts={posts} currentTag={currentTag} /> const meta = {
title: `${BLOG.title} | ${currentTag}`,
description: BLOG.description,
type: 'website'
}
return <PageLayout tags={tags} posts={posts} currentTag={currentTag} meta={meta} />
} }
export async function getStaticProps ({ params }) { export async function getStaticProps ({ params }) {