gitbook 布局交互优化

themes/gitbook/components/CatalogDrawerWrapper.js

@@ -0,0 +1,60 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+import Catalog from './Catalog'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogDrawerWrapper = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  return (
+    <>
+      <div
+        id='gitbook-toc-float'
+        className='fixed top-0 right-0 z-40 md:hidden'>
+        {/* 侧边菜单 */}
+        <div
+          className={
+            (tocVisible
+              ? 'animate__slideInRight '
+              : ' -mr-72 animate__slideOutRight') +
+            ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'
+          }>
+          {post && (
+            <>
+              <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+                <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+                <i
+                  className='fas fa-times p-1 cursor-pointer'
+                  onClick={() => {
+                    changeTocVisible(false)
+                  }}></i>
+              </div>
+              <div className='dark:text-gray-400 text-gray-600 px-3'>
+                <Catalog post={post} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {/* 背景蒙版 */}
+      <div
+        id='right-drawer-background'
+        className={
+          (tocVisible ? 'block' : 'hidden') +
+          ' fixed top-0 left-0 z-30 w-full h-full'
+        }
+        onClick={switchVisible}
+      />
+    </>
+  )
+}
+export default CatalogDrawerWrapper

themes/gitbook/components/FloatTocButton.js

@@ -1,25 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}

themes/gitbook/components/Header.js

