gitbook

components/PrismMac.js

@@ -70,7 +70,9 @@ const renderMermaid = async() => {
       }
     }
   })
-  observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
+  if (document.querySelector('#notion-article')) {
+    observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
+  }
 }
 
 function renderPrismMac() {

themes/gitbook/LayoutBase.js

@@ -16,6 +16,7 @@ import Catalog from './components/Catalog'
 import { useRouter } from 'next/router'
 import Announcement from './components/Announcement'
 import PageNavDrawer from './components/PageNavDrawer'
+import FloatTocButton from './components/FloatTocButton'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -32,6 +33,8 @@ const LayoutBase = (props) => {
   const { onLoading } = useGlobal()
   const router = useRouter()
 
+  const showTocButton = post?.toc?.length > 1
+
   useEffect(() => {
     setFilterPosts(allNavPages)
   }, [post])
@@ -109,6 +112,10 @@ const LayoutBase = (props) => {
 
                 </main>
 
+                {showTocButton && !tocVisible && <div className='fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b rounded'>
+                    <FloatTocButton {...props}/>
+                </div>}
+
                 <PageNavDrawer {...props}/>
 
                 {/* 移动端底部导航栏 */}

themes/gitbook/components/BottomMenuBar.js

@@ -1,15 +1,9 @@
-import Link from 'next/link'
 import React from 'react'
 import { useMediumGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar({ post, className }) {
-  const { tocVisible, changeTocVisible, pageNavVisible, changePageNavVisible } = useMediumGlobal()
-  const showTocBotton = post?.toc?.length > 0
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
+  const { pageNavVisible, changePageNavVisible } = useMediumGlobal()
 
   const togglePageNavVisible = () => {
     changePageNavVisible(!pageNavVisible)
@@ -19,19 +13,11 @@ export default function BottomMenuBar({ post, className }) {
         <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
             <div className='flex justify-between h-full shadow-card'>
                 <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
-                    <i className="fa-regular fa-chart-bar"></i>
+                <i className="fa-solid fa-book"></i>
                 </div>
                 <div className='flex w-full items-center justify-center cursor-pointer'>
                     <JumpToTopButton />
                 </div>
-                {showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
-                    <i className='fas fa-list-ol ' />
-                </div>}
-                {!showTocBotton && <Link href='/' passHref legacyBehavior>
-                    <div className='flex w-full items-center justify-center cursor-pointer'>
-                        <i className='fas fa-home' />
-                    </div>
-                </Link>}
             </div>
         </div>
   )

themes/gitbook/components/FloatTocButton.js

@@ -0,0 +1,22 @@
+import { useMediumGlobal } from '../LayoutBase'
+
+export default function FloatTocButton () {
+  const { tocVisible, changeTocVisible } = useMediumGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={ 'text-black dark:border-gray-500 flex justify-center items-center dark:text-gray-200 py-2 px-2'
+      }
+    >
+      <a
+        id="darkModeButton"
+        className={'fa-list-ol hover:cursor-pointer fas hover:scale-150 transform duration-200'}
+      />
+    </div>
+  )
+}

themes/gitbook/components/MenuItemCollapse.js

@@ -32,7 +32,7 @@ export const MenuItemCollapse = (props) => {
   }
 
   return <>
-        <div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
+        <div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
 
             {!hasSubMenu && <Link href={link?.to} className='py-2 w-full my-auto items-center justify-between flex  '>
                 <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>

themes/gitbook/components/PageNavDrawer.js

@@ -18,7 +18,7 @@ const PageNavDrawer = ({ post, cRef }) => {
         <div id='gitbook-left-float' className='fixed top-0 left-0 z-40'>
             {/* 侧边菜单 */}
             <div
-                className={(pageNavVisible ? 'animate__slideInLeft ' : ' -ml-72 animate__slideOutLeft') +
+                className={(pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft') +
                     ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-gray-600'}>
                 <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
                     {/* 所有文章列表 */}