Gitbook 主题微调

themes/gitbook/components/BottomMenuBar.js

@@ -1,23 +1,27 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import JumpToTopButton from './JumpToTopButton'
+import MobileButtonCatalog from './MobileButtonCatalog'
+import MobileButtonPageNav from './MobileButtonPageNav'
 
+/**
+ * 移动端底部导航
+ * @param {*} param0
+ * @returns
+ */
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
+  const showTocButton = post?.toc?.length > 1
 
   return (
-        <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-solid fa-book"></i>
-                </div>
-                <div className='flex w-full items-center justify-center cursor-pointer'>
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <>
+      {/* 移动端底部导航按钮 */}
+      <div className='bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
+        <div className='w-full'>
+          <MobileButtonPageNav />
         </div>
+        {showTocButton && (
+          <div className='w-full'>
+            <MobileButtonCatalog />
+          </div>
+        )}
+      </div>
+    </>
   )
 }

themes/gitbook/components/Footer.js

@@ -1,6 +1,10 @@
 import { siteConfig } from '@/lib/config'
 import SocialButton from './SocialButton'
-
+/**
+ * 站点也叫
+ * @param {*} param0
+ * @returns
+ */
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()

themes/gitbook/components/MobileButtonCatalog.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 
 /**
@@ -5,6 +6,7 @@ import { useGitBookGlobal } from '@/themes/gitbook'
  */
 export default function MobileButtonCatalog() {
   const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)
@@ -19,9 +21,11 @@ export default function MobileButtonCatalog() {
       <a
         id='toc-button'
         className={
-          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
-        }
-      />
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-list-ol fas' />
+        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+      </a>
     </div>
   )
 }

themes/gitbook/components/MobileButtonPageNav.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 
 /**
@@ -5,7 +6,7 @@ import { useGitBookGlobal } from '@/themes/gitbook'
  */
 export default function MobileButtonPageNav() {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
+  const { locale } = useGlobal()
   const togglePageNavVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
@@ -17,11 +18,13 @@ export default function MobileButtonPageNav() {
         'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
       }>
       <a
-        id='toc-button'
+        id='nav-button'
         className={
-          'fa-book cursor-pointer fas hover:scale-150 transform duration-200'
-        }
-      />
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-book fas' />
+        <span>{locale.COMMON.ARTICLE_LIST}</span>
+      </a>
     </div>
   )
 }

themes/gitbook/components/PageNavDrawer.js

@@ -34,7 +34,7 @@ const PageNavDrawer = props => {
           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-hexo-black-gray`}>
           <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
-            <span>{locale.COMMON.ARTICLE}</span>
+            <span>{locale.COMMON.ARTICLE_LIST}</span>
             <i
               className='fas fa-times p-1 cursor-pointer'
               onClick={() => {

themes/gitbook/index.js

@@ -19,6 +19,7 @@ import ArticleAround from './components/ArticleAround'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
+import BottomMenuBar from './components/BottomMenuBar'
 import Catalog from './components/Catalog'
 import CatalogDrawerWrapper from './components/CatalogDrawerWrapper'
 import CategoryItem from './components/CategoryItem'
@@ -26,8 +27,6 @@ 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'
@@ -108,7 +107,6 @@ const LayoutBase = props => {
   const [pageNavVisible, changePageNavVisible] = useState(false)
   const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
 
-  const showTocButton = post?.toc?.length > 1
   const searchModal = useRef(null)
 
   useEffect(() => {
@@ -239,23 +237,11 @@ const LayoutBase = props => {
           )}
         </main>
 
-        {/* 移动端底部导航按钮 */}
-        <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='w-full'>
-            <MobileButtonPageNav />
-          </div>
-          {showTocButton && (
-            <div className='w-full'>
-              <MobileButtonCatalog />
-            </div>
-          )}
-        </div>
-
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
 
         {/* 移动端底部导航栏 */}
-        {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+        <BottomMenuBar {...props} />
       </div>
     </ThemeGlobalGitbook.Provider>
   )