From 3d7084344112e4c7e983211b4fa122867852ccee Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 16 Oct 2021 15:26:09 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=A4=84=E7=90=86=E3=80=81?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=88=86=E9=A1=B5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BlogPostList.js | 49 +++-- components/BlogPostListEmpty.js | 13 ++ ...on .js => BlogPostListScrollPagination.js} | 179 ++++++++---------- components/CommonHead.js | 1 - components/JumpToTop.js | 33 ++-- layouts/ArticleLayout.js | 1 + layouts/IndexLayout.js | 24 +-- layouts/PageLayout.js | 30 +-- pages/article/[slug].js | 21 +- pages/index.js | 14 +- pages/page/[page].js | 40 ++-- pages/tag/[tag].js | 9 +- 12 files changed, 205 insertions(+), 209 deletions(-) create mode 100644 components/BlogPostListEmpty.js rename components/{BlogPostListScrollPagination .js => BlogPostListScrollPagination.js} (54%) diff --git a/components/BlogPostList.js b/components/BlogPostList.js index 0d599954..04e6a824 100644 --- a/components/BlogPostList.js +++ b/components/BlogPostList.js @@ -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
-
-

No posts found.

-
-
- } let filteredBlogPosts = posts // 处理查询过滤 支持标签、关键词过滤 @@ -46,31 +40,32 @@ const BlogPostList = ({ page = 1, posts = [], tags }) => { showNext = page * BLOG.postsPerPage < totalPosts } - return
- {(!page || page === 1) && (
)} + if (!postsToShow || postsToShow.length === 0) { + return + } else { + return
+ {(!page || page === 1) && (
)} - {(page && page !== 1) && ( -
-
- {page && page !== 1 && (页 {page} / {totalPages})} + {(page && page !== 1) && ( +
+
+ {page && page !== 1 && (页 {page} / {totalPages})} +
-
- )} + )} -
- {/* 文章列表 */} -
- {!postsToShow.length && ( -

No posts found.

- )} - {postsToShow.map(post => ( - - ))} -
+
+ {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
- + +
-
+ } } export default BlogPostList diff --git a/components/BlogPostListEmpty.js b/components/BlogPostListEmpty.js new file mode 100644 index 00000000..1dfb71b4 --- /dev/null +++ b/components/BlogPostListEmpty.js @@ -0,0 +1,13 @@ +/** + * 空白博客 列表 + * @returns {JSX.Element} + * @constructor + */ +const BlogPostListEmpty = () => { + return
+
+

No posts found.

+
+
+} +export default BlogPostListEmpty diff --git a/components/BlogPostListScrollPagination .js b/components/BlogPostListScrollPagination.js similarity index 54% rename from components/BlogPostListScrollPagination .js rename to components/BlogPostListScrollPagination.js index 2da18c45..28369cfe 100644 --- a/components/BlogPostListScrollPagination .js +++ b/components/BlogPostListScrollPagination.js @@ -1,10 +1,91 @@ import BlogPost from '@/components/BlogPost' -import Pagination from '@/components/Pagination' import BLOG from '@/blog.config' import { useRouter } from 'next/router' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' 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 + } else { + return
+
+ {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
+ +
+ {hasMore + ? (
加载更多
) + : ( +
加载完了😰
+ )} + +
+
+
+ } +} /** * 获取指定页码的文章 @@ -19,98 +100,4 @@ const getPostByPage = function (page, totalPosts, postsPerPage) { postsPerPage * page ) } - -/** - * 博客列表滚动分页 - * @param posts 所有文章 - * @param tags 所有标签 - * @returns {JSX.Element} - * @constructor - */ -const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => { - if (!posts) { - return
-
-

No posts found.

-
-
- } - 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
-
- {/* 文章列表 */} -
- {!postsToShow.length && ( -

No posts found.

- )} - {postsToShow.map(post => ( - - ))} -
- -
- {showNext - ? (
加载更多
) - : ( -
加载完了😰
- )} - -
-
-
-} - export default BlogPostListScrollPagination diff --git a/components/CommonHead.js b/components/CommonHead.js index 67c4fde0..17f6ad8a 100644 --- a/components/CommonHead.js +++ b/components/CommonHead.js @@ -1,6 +1,5 @@ import BLOG from '@/blog.config' import Head from 'next/head' -import ThirdPartyScript from '@/components/ThirdPartyScript' const CommonHead = ({ meta }) => { const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link diff --git a/components/JumpToTop.js b/components/JumpToTop.js index 4ead6b10..98c5142b 100644 --- a/components/JumpToTop.js +++ b/components/JumpToTop.js @@ -33,20 +33,25 @@ const JumpToTop = ({ targetRef, showPercent = true }) => { }, [show]) return ( -
-
window.scrollTo({ top: 0, behavior: 'smooth' })}> - {showPercent && ( -
- {percent}% -
- )} -
- + diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js index 51ec17b7..b0f96f6e 100644 --- a/layouts/ArticleLayout.js +++ b/layouts/ArticleLayout.js @@ -34,6 +34,7 @@ const ArticleLayout = ({ }) => { const meta = { title: post.title, + description: post.summary, type: 'article' } const targetRef = useRef(null) diff --git a/layouts/IndexLayout.js b/layouts/IndexLayout.js index 668718ba..ef1163a2 100644 --- a/layouts/IndexLayout.js +++ b/layouts/IndexLayout.js @@ -7,35 +7,23 @@ import Container from '@/components/Container' import JumpToTop from '@/components/JumpToTop' import SideBar from '@/components/SideBar' import TopNav from '@/components/TopNav' -import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination ' - -const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => { - const meta = { - title: `${BLOG.title} | 首页`, - type: 'website', - ...customMeta - } +import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination' +const IndexLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => { const targetRef = useRef(null) return ( + {/* middle */}
- {/* 侧边菜单 */} -
+
- -
-
- - {/* 下方菜单组 */} -
-
+ -
+