From bca62365d3fcccd123491cf378dcee72a1ef6096 Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Sat, 4 Dec 2021 16:39:45 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E7=AE=80=E5=8C=96=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DarkModeButton.js  |  2 +-
 components/JumpToTopButton.js |  2 +-
 components/SideBar.js         | 14 ++++----------
 components/SideBarDrawer.js   |  6 +++---
 components/TopNav.js          | 10 +++++-----
 layouts/BaseLayout.js         | 20 +++++++++-----------
 pages/article/[slug].js       | 22 +++++++++++-----------
 7 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index a5031881..c5297176 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -12,7 +12,7 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
   }
   return <div className='z-10 duration-200 text-xl cursor-pointer'>
-    <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='fa mx-2.5 my-2 hover:scale-125 transform duration-200'
+    <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
        onClick={handleChangeDarkMode} />
   </div>
 }
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 30855701..96f6c548 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -41,7 +41,7 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
           <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
             <FontAwesomeIcon icon={faArrowUp} />
           </div>
-          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
+          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
         </div>
       </div>
     </div>)
diff --git a/components/SideBar.js b/components/SideBar.js
index c8201b00..f2ca7eae 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -26,20 +26,16 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
   return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
-    <section>
-      <InfoCard />
-    </section>
+    <InfoCard />
 
     <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
 
-      <section>
         {/* <hr className='dark:border-gray-700' /> */}
         <MenuButtonGroup allowCollapse={true} />
         <section className='p-5'>
           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </section>
         <hr className='dark:border-gray-700' />
-      </section>
 
       {/* 最新文章 */}
       {posts && (
@@ -85,17 +81,15 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
     </div>
 
     {post && (
-      <section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
-        <div
-          className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
+      <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-800'>
+        <div className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
-
       </section>
     )}
 
-    <section id='blank' className='bg-white dark:bg-gray-900 py-20' />
+    {/* <section id='blank' className='bg-white dark:bg-gray-900 py-20' /> */}
 
   </aside>
 }
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index f8eff130..5b593bc5 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -18,14 +18,14 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
   const switchSideDrawerVisible = () => {
     changeHiddenStatus(!isHidden)
   }
-  return <div>
+  return <>
     <div className={(isHidden ? '-ml-72' : 'shadow-2xl') + ' flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'}>
       <SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
     </div>
     {/* 背景蒙版 */}
-    <div id='drawer-background'
+    <div id='sidebar-drawer-background'
          className={(isHidden ? 'hidden' : 'block') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'}
          onClick={switchSideDrawerVisible} />
-  </div>
+  </>
 }
 export default SideBarDrawer
diff --git a/components/TopNav.js b/components/TopNav.js
index 1917c5af..db4ceee6 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,14 +1,14 @@
 import { useRef } from 'react'
 import DarkModeButton from '@/components/DarkModeButton'
-import SearchInput from '@/components/SearchInput'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
+import BLOG from '@/blog.config'
 
 const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, currentCategory }) => {
   const drawer = useRef()
 
-  return (<>
+  return (<div id='top-nav' className='block lg:hidden'>
     {/* 侧面抽屉 */}
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
@@ -18,7 +18,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         {/* 左侧LOGO */}
         <div className='flex ml-12'>
           <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='fixed top-3 left-0 z-30 py-1 px-5 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
+               className='fixed top-3 left-0 z-30 ml-5 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
             <FontAwesomeIcon icon={faBars} className='hover:scale-125 transform duration-200'
             />
           </div>
@@ -26,7 +26,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
 
         {/* 中间搜索框 */}
         <div className='w-96'>
-          <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
+          <span className='text-lg dark:text-gray-200'>{BLOG.title}</span> | <span className='dark:text-gray-300'>{BLOG.description}</span>
         </div>
 
         {/* 右侧功能 */}
@@ -36,7 +36,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
       </div>
     </div>
 
-  </>)
+  </div>)
 }
 
 export default TopNav
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 066f934d..5e276104 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -69,27 +69,25 @@ const BaseLayout = ({
       <CommonHead meta={meta} />
 
       {/* 顶部导航栏 */}
-      <div className='block lg:hidden'>
-        <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories}
-          currentCategory={currentCategory} />
-      </div>
+      <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
 
       {/* Middle Wrapper */}
-      <main className='flex dark:bg-black'>
+      <div className='flex dark:bg-black'>
         <div className='hidden lg:block z-10'>
           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
         </div>
         <div className='flex flex-grow' ref={targetRef}>
           {children}
         </div>
-        <JumpToTopButton targetRef={targetRef} showPercent={true} />
-        <div className='hidden lg:block fixed right-1 bottom-52 p-1
-         bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
-          <DarkModeButton />
-        </div>
-      </main>
+      </div>
 
       <Footer />
+
+      <JumpToTopButton targetRef={targetRef} showPercent={true} />
+      <div className='hidden lg:block fixed right-1 bottom-52 py-1 px-1.5
+         bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
+        <DarkModeButton />
+      </div>
     </div>
   )
 }
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 7a94f7b2..0e623720 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -51,20 +51,20 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
   return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
     <Progress targetRef={targetRef} />
 
-    <article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-200'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black bg-gray-200'>
 
-      <div className='max-w-5xl mx-auto'>
-        <div className='w-screen md:w-full pt-10 '>
-          {post.type && !post.type.includes('Page') && (<div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
+      <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full '>
+        {post.type && !post.type.includes('Page') && (<>
+          <header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
             <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='lazy' objectFit='cover' layout='fill' alt={post.title} />
-          </div>)}
-        </div>
+          </header>
+        </>)}
 
-        <div className='animate__fadeIn animate__animated subpixel-antialiased w-screen md:w-full lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+        <article className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
           {/* 文章Title */}
           <h1 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
           <hr className='mt-4' />
-          <div className='flex-nowrap flex  mt-1 dark:text-white'>
+          <section className='flex-nowrap flex  mt-1 dark:text-white'>
             <Link href={`/category/${post.category}`} passHref>
               <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
                 <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
@@ -86,7 +86,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
               <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
               &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
             </div>
-          </div>
+          </section>
 
           {/* Notion文章主体 */}
           {blockMap && (
@@ -127,7 +127,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </div>
           </section>
 
-        </div>
+        </article>
 
         <div className='w-screen md:w-full px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
           <div className='py-10'>
@@ -154,7 +154,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
           <Comment frontMatter={post} />
         </div>
       </div>
-    </article>
+    </div>
 
     {/* 悬浮目录按钮 */}
     <div className='block lg:hidden'>