标题处理、标签页分页处理

2026-05-14 07:26:52 +00:00 · 2021-10-16 15:26:09 +08:00
parent bca507029c
commit 3d70843441
12 changed files with 205 additions and 209 deletions
--- 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 <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

  // 处理查询过滤 支持标签、关键词过滤
@@ -46,31 +40,32 @@ const BlogPostList = ({ page = 1, posts = [], tags }) => {
    showNext = page * BLOG.postsPerPage < totalPosts
  }

-  return <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
-    {(!page || page === 1) && (<div className='py-5' />)}
+  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'>
+      {(!page || page === 1) && (<div className='py-5' />)}

-    {(page && page !== 1) && (
-      <div className='pb-5'>
-        <div className='dark:text-gray-200 flex justify-between py-1'>
-          {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
+      {(page && page !== 1) && (
+        <div className='pb-5'>
+          <div className='dark:text-gray-200 flex justify-between py-1'>
+            {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
+          </div>
        </div>
-      </div>
-    )}
+      )}

-    <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>
+        {/* 文章列表 */}
+        <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>

-      <Pagination page={page} showNext={showNext} />
+        <Pagination page={page} showNext={showNext} />
+      </div>
    </div>
-  </main>
+  }
 }

 export default BlogPostList
--- a/components/BlogPostListEmpty.js
+++ b/components/BlogPostListEmpty.js
@@ -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
--- 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 <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
  )
 }
-
-/**
- * 博客列表滚动分页
- * @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
--- 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
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -33,20 +33,25 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
  }, [show])

  return (
-    <div
-      className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
-      <div
-        style={{ backgroundColor: 'rgb(56, 144, 255)' }}
-        className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
-        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-        {showPercent && (
-        <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'>
-          <span>{percent}%</span>
-        </div>
-        )}
-        <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 className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
+      <div className='flex-wrap'>
+        <div
+          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
+          <div
+            style={{ backgroundColor: 'rgb(56, 144, 255)' }}
+            className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+            {showPercent && (
+              <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'>
+                <span>{percent}%</span>
+              </div>
+            )}
+            <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>
--- 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)
--- 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 (
    <Container id='wrapper' meta={meta} tags={tags}>
      <TopNav tags={tags} />

+      {/* middle */}
      <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
-        {/* 侧边菜单 */}
        <SideBar />
-        <div className='flex-grow'>
+        <main className='flex-grow'>
          <TagsBar tags={tags} currentTag={currentTag} />
-          <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'>
+          <BlogPostListScrollPagination posts={posts} tags={tags} targetRef={targetRef} />
          <JumpToTop targetRef={targetRef} showPercent={false} />
-        </div>
+        </main>
      </div>

      <Footer />
--- a/layouts/PageLayout.js
+++ b/layouts/PageLayout.js
@@ -9,45 +9,31 @@ import SideBar from '@/components/SideBar'
 import TopNav from '@/components/TopNav'
 import BlogPostList from '@/components/BlogPostList'

-const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
-  const meta = {
-    title: BLOG.title,
-    type: 'website',
-    ...customMeta
-  }
+const PageLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
  const targetRef = useRef(null)

  return (
    <Container id='wrapper' meta={meta} tags={tags}>
      <TopNav tags={tags} />

+      {/* middle */}
      <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
-        {/* 侧边菜单 */}
        <SideBar />
-        <div className='flex-grow'>

+        <main className='flex-grow'>
          <TagsBar tags={tags} currentTag={currentTag} />
-
-          <BlogPostList posts={posts} tags={tags} page={page}/>
-
-        </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>
+          <BlogPostList posts={posts} tags={tags} page={page} />
+        </main>
+        <JumpToTop targetRef={targetRef} showPercent={false} />
      </div>

      <Footer />
    </Container>
  )
 }
-IndexLayout.propTypes = {
+PageLayout.propTypes = {
  posts: PropTypes.array.isRequired,
  tags: PropTypes.object.isRequired,
  currentTag: PropTypes.string
 }
-export default IndexLayout
+export default PageLayout
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -7,7 +7,7 @@ import Custom404 from '@/pages/404'

 const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
  if (!post) {
-    return <Custom404/>
+    return <Custom404 />
  }
  return (
    <ArticleLayout
@@ -22,11 +22,18 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
 }

 export async function getStaticPaths () {
-  let posts = await getAllPosts()
-  posts = posts.filter(post => post.status[0] === 'Published')
-  return {
-    paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
-    fallback: true
+  if (BLOg.isProd) {
+    let posts = await getAllPosts()
+    posts = posts.filter(post => post.status[0] === 'Published')
+    return {
+      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)
  if (!post) {
    return {
-      props: { },
+      props: {},
      revalidate: 1
    }
  }
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
 import { getAllPosts, getAllTags } from '@/lib/notion'
 import IndexLayout from '@/layouts/IndexLayout'
+import BLOG from '@/blog.config'

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

-const index = ({ posts, page, tags }) => {
+const index = ({ posts, page, tags, meta }) => {
  return (
-    <IndexLayout tags={tags} posts={posts} page={page} />
+    <IndexLayout tags={tags} posts={posts} page={page} meta={meta} />
  )
 }

--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -15,25 +15,12 @@ const Page = ({ posts, tags, page }) => {
      })
    }
  }
-
-  return <PageLayout tags={tags} posts={filteredBlogPosts} page={page} />
-}
-
-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
+  const meta = {
+    title: `${BLOG.title} | 博客列表`,
+    description: BLOG.description,
+    type: 'website'
  }
+  return <PageLayout tags={tags} posts={filteredBlogPosts} page={page} meta={meta} />
 }

 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
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -1,9 +1,14 @@
 import { getAllPosts, getAllTags } from '@/lib/notion'
-import IndexLayout from '@/layouts/IndexLayout'
 import BLOG from '@/blog.config'
+import PageLayout from '@/layouts/PageLayout'

 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 }) {