From 0cbeb1d0d284948aebcc5384beb7dad92ad6d55c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 4 Jan 2022 16:19:20 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=E6=95=B0=E5=AD=97?= =?UTF-8?q?=E5=88=86=E9=A1=B5=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 1 + components/ArticleDetail.js | 2 +- components/BlogPostListPage.js | 24 ++--- components/BlogPostListScroll.js | 2 +- components/PaginationNumber.js | 95 +++++++++++++++++++ .../{Pagination.js => PaginationSimple.js} | 6 +- pages/404.js | 4 +- pages/index.js | 7 +- pages/page/[page].js | 65 +++++++++++++ 9 files changed, 181 insertions(+), 25 deletions(-) create mode 100644 components/PaginationNumber.js rename components/{Pagination.js => PaginationSimple.js} (92%) create mode 100644 pages/page/[page].js diff --git a/blog.config.js b/blog.config.js index 525c00d5..4ca7fa62 100644 --- a/blog.config.js +++ b/blog.config.js @@ -20,6 +20,7 @@ const BLOG = { darkBackground: '#111827', // use hex value, don't forget '#' path: '', // leave this empty unless you want to deploy in a folder since: 2020, // if leave this empty, current year will be used. + postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载 postsPerPage: 6, // post counts per page sortByDate: false, autoCollapsedNavBar: true, // the automatically collapsed navigation bar diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js index fa6d3298..e8e75094 100644 --- a/components/ArticleDetail.js +++ b/components/ArticleDetail.js @@ -51,7 +51,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n const attachZoomRef = attachZoom return (<> -
+
diff --git a/components/BlogPostListPage.js b/components/BlogPostListPage.js index fe5fb6b0..d4217107 100644 --- a/components/BlogPostListPage.js +++ b/components/BlogPostListPage.js @@ -1,5 +1,5 @@ import BlogPostCard from '@/components/BlogPostCard' -import Pagination from '@/components/Pagination' +import PaginationNumber from './PaginationNumber' import BLOG from '@/blog.config' import { useRouter } from 'next/router' @@ -29,7 +29,7 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => { } // 处理分页 - const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage) + const totalPage = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage) const postsToShow = filteredBlogPosts.slice( BLOG.postsPerPage * (page - 1), BLOG.postsPerPage * page @@ -43,28 +43,18 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => { if (!postsToShow || postsToShow.length === 0) { return } else { - return
- {(!page || page === 1) && (
)} - - {(page && page !== 1) && ( -
-
- {page && page !== 1 && (页 {page} / {totalPages})} -
-
- )} - -
+ return ( +
{/* 文章列表 */} -
+
{postsToShow.map(post => ( ))}
- +
-
+ ) } } diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index f0305f53..ead487ca 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -53,7 +53,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory, if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return
{/* 文章列表 */}
diff --git a/components/PaginationNumber.js b/components/PaginationNumber.js new file mode 100644 index 00000000..d7f36f59 --- /dev/null +++ b/components/PaginationNumber.js @@ -0,0 +1,95 @@ +import BLOG from '@/blog.config' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons' + +/** + * 数字翻页插件 + * @param page 当前页码 + * @param showNext 是否有下一页 + * @returns {JSX.Element} + * @constructor + */ +const PaginationNumber = ({ page, showNext, totalPage }) => { + const router = useRouter() + const currentPage = +page + const pages = generatePages(page, currentPage, totalPage) + + return ( +
+ + {/* 上一页 */} + + + + + {pages} + + {/* 下一页 */} + + + +
+ ) +} + +function getPageElement (page, currentPage) { + console.log(page, currentPage) + return +
+ {page} +
+ +} +function generatePages (page, currentPage, totalPage) { + const pages = [] + const startPage = 1 // 分组开始页码 + const groupCount = 5 // 页码分组 + if (totalPage <= 10) { + for (let i = 1; i <= totalPage; i++) { + pages.push(getPageElement(i, page)) + } + } else { + pages.push(getPageElement(1, page)) + + let pageLength = 0 + if (groupCount + startPage > totalPage) { + pageLength = totalPage + } else { + pageLength = groupCount + startPage + } + + if (currentPage >= groupCount) { + pages.push(
...
) + } + + for (let i = startPage; i < pageLength; i++) { + if (i <= totalPage - 1 && i > 1) { + pages.push(getPageElement(i, page)) + } + } + + if (totalPage - startPage >= groupCount + 1) { + pages.push(
...
) + } + + pages.push(getPageElement(totalPage, page)) + } + return pages +} +export default PaginationNumber diff --git a/components/Pagination.js b/components/PaginationSimple.js similarity index 92% rename from components/Pagination.js rename to components/PaginationSimple.js index 6753987e..5a2b7064 100644 --- a/components/Pagination.js +++ b/components/PaginationSimple.js @@ -4,13 +4,13 @@ import { useRouter } from 'next/router' import { useGlobal } from '@/lib/global' /** - * 翻页插件 + * 简易翻页插件 * @param page 当前页码 * @param showNext 是否有下一页 * @returns {JSX.Element} * @constructor */ -const Pagination = ({ page, showNext }) => { +const PaginationSimple = ({ page, showNext }) => { const { locale } = useGlobal() const router = useRouter() const currentPage = +page @@ -39,4 +39,4 @@ const Pagination = ({ page, showNext }) => { ) } -export default Pagination +export default PaginationSimple diff --git a/pages/404.js b/pages/404.js index efad0005..df0f6ce7 100644 --- a/pages/404.js +++ b/pages/404.js @@ -16,12 +16,12 @@ export default function Custom404 () { // 延时3秒如果加载失败就返回首页 setTimeout(() => { if (window) { - const article = document.getElementById('article-wrapper') + const article = document.getElementById('container') if (!article) { router.push('/') } } - }, 3000) + }, 30000000) }) return diff --git a/pages/index.js b/pages/index.js index 0780e76a..8aef2625 100644 --- a/pages/index.js +++ b/pages/index.js @@ -4,6 +4,7 @@ import BaseLayout from '@/layouts/BaseLayout' import BlogPostListScroll from '@/components/BlogPostListScroll' import { getNotionPageData } from '@/lib/notion/getNotionData' import Header from '@/components/Header' +import BlogPostListPage from '@/components/BlogPostListPage' export async function getStaticProps () { const from = 'index' @@ -37,7 +38,11 @@ const Index = ({ allPosts, tags, meta, categories }) => { totalPosts={allPosts} categories={categories} > - + {BLOG.postListStyle !== 'page' + ? () + : () + } + ) } diff --git a/pages/page/[page].js b/pages/page/[page].js new file mode 100644 index 00000000..e7a86cb8 --- /dev/null +++ b/pages/page/[page].js @@ -0,0 +1,65 @@ +import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion' +import BLOG from '@/blog.config' +import BaseLayout from '@/layouts/BaseLayout' +import { getNotionPageData } from '@/lib/notion/getNotionData' +import Header from '@/components/Header' +import Custom404 from '../404' +import BlogPostListPage from '@/components/BlogPostListPage' + +const Page = ({ page, allPosts, tags, meta, categories }) => { + if (!meta || BLOG.postListStyle !== 'page') { + return + } + + return ( + } + meta={meta} + tags={tags} + totalPosts={allPosts} + categories={categories} + > + + + ) +} + +export async function getStaticPaths () { + const from = 'page' + const notionPageData = await getNotionPageData({ from }) + const allPosts = await getAllPosts({ notionPageData, from }) + const totalPages = Math.ceil(allPosts / BLOG.postsPerPage) + return { + // remove first page, we 're not gonna handle that. + paths: Array.from({ length: totalPages - 1 }, (_, i) => ({ + params: { page: '' + (i + 2) } + })), + fallback: true + } +} + +export async function getStaticProps ({ params: { page } }) { + const from = 'page' + const notionPageData = await getNotionPageData({ from }) + const allPosts = await getAllPosts({ notionPageData, from }) + const categories = await getAllCategories(allPosts) + const tagOptions = notionPageData.tagOptions + const tags = await getAllTags({ allPosts, tagOptions }) + const meta = { + title: `${BLOG.title}`, + description: BLOG.description, + type: 'website' + } + return { + props: { + page, + allPosts, + tags, + categories, + meta + }, + revalidate: 1 + } +} + +export default Page