feature:

简化层级

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

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

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

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

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