feature： 封装组件

components/ArticleDetail.js

@@ -38,9 +38,9 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
 
   return (<>
-      <div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0 max-w-5xl mx-auto w-screen md:w-full ">
+      <div id="article-wrapper" ref={targetRef} className="flex-grow max-w-5xl mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
-            className="shadow hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
+            className="shadow md:hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
           >
 
             <header>
@@ -101,7 +101,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
             </header>
 
             {/* Notion文章主体 */}
-            <section id='notion-article' className='overflow-x-auto overflow-y-hidden px-1'>
+            <section id='notion-article' className='px-1'>
               {blockMap && (
                 <NotionRenderer
                   className={`${BLOG.font}`}
@@ -117,7 +117,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
               )}
             </section>
 
-            <section className="px-1 py-2 my-1 text-sm font-light  text-gray-600  dark:text-gray-400">
+            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
               {/* 文章内嵌广告 */}
               <ins className="adsbygoogle"
                 style={{ display: 'block', textAlign: 'center' }}
@@ -156,7 +156,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
           </article>
 
           {/* 评论互动 */}
-          <div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
+          <div className="mt-5 lg:px-40 md:hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
             <Comment frontMatter={post} />
           </div>
       </div>

components/BlogPostCard.js

@@ -9,7 +9,7 @@ import TagItemMini from './TagItemMini'
 const BlogPostCard = ({ post, tags }) => {
   return (
     <div key={post.id} className='shadow animate__animated animate__fadeIn flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
-       w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
+       rounded-md w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
 
       <div className='p-8 flex flex-col justify-between w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>

components/BlogPostListScroll.js

@@ -56,7 +56,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
     return <div id='post-list-wrapper' className='mt-10 md:mt-0' ref={targetRef}>
 
       {/* 文章列表 */}
-      <div className='flex flex-wrap space-y-8'>
+      <div className='flex flex-wrap space-y-8 mx-5 md:mx-0'>
         {postsToShow.map(post => (
           <BlogPostCard key={post.id} post={post} tags={tags}/>
         ))}

components/SideBar.js

@@ -54,7 +54,7 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
           <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
             <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
-              <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+              <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
               </a>
             </Link>

components/StickyBar.js

@@ -1,3 +1,8 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect } from 'react'
+
+let windowTop = 0
+
 /**
  * 标签组导航条，默认隐藏仅在移动端显示
  * @param tags
@@ -7,9 +12,31 @@
  */
 const StickyBar = ({ children }) => {
   if (!children) return <></>
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    if (scrollS >= windowTop && scrollS > 10) {
+      const stickyBar = document.querySelector('#sticky-bar')
+      stickyBar && stickyBar.classList.replace('top-14', 'top-0')
+      windowTop = scrollS
+    } else {
+      const stickyBar = document.querySelector('#sticky-bar')
+      stickyBar && stickyBar.classList.replace('top-0', 'top-14')
+      windowTop = scrollS
+    }
+  }, 200))
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    scrollTrigger()
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
   return (
     <div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
-      <div className='bg-white dark:bg-gray-800 dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
+      <div className='glassmorphism dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
           <div id='tag-container' className="md:pl-3 overflow-x-auto">
               { children }
           </div>

components/TopNav.js

@@ -3,14 +3,46 @@ import SideBarDrawer from '@/components/SideBarDrawer'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
-import { useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import Image from 'next/image'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
+import throttle from 'lodash.throttle'
 
-const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
+let windowTop = 0
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, autoHide = true }) => {
   const drawer = useRef()
   const { locale } = useGlobal()
 
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    if (scrollS >= windowTop && scrollS > 10) {
+      const nav = document.querySelector('#sticky-nav')
+      nav && nav.classList.replace('top-0', '-top-16')
+      windowTop = scrollS
+    } else {
+      const nav = document.querySelector('#sticky-nav')
+      nav && nav.classList.replace('-top-16', 'top-0')
+      windowTop = scrollS
+    }
+  }, 200))
+
+  // 监听滚动
+  useEffect(() => {
+    if (autoHide) {
+      scrollTrigger()
+      window.addEventListener('scroll', scrollTrigger)
+    }
+    return () => {
+      autoHide && window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
   return (<div id='top-nav'>
     {/* 侧面抽屉 */}
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>