hexo 样式微调

themes/Hexo/LayoutBase.js

@@ -55,8 +55,8 @@ const LayoutBase = (props) => {
     </main>
 
      {/* 右下角悬浮 */}
-     <div className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
+     <div className='bottom-12 right-2 fixed justify-end z-20 font-sans'>
-        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism 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}/>

themes/Hexo/components/JumpToTopButton.js

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

themes/Hexo/components/MenuList.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import CONFIG_HEXO from '../config_hexo'
+
+const MenuList = (props) => {
+  const { postCount, customNav } = props
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+
+  let links = [
+    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
+    { icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
+  ]
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+      {links.map(link => {
+        if (link && link.show) {
+          const selected = (router.pathname === link.to) || (router.asPath === link.to)
+          return <Link key={`${link.to}`} title={link.to} href={link.to} >
+          <a className={'py-1.5 px-5 duration-300 text-base justify-between hover:bg-blue-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+              (selected ? 'bg-gray-200 text-black' : ' ')} >
+              <div className='my-auto items-center justify-center flex '>
+                <i className={`${link.icon} w-4 text-center`} />
+                <div className={'ml-4'}>{link.name}</div>
+              </div>
+              {link.slot}
+            </a>
+          </Link>
+        } else {
+          return null
+        }
+      })}
+    </nav>
+}
+export default MenuList

themes/Hexo/components/TocDrawer.js

@@ -24,10 +24,10 @@ const TocDrawer = ({ post, cRef }) => {
       {/* 侧边菜单 */}
       <div
         className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' shadow-card animate__animated animate__faster max-h-36 ' +
+        ' shadow-card animate__animated animate__faster h-36 ' +
-        ' w-60 duration-200 fixed right-8 bottom-24 rounded overflow-y-auto py-2 bg-white dark:bg-gray-600'}>
+        ' w-60 duration-200 fixed right-12 bottom-12 rounded overflow-y-auto py-2 bg-white dark:bg-gray-600'}>
           {post && <>
-           <div className='dark:text-gray-400 text-gray-600 dark:bg-gray-800'>
+           <div className='dark:text-gray-400 text-gray-600'>
              <Catalog toc={post.toc}/>
            </div>
           </>

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 dark:text-gray-200 text-center transform hover:scale-150 duration-200 flex justify-center items-center' title={locale.POST.TOP} >
+  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer text-white transform duration-200 flex justify-center items-center bg-blue-400 w-7 h-7 text-center' title={locale.POST.TOP} >
     <i className='fas fa-list-ol'/>
   </div>)
 }

themes/Hexo/components/TopNav.js

@@ -5,11 +5,11 @@ import { useEffect, useRef, useState } from 'react'
 import CategoryGroup from './CategoryGroup'
 import Collapse from './Collapse'
 import Logo from './Logo'
-import MenuButtonGroup from './MenuButtonGroup'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
 import CONFIG_HEXO from '../config_hexo'
 import MenuButtonGroupTop from './MenuButtonGroupTop'
+import MenuList from './MenuList'
 
 let windowTop = 0
 
@@ -108,7 +108,7 @@ const TopNav = (props) => {
 
       <Collapse isOpen={isOpen} className='shadow-xl'>
         <div className='bg-white pt-1 py-2 px-5'>
-          <MenuButtonGroup {...props}/>
+          <MenuList {...props}/>
         </div>
       </Collapse>
     </div>