gitbook-jump-to-top

components/DarkModeButton.js

@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div onClick={handleChangeDarkMode} className={'px-1 dark:text-gray-200 text-gray-800 z-10 duration-200 text-xl hover:scale-125 cursor-pointer transform ' + props.className}>
+  return <div onClick={handleChangeDarkMode} className={'px-1 dark:text-gray-200 text-gray-800 z-10 duration-200 text-xl hover:scale-110 cursor-pointer transform ' + props.className}>
     <i id='darkModeButton' className={`${isDarkMode ? 'far fa-sun' : 'far fa-moon'}`}/>
   </div>
 }

components/Player.js

@@ -1,9 +1,9 @@
-import React from 'react'
 import BLOG from '@/blog.config'
+import { useEffect, useRef, useState } from 'react'
 
 const Player = () => {
-  const [player, setPlayer] = React.useState()
-  const ref = React.useRef(null)
+  const [player, setPlayer] = useState()
+  const ref = useRef(null)
 
   const lrcType = JSON.parse(BLOG.MUSIC_PLAYER_LRC_TYPE)
   const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
@@ -11,7 +11,7 @@ const Player = () => {
 
   const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!meting && window.APlayer) {
       setPlayer(new window.APlayer({
         container: ref.current,

themes/gitbook/LayoutBase.js

@@ -6,7 +6,6 @@ import RevolverMaps from './components/RevolverMaps'
 import CONFIG_GITBOOK from './config_gitbook'
 import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
-import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
@@ -17,6 +16,7 @@ import { useRouter } from 'next/router'
 import Announcement from './components/Announcement'
 import PageNavDrawer from './components/PageNavDrawer'
 import FloatTocButton from './components/FloatTocButton'
+import JumpToTopButton from './components/JumpToTopButton'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -76,14 +76,7 @@ const LayoutBase = (props) => {
                             {onLoading ? LoadingCover : children}
 
                             {/* 回顶按钮 */}
-                            <div
-                                data-aos="fade-up"
-                                data-aos-duration="300"
-                                data-aos-once="false"
-                                data-aos-anchor-placement="top-center"
-                                className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20 '>
-                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-black dark:border-gray-800' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-                            </div>
+                            <JumpToTopButton />
                         </div>
 
                         {/* 底部 */}
@@ -113,17 +106,17 @@ const LayoutBase = (props) => {
                 </main>
 
                 {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-                    <FloatTocButton {...props}/>
+                    <FloatTocButton {...props} />
                 </div>}
 
-                <PageNavDrawer {...props}/>
+                <PageNavDrawer {...props} />
 
                 {/* 移动端底部导航栏 */}
-                <BottomMenuBar {...props} className='block md:hidden' />
+                {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
             </div>
         </ThemeGlobalMedium.Provider>
   )
 }
 
 export default LayoutBase
-export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
+export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)

themes/gitbook/components/BottomMenuBar.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useMediumGlobal()
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
 
   const togglePageNavVisible = () => {
     changePageNavVisible(!pageNavVisible)

themes/gitbook/components/FloatTocButton.js

@@ -1,7 +1,7 @@
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 
 export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)

themes/gitbook/components/JumpToTopButton.js

@@ -1,6 +1,3 @@
-import { useGlobal } from '@/lib/global'
-import React from 'react'
-import CONFIG_GITBOOK from '../config_gitbook'
 
 /**
  * 跳转到网页顶部
@@ -11,16 +8,17 @@ import CONFIG_GITBOOK from '../config_gitbook'
  * @constructor
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
-  const { locale } = useGlobal()
-  if (!CONFIG_GITBOOK.WIDGET_TO_TOP) {
-    return <></>
-  }
-  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
-        <div title={locale.POST.TOP} >
-          <i className='fas fa-arrow-up'/>
-        </div>
-        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
-    </div>)
+  return (
+          <div
+              id="jump-to-top"
+              data-aos="fade-up"
+              data-aos-duration="300"
+              data-aos-once="false"
+              data-aos-anchor-placement="top-center"
+              className='fixed xl:right-80 right-2 mr-10 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' }) }} />
+          </div>
+  )
 }
 
 export default JumpToTopButton

themes/gitbook/components/LogoBar.js

@@ -1,13 +1,28 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import { useGitBookGlobal } from '../LayoutBase'
 
+/**
+ * Logo区域
+ * @param {*} props
+ * @returns
+ */
 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='/' className='flex text-md md:text-xl dark:text-gray-200'>
                 {/*  eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2' /> {siteInfo?.title}
+                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
+                {siteInfo?.title}
             </Link>
         </div>
   )

themes/gitbook/components/PageNavDrawer.js

@@ -1,4 +1,4 @@
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import BlogPostListScroll from './BlogPostListScroll'
 
 /**
@@ -9,7 +9,7 @@ import BlogPostListScroll from './BlogPostListScroll'
  * @constructor
  */
 const PageNavDrawer = ({ post, cRef }) => {
-  const { pageNavVisible, changePageNavVisible, filterPosts } = useMediumGlobal()
+  const { pageNavVisible, changePageNavVisible, filterPosts } = useGitBookGlobal()
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
@@ -19,7 +19,7 @@ const PageNavDrawer = ({ post, cRef }) => {
             {/* 侧边菜单 */}
             <div
                 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'}>
+                    ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-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'>
                     {/* 所有文章列表 */}
                     <BlogPostListScroll posts={filterPosts} />

themes/gitbook/components/SearchInput.js

@@ -1,11 +1,11 @@
 import { useImperativeHandle, useRef, useState } from 'react'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import { deepClone } from '@/lib/utils'
 let lock = false
 
 const SearchInput = ({ currentSearch, cRef, className }) => {
   const searchInputRef = useRef()
-  const { setFilterPosts, allNavPages } = useMediumGlobal()
+  const { setFilterPosts, allNavPages } = useGitBookGlobal()
 
   useImperativeHandle(cRef, () => {
     return {

themes/gitbook/components/TocDrawer.js

@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 
 /**
  * 悬浮抽屉目录
@@ -9,7 +9,7 @@ import { useMediumGlobal } from '../LayoutBase'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }
@@ -18,7 +18,7 @@ const TocDrawer = ({ post, cRef }) => {
       {/* 侧边菜单 */}
       <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-gray-900'}>
+        ' 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}/>

themes/gitbook/components/TopNavBar.js

@@ -49,17 +49,16 @@ export default function TopNavBar(props) {
             </Collapse>
 
             {/* 导航栏菜单 */}
-            <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+            <div className='flex w-full h-14 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
 
                 {/* 左侧图标Logo */}
                 <LogoBar {...props} />
 
                 {/* 折叠按钮、仅移动端显示 */}
-                <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                    <DarkModeButton className='text-sm flex items-center h-full' />
-
-                    <div onClick={toggleMenuOpen} className='cursor-pointer'>
-                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                <div className='mr-1 flex md:hidden justify-end items-center space-x-4 font-serif dark:text-gray-200'>
+                    <DarkModeButton className='flex text-md items-center h-full' />
+                    <div onClick={toggleMenuOpen} className='cursor-pointer text-lg hover:scale-110 duration-150'>
+                        {isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
                     </div>
                 </div>
 

themes/medium/LayoutBase.js

@@ -13,6 +13,7 @@ import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
 import Announcement from './components/Announcement'
+import JumpToTopButton from './components/JumpToTopButton'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -53,15 +54,7 @@ const LayoutBase = props => {
 
                             {onLoading ? LoadingCover : children}
 
-                            {/* 回顶按钮 */}
-                            <div
-                                data-aos="fade-up"
-                                data-aos-duration="300"
-                                data-aos-once="false"
-                                data-aos-anchor-placement="top-center"
-                                className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
-                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-                            </div>
+                            <JumpToTopButton />
                         </div>
 
                         {/* 底部 */}
@@ -79,7 +72,7 @@ const LayoutBase = props => {
                                     {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
                                 </div>
                             </Tabs>
-                            <Announcement post={notice}/>
+                            <Announcement post={notice} />
                             <Live2D />
                         </div>
                     </div>
@@ -93,4 +86,4 @@ const LayoutBase = props => {
 }
 
 export default LayoutBase
-export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
+export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)

themes/medium/components/BottomMenuBar.js

@@ -1,10 +1,10 @@
 import Link from 'next/link'
 import React from 'react'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ post, className }) {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
   const showTocBotton = post?.toc?.length > 0
 
   const toggleToc = () => {

themes/medium/components/JumpToTopButton.js

@@ -1,5 +1,3 @@
-import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG_MEDIUM from '../config_medium'
 
 /**
@@ -11,16 +9,20 @@ import CONFIG_MEDIUM from '../config_medium'
  * @constructor
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
-  const { locale } = useGlobal()
   if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
     return <></>
   }
-  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
-        <div title={locale.POST.TOP} >
-          <i className='fas fa-arrow-up'/>
-        </div>
-        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
-    </div>)
+  return (
+    <div
+        id="jump-to-top"
+        data-aos="fade-up"
+        data-aos-duration="300"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-center"
+        className='fixed xl:right-80 right-2 mr-10 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' }) }} />
+    </div>
+  )
 }
 
 export default JumpToTopButton

themes/medium/components/TocDrawer.js

@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 
 /**
  * 悬浮抽屉目录
@@ -9,7 +9,7 @@ import { useMediumGlobal } from '../LayoutBase'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }