From 540f3ac8edc7e56644afb8098c1489184c97b7c2 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 30 Dec 2021 17:15:14 +0800
Subject: [PATCH] =?UTF-8?q?feature=EF=BC=9A=20=E5=B0=81=E8=A3=85=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ArticleDetail.js      | 10 +++---
 components/BlogPostCard.js       |  2 +-
 components/BlogPostListScroll.js |  2 +-
 components/SideBar.js            |  2 +-
 components/StickyBar.js          | 29 ++++++++++++++++-
 components/TopNav.js             | 36 ++++++++++++++++++--
 layouts/BaseLayout.js            | 56 ++------------------------------
 pages/category/index.js          |  2 +-
 pages/tag/index.js               |  2 +-
 styles/globals.css               |  8 ++---
 10 files changed, 78 insertions(+), 71 deletions(-)

diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index fe556c41..bff0cb21 100644
--- a/components/ArticleDetail.js
+++ b/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>
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index a7b0dd0f..9750d30f 100644
--- a/components/BlogPostCard.js
+++ b/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>
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index d6337edf..e272ed49 100644
--- a/components/BlogPostListScroll.js
+++ b/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}/>
         ))}
diff --git a/components/SideBar.js b/components/SideBar.js
index 3ce2a3b2..bae915c1 100644
--- a/components/SideBar.js
+++ b/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>
diff --git a/components/StickyBar.js b/components/StickyBar.js
index 18f10349..abbc25c9 100644
--- a/components/StickyBar.js
+++ b/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>
diff --git a/components/TopNav.js b/components/TopNav.js
index b79663fd..b87370a8 100644
--- a/components/TopNav.js
+++ b/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}/>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 20ea8b6d..426313b4 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -8,9 +8,8 @@ import SideAreaLeft from '@/components/SideAreaLeft'
 import SideAreaRight from '@/components/SideAreaRight'
 import TopNav from '@/components/TopNav'
 import { useGlobal } from '@/lib/global'
-import throttle from 'lodash.throttle'
 import PropTypes from 'prop-types'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param children
@@ -43,26 +42,6 @@ const BaseLayout = ({
   categories,
   ...customMeta
 }) => {
-  let windowTop = 0
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    if (scrollS >= windowTop && scrollS > 10) {
-      handleScrollDown()
-      windowTop = scrollS
-    } else {
-      handleScrollUp()
-      windowTop = scrollS
-    }
-  }, 200))
-
-  // 监听滚动
-  useEffect(() => {
-    window.addEventListener('scroll', scrollTrigger)
-    scrollTrigger()
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  }, [])
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
 
@@ -78,7 +57,7 @@ const BaseLayout = ({
           <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
             <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
           </aside>
-          <section id='center' className='flex-grow max-w-4xl min-h-screen' ref={targetRef}>
+          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen overflow-x-auto' ref={targetRef}>
             {onLoading
               ? <LoadingCover/>
               : <>
@@ -99,37 +78,6 @@ const BaseLayout = ({
   )
 }
 
-/**
- * 隐藏导航
- * 划到页面下方
- */
-const handleScrollDown = () => {
-  if (document) {
-    const nav = document.querySelector('#sticky-nav')
-    nav && nav.classList.replace('top-0', '-top-16')
-
-    const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-14', 'top-0')
-
-    const tocDrawerButton = document.querySelector('#toc-drawer-button')
-    tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
-  }
-}
-
-/**
- * 显示导航
- * 划到顶部
- */
-const handleScrollUp = () => {
-  if (document) {
-    const nav = document.querySelector('#sticky-nav')
-    nav && nav.classList.replace('-top-16', 'top-0')
-
-    const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-0', 'top-14')
-  }
-}
-
 BaseLayout.propTypes = {
   children: PropTypes.node
 }
diff --git a/pages/category/index.js b/pages/category/index.js
index 0baaa060..6427ed97 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -16,7 +16,7 @@ export default function Category ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 rounded-xl shadow-lg'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
         <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
         <div id='category-list' className='duration-200 flex flex-wrap'>
           {Object.keys(categories).map(category => {
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 9352afd9..4676bdac 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -16,7 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
     type: 'website'
   }
   return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 rounded-xl shadow-lg'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
         <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
         <div id='tags-list' className='duration-200 flex flex-wrap'>
           { tags.map(tag => {
diff --git a/styles/globals.css b/styles/globals.css
index e8731ca2..7d4722a6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -150,13 +150,13 @@ nav {
 }
 
 .glassmorphism{
-  background: rgba(255, 255, 255, 0.2);
-  -webkit-backdrop-filter: blur(3px);
-  backdrop-filter: blur(3px);
+  background: hsla(0, 0%, 100%, .75);
+  -webkit-backdrop-filter: blur(5px);    
+  backdrop-filter: blur(5px);   
 }
 
 .dark .glassmorphism{
-  background: rgba(31, 41, 55, 0.2);
+  background: rgba(31, 41, 55, .75);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
 }
\ No newline at end of file