hexo 回顶 按钮 样式

themes/hexo/LayoutBase.js

@@ -17,7 +17,7 @@ import FloatDarkModeButton from './components/FloatDarkModeButton'
 const LayoutBase = (props) => {
   const { children, headerSlot, floatSlot, meta } = props
   const [show, switchShow] = useState(false)
-  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  // const [percent, changePercent] = useState(0) // 页面阅读百分比
 
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
@@ -31,7 +31,7 @@ const LayoutBase = (props) => {
     if (shouldShow !== show) {
       switchShow(shouldShow)
     }
-    changePercent(per)
+    // changePercent(per)
   }
   useEffect(() => {
     smoothscroll.polyfill()
@@ -55,11 +55,11 @@ const LayoutBase = (props) => {
     </main>
 
      {/* 右下角悬浮 */}
-     <div className='bottom-12 right-0 fixed justify-end z-20 font-sans'>
+     <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-blue-400 rounded'>
-        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp  justify-center duration-500  animate__faster flex flex-col items-center cursor-pointer '}>
+        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-500  animate__faster flex flex-col items-center cursor-pointer '}>
           <FloatDarkModeButton/>
           {floatSlot}
-          <JumpToTopButton percent={percent}/>
+          <JumpToTopButton/>
         </div>
       </div>
 

themes/hexo/components/FloatDarkModeButton.js

@@ -21,7 +21,7 @@ export default function FloatDarkModeButton () {
   return (
     <div
       onClick={handleChangeDarkMode}
-      className={'justify-center items-center text-white bg-gray-400 w-7 h-7 text-center transform hover:scale-105 duration-200'
+      className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
       }
     >
       <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>

themes/hexo/components/JumpToCommentButton.js

@@ -17,7 +17,7 @@ const JumpToCommentButton = () => {
     }
   }
 
-  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-gray-400 w-7 h-7 text-center' onClick={navToComment} >
+  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
           <i className='fas fa-comment text-xs' />
     </div>)
 }

themes/hexo/components/JumpToTopButton.js

@@ -15,7 +15,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-gray-400 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+  return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-xs' /></div>
         {showPercent && (<div className='text-xs hidden lg:block'>{percent}</div>)}
     </div>)

themes/hexo/components/PaginationNumber.js

@@ -37,7 +37,7 @@ const PaginationNumber = ({ page, totalPage }) => {
       <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
         <div
           rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-t-2 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
+          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-blue-300 dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
         >
           <i className='fas fa-angle-right'/>
         </div>
@@ -48,7 +48,7 @@ const PaginationNumber = ({ page, totalPage }) => {
 
 function getPageElement (page, currentPage) {
   return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
-      <a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-t-2 duration-500 border-white hover:border-blue-400 ') +
+      <a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-b duration-500 border-blue-300 hover:border-blue-400 ') +
       ' border-white dark:border-blue-700 dark:hover:border-blue-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
       {page}
       </a>

themes/hexo/components/TocDrawerButton.js

@@ -14,7 +14,7 @@ const TocDrawerButton = (props) => {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer text-white transform duration-200 flex justify-center items-center bg-gray-400 w-7 h-7 text-center' title={locale.POST.TOP} >
+  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
     <i className='fas fa-list-ol text-xs'/>
   </div>)
 }