feature:

封装useGlobal组件，存放全局变量；
新增search页面，修复搜索页无法分页的bug

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'>

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

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

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>

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

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 = () => {

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(() => {

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 },

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 (

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

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>

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>
 
         {/* 右侧功能 */}

layouts/BaseLayout.js

@@ -3,13 +3,13 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import CommonHead from '@/components/CommonHead'
 import throttle from 'lodash.throttle'
 import BLOG from '@/blog.config'
-import { useTheme } from '@/lib/theme'
 import TopNav from '@/components/TopNav'
 import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
 import JumpToTop from '@/components/JumpToTop'
+import { useGlobal } from '@/lib/global'
 
-const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, posts, ...customMeta }) => {
+const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, totalPosts, currentSearch, ...customMeta }) => {
   let windowTop = 0
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -30,17 +30,17 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, posts, ...c
       window.removeEventListener('scroll', scrollTrigger)
     }
   })
-  const { theme } = useTheme()
+  const { theme } = useGlobal()
   const targetRef = useRef(null)
 
   return (
     <div id='wrapper' className={[BLOG.font, theme].join(' ')}>
       <CommonHead meta={meta} />
 
-      <TopNav tags={tags} post={post} posts={posts} />
+      <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} />
       {/* Middle Wrapper */}
       <main className='flex dark:bg-black'>
-        <SideBar tags={tags} post={post} posts={posts} />
+        <SideBar tags={tags} post={post} posts={totalPosts} />
         <div className='flex flex-grow' ref={targetRef}>
             {children}
         </div>

lib/global.js

@@ -0,0 +1,84 @@
+import BLOG from '@/blog.config'
+import lang from './lang'
+import { useContext, createContext, useState, useEffect } from 'react'
+import cookie from 'react-cookies'
+
+const GlobalContext = createContext()
+
+/**
+ * 全局变量Provider，包括语言本地化、样式主题、搜索词
+ * @param children
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export function GlobalContextProvider ({ children }) {
+  const locale = getCurrentLocale()
+  const [theme, changeTheme] = useState(loadUserThemeFromCookies())
+  useEffect(() => { initTheme(theme, changeTheme) })
+
+  return (
+    <GlobalContext.Provider value={{ locale, theme, changeTheme }}>{children}</GlobalContext.Provider>
+  )
+}
+
+/**
+ * 获取当前语言字典
+ * @returns 不同语言对应字典
+ */
+const getCurrentLocale = () => {
+  if (BLOG.lang.slice(0, 2).toLowerCase() === 'zh') {
+    switch (BLOG.lang.toLowerCase()) {
+      case 'zh-cn':
+      case 'zh-sg':
+        return lang['zh-CN']
+      case 'zh-hk':
+        return lang['zh-HK']
+      case 'zh-tw':
+        return lang['zh-TW']
+      default:
+        return lang['zh-TW']
+    }
+  } else {
+    return lang.en
+  }
+}
+
+/**
+ * 初始化主题
+ * @param theme 用户默认主题state
+ * @param changeTheme 更改主题ChangeState函数
+ * @description 主题样式相关 由于Server采用服务端静态渲染，无法获取前端Cookie配置，故在渲染hooks中做初始化主题
+ */
+const initTheme = (theme, changeTheme) => {
+  if (!theme) {
+    const date = new Date()
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
+    if (useDark) {
+      changeTheme('dark')
+      saveTheme('dark')
+    }
+  }
+  const baseLayoutClass = document.getElementById('wrapper').classList
+  if (!baseLayoutClass.contains(theme)) {
+    baseLayoutClass.add(theme)
+  }
+}
+
+/**
+ * 读取默认主题
+ * @returns {*}
+ */
+export const loadUserThemeFromCookies = () => {
+  return cookie.load('theme')
+}
+
+/**
+ * 保存默认主题
+ * @param newTheme
+ */
+export const saveTheme = (newTheme) => {
+  cookie.save('theme', newTheme, { path: '/' })
+}
+
+export const useGlobal = () => useContext(GlobalContext)

lib/locale.js

@@ -1,34 +0,0 @@
-import BLOG from '@/blog.config'
-import lang from './lang'
-import { useContext, createContext } from 'react'
-
-let locale = {}
-if (BLOG.lang.slice(0, 2).toLowerCase() === 'zh') {
-  switch (BLOG.lang.toLowerCase()) {
-    case 'zh-cn':
-    case 'zh-sg':
-      locale = lang['zh-CN']
-      break
-    case 'zh-hk':
-      locale = lang['zh-HK']
-      break
-    case 'zh-tw':
-      locale = lang['zh-TW']
-      break
-    default:
-      locale = lang['zh-TW']
-      break
-  }
-} else {
-  locale = lang.en
-}
-
-const LocaleContext = createContext()
-
-export function LocaleProvider({ children }) {
-  return (
-    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
-  )
-}
-
-export const useLocale = () => useContext(LocaleContext)

lib/theme.js

