封装Layout组件

components/BlogPostListScroll.js

@@ -14,7 +14,7 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
+const BlogPostListScroll = ({ posts = [], tags }) => {
   let filteredBlogPosts = posts
 
   // 处理查询过滤 支持标签、关键词过滤
@@ -61,10 +61,12 @@ const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
     }
   })
 
+  const targetRef = useRef(null)
+
   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'>
+    return <div id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20' ref={targetRef}>
       <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'>
@@ -100,4 +102,4 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
     postsPerPage * page
   )
 }
-export default BlogPostListScrollPagination
+export default BlogPostListScroll

components/Container.js

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useCallback, useEffect } from 'react'
-import CommonHead from '@/components/CommonHead'
-import throttle from 'lodash.throttle'
-import BLOG from '@/blog.config'
-import { useTheme } from '@/lib/theme'
-
-const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) => {
-  let windowTop = 0
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    const nav = document.querySelector('#sticky-nav')
-    const sidebar = document.querySelector('#sidebar')
-    const tagsBar = document.querySelector('#tags-bar')
-    const rightToc = document.querySelector('#right-toc')
-    if (scrollS >= windowTop && scrollS > 10) {
-      nav && nav.classList.replace('top-0', '-top-16')
-      tagsBar && tagsBar.classList.replace('top-16', 'top-0')
-      sidebar && sidebar.classList.replace('top-20', 'top-2')
-      rightToc && rightToc.classList.replace('top-16', 'top-0')
-      windowTop = scrollS
-    } else {
-      nav && nav.classList.replace('-top-16', 'top-0')
-      tagsBar && tagsBar.classList.replace('top-0', 'top-16')
-      sidebar && sidebar.classList.replace('top-2', 'top-20')
-      rightToc && rightToc.classList.replace('top-0', 'top-16')
-      windowTop = scrollS
-    }
-  }, 200))
-
-  // 监听滚动
-  useEffect(() => {
-    window.addEventListener('scroll', scrollTrigger)
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  })
-  const { theme } = useTheme()
-  return (
-    <div className={[BLOG.font, theme].join(' ')}>
-      <CommonHead meta={meta} />
-      {children}
-    </div>
-  )
-}
-
-Container.propTypes = {
-  children: PropTypes.node
-}
-
-export default Container

components/DrawerRight.js

@@ -26,11 +26,11 @@ const DrawerRight = ({ post, cRef }) => {
         className={(showDrawer ? 'shadow-2xl' : '-mr-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-700 border-r dark:border-gray-600'}>
         {/* LOGO */}
         <div className='sticky top-0 z-20 bg-white w-72 flex space-x-4 px-5 py-3.5 dark:border-gray-500 border-b dark:bg-gray-900 '>
-          <div className='flex text-lg justify-center font-bold font-semibold px-2 py-1 duration-200 dark:text-gray-300'>文章目录
+          <div className='text-lg font-bold font-semibold px-2 py-1 duration-200 dark:text-gray-300'>文章目录
           </div>
           <div
             className='z-10 p-1 duration-200 mr-2 absolute right-6 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
-            <i className='fa hover:scale-125 transform duration-200 fa-bookmark-o ' onClick={handleMenuClick} />
+            <i className='fa hover:scale-125 transform duration-200 fa-bookmark ' onClick={handleMenuClick} />
           </div>
         </div>
       </div>

components/SideBar.js

@@ -4,11 +4,11 @@ import InfoCard from '@/components/InfoCard'
 import TagList from '@/components/TagList'
 
 const SideBar = ({ tags, currentTag, post }) => {
-  return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden md:block'>
+  return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden lg:block'>
     <div
       className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
       <div id='sidebar' className='hidden md:block sticky top-20 duration-500'>
-        <div className={post ? 'block' : 'hidden xl:block'}>
+        <div >
           <InfoCard />
           <hr className='dark:border-gray-700' />
           <MenuButtonGroup allowCollapse={true} />

components/TopNav.js

@@ -41,9 +41,11 @@ const TopNav = ({ tags, currentTag, post }) => {
         {/* 右侧功能 */}
         <div className='flex flex-nowrap space-x-1'>
           <DarkModeButton />
-          {post && <div className='block xl:hidden z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
-            <i className='fa p-2.5 hover:scale-125 transform duration-200 fa-bookmark' onClick={() => { drawerRight.current.handleMenuClick() }}/>
-          </div>}
+          {post && (
+            <div className='block xl:hidden z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
+              <i className='fa p-2.5 hover:scale-125 transform duration-200 fa-bookmark-o' onClick={() => { drawerRight.current.handleMenuClick() }}/>
+            </div>
+          )}
         </div>
       </div>
     </div>