gitbook 布局交互优化

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