@@ -1,47 +0,0 @@
-import { useContext, createContext, useState, useEffect, useRef } from 'react'
-import cookie from 'react-cookies'
-
-const ThemeContext = createContext()
-
-/**
- * 提供日间模式、夜间模式主题的切换 light/dark
- * @param children
- * @returns {JSX.Element}
- * @constructor
- */
-export function ThemeProvider ({ children }) {
-  const [theme, changeTheme] = useState(loadUserThemeFromCookies())
-
-  // 由于Server采用服务端静态渲染，无法获取前端Cookie配置，故在渲染hooks中做初始化主题
-  useEffect(() => {
-    // 若用户当前会话无指定主题，将根据深色偏好及访问时间决定默认主题
-    if (!theme) {
-      const date = new Date()
-      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-      const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
-      if (useDark) {
-        changeTheme('dark')
-        saveTheme('dark')
-      }
-    }
-
-    const baseLayoutClass = document.getElementById('wrapper').classList
-    if (!baseLayoutClass.contains(theme)) {
-      baseLayoutClass.add(theme)
-    }
-  })
-
-  return (
-    <ThemeContext.Provider value={{ theme, changeTheme }}>{children}</ThemeContext.Provider>
-  )
-}
-
-export const loadUserThemeFromCookies = () => {
-  return cookie.load('theme')
-}
-
-export const saveTheme = (newTheme) => {
-  cookie.save('theme', newTheme, { path: '/' })
-}
-
-export const useTheme = () => useContext(ThemeContext)

pages/_app.js

@@ -7,16 +7,14 @@ import 'font-awesome/css/font-awesome.min.css'
 
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
-import { LocaleProvider } from '@/lib/locale'
-import { ThemeProvider } from '@/lib/theme'
+import { GlobalContextProvider } from '@/lib/global'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 
 const MyApp = ({ Component, pageProps }) => {
   return (
-    <LocaleProvider>
-      <ThemeProvider>
+    <GlobalContextProvider>
         {BLOG.isProd && BLOG?.analytics?.provider === 'ackee' && (
           <Ackee
             ackeeServerUrl={BLOG.analytics.ackeeConfig.dataAckeeServer}
@@ -25,8 +23,7 @@ const MyApp = ({ Component, pageProps }) => {
         )}
         {BLOG.isProd && BLOG?.analytics?.provider === 'ga' && <Gtag />}
         <Component {...pageProps} />
-      </ThemeProvider>
-    </LocaleProvider>
+    </GlobalContextProvider>
   )
 }
 

pages/article/[slug].js

@@ -39,7 +39,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next, posts }) => {
   const targetRef = useRef(null)
   const url = BLOG.link + useRouter().asPath
 
-  return <BaseLayout meta={meta} tags={tags} post={post} posts={posts}>
+  return <BaseLayout meta={meta} tags={tags} totalPosts={post} posts={posts}>
     {/* 阅读进度条 */}
     <Progress targetRef={targetRef} />
 
@@ -61,8 +61,12 @@ const BlogPost = ({ post, blockMap, tags, prev, next, posts }) => {
           {post.title}
         </h1>
 
+        <h2 className='text-gray-500 my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
+          {post.summary}
+        </h2>
+
         {/* 文章信息 */}
-        <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-700 dark:text-white'>
+        <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-800 dark:text-white'>
           <div className='flex-nowrap flex'>
 
             {post.slug !== 'about' && (<>

pages/index.js

@@ -27,7 +27,7 @@ export async function getStaticProps () {
 
 const Index = ({ posts, tags, meta }) => {
   return (
-    <BaseLayout meta={meta} tags={tags} posts={posts}>
+    <BaseLayout meta={meta} tags={tags} totalPosts={posts}>
       <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
         <TagsBar tags={tags} />
         <BlogPostListScroll posts={posts} tags={tags} />

pages/search.js

@@ -0,0 +1,57 @@
+import { getAllPosts, getAllTags } from '@/lib/notion'
+import BLOG from '@/blog.config'
+import BaseLayout from '@/layouts/BaseLayout'
+import TagsBar from '@/components/TagsBar'
+import BlogPostListScroll from '@/components/BlogPostListScroll'
+import { useRouter } from 'next/router'
+
+export async function getStaticProps () {
+  let posts = await getAllPosts({ from: 'index' })
+  posts = posts.filter(
+    post => post.status[0] === 'Published' && post.type[0] === 'Post'
+  )
+  const tags = await getAllTags(posts)
+  const meta = {
+    title: `${BLOG.title} | ${BLOG.description} `,
+    description: BLOG.description,
+    type: 'website'
+  }
+  return {
+    props: {
+      posts,
+      tags,
+      meta
+    },
+    revalidate: 1
+  }
+}
+
+const Search = ({ posts, tags, meta }) => {
+  // 处理查询过滤 支持标签、关键词过滤
+  let filteredPosts = []
+  const searchKey = getSearchKey()
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  }
+  return (
+    <BaseLayout meta={meta} tags={tags} totalPosts={posts} currentSearch={searchKey}>
+      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
+        <TagsBar tags={tags} />
+        <BlogPostListScroll posts={filteredPosts} tags={tags} />
+      </div>
+    </BaseLayout>
+  )
+}
+
+export function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
+export default Search

pages/tag/[tag].js

@@ -1,7 +1,7 @@
 import { getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
 import TagsBar from '@/components/TagsBar'
-import BlogPostList from '@/components/BlogPostList'
+import BlogPostListPage from '@/components/BlogPostListPage'
 import BaseLayout from '@/layouts/BaseLayout'
 
 export default function Tag ({ tags, posts, currentTag }) {
@@ -13,7 +13,7 @@ export default function Tag ({ tags, posts, currentTag }) {
   return <BaseLayout meta={meta} tags={tags} currentTag={currentTag}>
     <div className='flex-grow'>
       <TagsBar tags={tags} currentTag={currentTag}/>
-      <BlogPostList posts={posts} tags={tags}/>
+      <BlogPostListPage posts={posts} tags={tags}/>
     </div>
   </BaseLayout>
 }