feature:

封装useGlobal组件，存放全局变量；新增search页面，修复搜索页无法分页的bug
2026-05-18 23:16:49 +00:00 · 2021-11-04 13:28:08 +08:00
parent 8f9d3c45e7
commit 4b53a3612c
21 changed files with 214 additions and 169 deletions
--- a/components/BlogPostListEmpty.js
+++ b/components/BlogPostListEmpty.js
@@ -10,7 +10,9 @@ const BlogPostListEmpty = () => {
  const router = useRouter()
  useEffect(() => {
    setTimeout(() => {
-      router.push('/')
+      router.push('/').then(() => {
+        console.log('空博客列表跳回首页')
+      })
    }, 3000)
  })
  return <div className='w-full h-full flex justify-center mx-auto'>
--- a/components/BlogPostListPage.js
+++ b/components/BlogPostListPage.js
@@ -13,7 +13,7 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
 * @returns {JSX.Element}
 * @constructor
 */
-const BlogPostList = ({ page = 1, posts = [], tags }) => {
+const BlogPostListPage = ({ page = 1, posts = [], tags }) => {
  let filteredBlogPosts = posts

  // 处理查询过滤 支持标签、关键词过滤
@@ -68,4 +68,4 @@ const BlogPostList = ({ page = 1, posts = [], tags }) => {
  }
 }

-export default BlogPostList
+export default BlogPostListPage
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -1,7 +1,6 @@
 import BlogPost from '@/components/BlogPost'
 import BLOG from '@/blog.config'

-import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import BlogPostListEmpty from '@/components/BlogPostListEmpty'
@@ -14,34 +13,20 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
 * @returns {JSX.Element}
 * @constructor
 */
-const BlogPostListScroll = ({ posts = [], tags }) => {
-  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 BlogPostListScroll = ({ posts = [], tags, currentSearch }) => {
+  const postsPerPage = BLOG.postsPerPage
  const [page, updatePage] = useState(1)
-  const initPosts = getPostByPage(page, filteredBlogPosts, BLOG.postsPerPage)
-  const [postsToShow, updatePostToShow] = useState(useRef(initPosts).current)
+  const postsToShow = getPostByPage(page, posts, postsPerPage)

  let hasMore = false
-  if (filteredBlogPosts) {
-    const totalPosts = filteredBlogPosts.length
-    hasMore = page * BLOG.postsPerPage < totalPosts
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * postsPerPage < totalCount
  }
-  const handleGetMore = function () {
+
+  const handleGetMore = () => {
    if (!hasMore) return
    updatePage(page + 1)
-    updatePostToShow(postsToShow.concat(getPostByPage(page + 1, filteredBlogPosts, BLOG.postsPerPage)))
  }

  // 监听滚动自动分页加载
@@ -67,7 +52,6 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
    return <BlogPostListEmpty />
  } else {
    return <div id='post-list-wrapper' className='mt-28 md:mt-32 mx-2 md:mx-20' ref={targetRef}>
-      <div>
        {/* 文章列表 */}
        <div className='grid 3xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
          {postsToShow.map(post => (
@@ -76,16 +60,16 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
        </div>

        <div className='flex'>
-          <div className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
-               onClick={handleGetMore}> {hasMore ? '继续加载' : '加载完了😰'} </div>
+          <div onClick={() => { handleGetMore() }}
+               className='w-full my-4 py-4 bg-gray-300 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
+               > {hasMore ? '继续加载' : '加载完了😰'} </div>
        </div>
-      </div>
    </div>
  }
 }

 /**
- * 获取指定页码的文章
+ * 获取从第1页到指定页码的文章
 * @param page 第几页
 * @param totalPosts 所有文章
 * @param postsPerPage 每页文章数量
@@ -93,7 +77,7 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
 */
 const getPostByPage = function (page, totalPosts, postsPerPage) {
  return totalPosts.slice(
-    postsPerPage * (page - 1),
+    0,
    postsPerPage * page
  )
 }
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -1,8 +1,7 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { useTheme } from '@/lib/theme'
-import { useEffect, useState } from 'react'
+import { useGlobal } from '@/lib/global'

 const GitalkComponent = dynamic(
  () => {
@@ -25,7 +24,7 @@ const CusdisComponent = dynamic(

 const Comment = ({ frontMatter }) => {
  const router = useRouter()
-  const { theme } = useTheme()
+  const { theme } = useGlobal()

  return <div className='comment text-gray-800 dark:text-gray-300'>
    <div className='font-bold pt-2 pb-4 '>留下评论</div>
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -2,10 +2,15 @@ import BLOG from '@/blog.config'
 import Head from 'next/head'

 const CommonHead = ({ meta }) => {
-  const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
-
+  let url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
+  if (meta) {
+    url = `${url}/${meta.slug}`
+  }
+  const title = meta?.title || BLOG.title
+  const description = meta?.description || BLOG.description
+  const type = meta?.type || 'website'
  return <Head>
-    <title>{meta.title}</title>
+    <title>{title}</title>
    <meta content={BLOG.darkBackground} name='theme-color' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name='robots' content='follow, index' />
@@ -19,18 +24,16 @@ const CommonHead = ({ meta }) => {
    {BLOG.seo.keywords && (
      <meta name='keywords' content={BLOG.seo.keywords.join(', ')} />
    )}
-    <meta name='description' content={meta.description} />
+    <meta name='description' content={description} />
    <meta property='og:locale' content={BLOG.lang} />
-    <meta property='og:title' content={meta.title} />
-    <meta property='og:description' content={meta.description} />
-    <meta
-      property='og:url'
-      content={meta.slug ? `${url}/${meta.slug}` : url}
+    <meta property='og:title' content={title} />
+    <meta property='og:description' content={description} />
+    <meta property='og:url' content={url}
    />
-    <meta property='og:type' content={meta.type} />
+    <meta property='og:type' content={type} />
    <meta name='twitter:card' content='summary_large_image' />
-    <meta name='twitter:description' content={meta.description} />
-    <meta name='twitter:title' content={meta.title} />
+    <meta name='twitter:description' content={description} />
+    <meta name='twitter:title' content={title} />
    {meta.type === 'article' && (
      <>
        <meta
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -1,7 +1,7 @@
-import { loadUserThemeFromCookies, saveTheme, useTheme } from '@/lib/theme'
+import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global'

 const DarkModeButton = () => {
-  const { changeTheme } = useTheme()
+  const { changeTheme } = useGlobal()
  const userTheme = loadUserThemeFromCookies()
  // 用户手动设置主题
  const handleChangeDarkMode = () => {
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import throttle from 'lodash.throttle'
-import { useLocale } from '@/lib/locale'
+import { useGlobal } from '@/lib/global'

 /**
 * 跳转到网页顶部
@@ -11,7 +11,7 @@ import { useLocale } from '@/lib/locale'
 * @constructor
 */
 const JumpToTop = ({ targetRef, showPercent = true }) => {
-  const locale = useLocale()
+  const { locale } = useGlobal()
  const [show, switchShow] = useState(false)
  const [percent, changePercent] = useState(0)
  const scrollListener = useCallback(throttle(() => {
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { useLocale } from '@/lib/locale'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'

 const MenuButtonGroup = ({ allowCollapse = false }) => {
-  const locale = useLocale()
+  const { locale } = useGlobal()
  const router = useRouter()
  const links = [
    { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
-import { useLocale } from '@/lib/locale'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'

 /**
 * 翻页插件
@@ -11,7 +11,7 @@ import { useRouter } from 'next/router'
 * @constructor
 */
 const Pagination = ({ page, showNext }) => {
-  const locale = useLocale()
+  const { locale } = useGlobal()
  const router = useRouter()
  const currentPage = +page
  return (
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -1,19 +1,17 @@
-import React, { useState } from 'react'
-import { useLocale } from '@/lib/locale'
 import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import { useState } from 'react'

-const SearchInput = ({ currentTag }) => {
-  const locale = useLocale()
+const SearchInput = ({ currentTag, currentSearch }) => {
+  const { locale } = useGlobal()
+  const [searchKey, setSearchKey] = useState(currentSearch)
  const router = useRouter()
-  const [searchValue, setSearchValue] = useState('')
  const handleSearch = () => {
-    if (searchValue && searchValue !== '') {
-      router.push({ pathname: '/', query: { s: searchValue } }).then(r => {
-        router.reload()
+    if (searchKey && searchKey !== '') {
+      router.push({ pathname: '/search', query: { s: searchKey } }).then(r => {
      })
    } else {
      router.push({ pathname: '/' }).then(r => {
-        router.reload()
      })
    }
  }
@@ -29,8 +27,8 @@ const SearchInput = ({ currentTag }) => {
      placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
      className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
      onKeyUp={handleKeyUp}
-      onChange={e => setSearchValue(e.target.value)}
-      defaultValue={router.query.s ?? ''}
+      onChange={e => setSearchKey(e.target.value)}
+      defaultValue={currentSearch}
    />
    <div className='py-3 px-5 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
         onClick={handleSearch}>
--- a/components/TagItem.js
+++ b/components/TagItem.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 const TagItem = ({ tag }) => (
  <Link href={`/tag/${encodeURIComponent(tag)}`}>
    <a>
-      <p className="hover:shadow hover:border-gray-600 rounded-lg dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
+      <p className="hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
      dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
        {tag}
      </p>
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,13 +1,11 @@
-import Link from 'next/link'
-import BLOG from '@/blog.config'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import DarkModeButton from '@/components/DarkModeButton'
 import SearchInput from '@/components/SearchInput'
 import Drawer from '@/components/Drawer'
 import DrawerRight from '@/components/DrawerRight'
 import Logo from '@/components/Logo'

-const TopNav = ({ tags, currentTag, post, posts }) => {
+const TopNav = ({ tags, currentTag, post, posts, currentSearch }) => {
  const drawer = useRef()
  const drawerRight = useRef()

@@ -31,7 +29,7 @@ const TopNav = ({ tags, currentTag, post, posts }) => {

        {/* 中间搜索框 */}
        <div className='hidden sm:block w-96'>
-          <SearchInput currentTag={currentTag} />
+          <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
        </div>

        {/* 右侧功能 */}