@@ -90,7 +90,7 @@ export default function Header(props) {
             {isOpen ? (
               <i className='fas fa-times' />
             ) : (
-              <i className='fa-solid fa-ellipsis-vertical' />
+              <i className='fa-solid fa-bars' />
             )}
           </div>
         </div>

themes/gitbook/components/JumpToTopButton.js

@@ -1,4 +1,3 @@
-
 /**
  * 跳转到网页顶部
  * 当屏幕下滑500像素后会出现该控件
@@ -9,15 +8,20 @@
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   return (
-          <div
+    <div
-              id="jump-to-top"
+      id='jump-to-top'
-              data-aos="fade-up"
+      data-aos='fade-up'
-              data-aos-duration="300"
+      data-aos-duration='300'
-              data-aos-once="false"
+      data-aos-once='false'
-              data-aos-anchor-placement="top-center"
+      data-aos-anchor-placement='top-center'
-              className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
+      className='fixed xl:right-80 right-2 bottom-24 z-20'>
-              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
+      <i
-          </div>
+        className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+    </div>
   )
 }
 

themes/gitbook/components/LogoBar.js

@@ -1,6 +1,5 @@
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
-import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'
 import CONFIG from '../config'
 
@@ -11,19 +10,8 @@ import CONFIG from '../config'
  */
 export default function LogoBar(props) {
   const { siteInfo } = props
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
   return (
     <div id='top-wrapper' className='w-full flex items-center'>
-      <div
-        onClick={togglePageNavVisible}
-        className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
-        <i
-          className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
-      </div>
       <Link
         href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
         className='flex text-md md:text-xl dark:text-gray-200'>

themes/gitbook/components/MobileButtonCatalog.js

@@ -0,0 +1,27 @@
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端目录按钮
+ */
+export default function MobileButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}

themes/gitbook/components/MobileButtonPageNav.js

@@ -0,0 +1,27 @@
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端文章导航按钮
+ */
+export default function MobileButtonPageNav() {
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
+
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+    <div
+      onClick={togglePageNavVisible}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-book cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}

themes/gitbook/components/PageNavDrawer.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import NavPostList from './NavPostList'
 
@@ -11,6 +12,7 @@ import NavPostList from './NavPostList'
 const PageNavDrawer = props => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
   const { filteredNavPages } = props
+  const { locale } = useGlobal()
 
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
@@ -24,7 +26,15 @@ const PageNavDrawer = props => {
         {/* 侧边菜单 */}
         <div
           className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
-                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+          <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+            <span>{locale.COMMON.ARTICLE}</span>
+            <i
+              className='fas fa-times p-1 cursor-pointer'
+              onClick={() => {
+                changePageNavVisible(false)
+              }}></i>
+          </div>
           {/* 所有文章列表 */}
           <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
             <NavPostList filteredNavPages={filteredNavPages} />

themes/gitbook/components/TocDrawer.js

@@ -1,34 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import Catalog from './Catalog'
-
-/**
- * 悬浮抽屉目录
- * @param toc
- * @param post
- * @returns {JSX.Element}
- * @constructor
- */
-const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-  const switchVisible = () => {
-    changeTocVisible(!tocVisible)
-  }
-  return <>
-    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
-      {/* 侧边菜单 */}
-      <div
-        className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'}>
-          {post && <>
-           <div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
-             <Catalog post={post}/>
-           </div>
-          </>}
-      </div>
-    </div>
-    {/* 背景蒙版 */}
-    <div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
-         onClick={switchVisible} />
-  </>
-}
-export default TocDrawer

themes/gitbook/index.js

@@ -20,18 +20,19 @@ import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
 import Catalog from './components/Catalog'
+import CatalogDrawerWrapper from './components/CatalogDrawerWrapper'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import InfoCard from './components/InfoCard'
 import JumpToTopButton from './components/JumpToTopButton'
+import MobileButtonCatalog from './components/MobileButtonCatalog'
+import MobileButtonPageNav from './components/MobileButtonPageNav'
 import NavPostList from './components/NavPostList'
 import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
 import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
-import TocDrawer from './components/TocDrawer'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -211,6 +212,7 @@ const LayoutBase = props => {
                 <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
                 <div className='py-4'>
+                  {/* 桌面端目录 */}
                   <Catalog {...props} />
                   {slotRight}
                   {router.route === '/' && (
@@ -235,12 +237,17 @@ const LayoutBase = props => {
           )}
         </main>
 
-        {/* 移动端悬浮目录按钮 */}
+        {/* 移动端底部按钮 */}
-        {showTocButton && !tocVisible && (
+        <div className='bottom-button-group md:hidden w-screen h-12 px-4 fixed flex items-center justify-between right-0 bottom-0 z-30 bg-white border-l border-t dark:border-gray-800'>
-          <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
+          <div className='w-full'>
-            <FloatTocButton {...props} />
+            <MobileButtonPageNav />
           </div>
-        )}
+          {showTocButton && (
+            <div className='w-full'>
+              <MobileButtonCatalog />
+            </div>
+          )}
+        </div>
 
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
@@ -366,7 +373,8 @@ const LayoutSlug = props => {
             </section>
           )}
 
-          <TocDrawer {...props} />
+          {/* 文章目录 */}
+          <CatalogDrawerWrapper {...props} />
         </div>
       )}
     </>

themes/gitbook/style.js

@@ -5,14 +5,18 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
+  return (
-    
+    <style jsx global>{`
-    // 底色
+      // 底色
-    .dark body{
+      .dark body {
         background-color: black;
-    }
+      }
 
-  `}</style>
+      .bottom-button-group {
+        box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
+      }
+    `}</style>
+  )
 }
 
 export { Style }

themes/nav/components/FloatButtonCatalog.js

@@ -0,0 +1,27 @@
+import { useNavGlobal } from '@/themes/nav'
+
+/**
+ * 移动端悬浮目录按钮
+ */
+export default function FloatButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useNavGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}

themes/nav/components/FloatTocButton.js

@@ -1,25 +0,0 @@
-import { useNavGlobal } from '@/themes/nav'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useNavGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}

themes/nav/index.js

@@ -25,7 +25,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import BlogPostCard from './components/BlogPostCard'
 import BlogPostListAll from './components/BlogPostListAll'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
+import FloatButtonCatalog from './components/FloatButtonCatalog'
 import Footer from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import LogoBar from './components/LogoBar'
@@ -187,7 +187,7 @@ const LayoutBase = props => {
         {/* 移动端悬浮目录按钮 */}
         {showTocButton && !tocVisible && (
           <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-neutral-800 rounded'>
-            <FloatTocButton {...props} />
+            <FloatButtonCatalog {...props} />
           </div>
         )}