From 717382def4929b367ffa1a8f31715b96c3cfcba7 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Wed, 31 Jan 2024 21:24:38 +0800
Subject: [PATCH] =?UTF-8?q?Hexo=E4=B8=BB=E9=A2=98=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/hexo/components/Logo.js         |  2 +-
 themes/hexo/components/MenuItemDrop.js |  8 ++---
 themes/hexo/components/SearchButton.js |  6 ++--
 themes/hexo/components/SideRight.js    |  4 +--
 themes/hexo/components/TopNav.js       | 48 +++++++++++---------------
 themes/hexo/index.js                   |  2 +-
 6 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/themes/hexo/components/Logo.js b/themes/hexo/components/Logo.js
index f753cd83..30054acc 100644
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -5,7 +5,7 @@ const Logo = props => {
   return (
     <Link href='/' passHref legacyBehavior>
       <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className='font-medium text-lg p-1.5 rounded dark:border-white menu-link transform duration-200'> {siteConfig('TITLE') }</div>
+        <div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'> {siteConfig('TITLE') }</div>
       </div>
     </Link>
   )
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index 6eeffc82..6f999394 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -14,22 +14,22 @@ export const MenuItemDrop = ({ link }) => {
         {!hasSubMenu &&
             <Link
                 href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                className="font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
                 {link?.icon && <i className={link?.icon}/>} {link?.name}
                 {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
             </Link>}
 
         {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
                 {link?.icon && <i className={link?.icon}/>} {link?.name}
                 <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
             </div>
         </>}
 
         {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block  `}>
             {link.subMenus.map((sLink, index) => {
-              return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+              return <li key={index} className='cursor-pointer hover:bg-indigo-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                     </Link>
diff --git a/themes/hexo/components/SearchButton.js b/themes/hexo/components/SearchButton.js
index 47d1da6f..6b49522c 100644
--- a/themes/hexo/components/SearchButton.js
+++ b/themes/hexo/components/SearchButton.js
@@ -1,8 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
-import { useRef } from 'react'
 import { useHexoGlobal } from '..'
 
 /**
@@ -12,7 +10,7 @@ import { useHexoGlobal } from '..'
 export default function SearchButton(props) {
   const { locale } = useGlobal()
   const router = useRouter()
-  const { searchModal} = useHexoGlobal()
+  const { searchModal } = useHexoGlobal()
 
   function handleSearch() {
     if (siteConfig('ALGOLIA_APP_ID')) {
@@ -23,7 +21,7 @@ export default function SearchButton(props) {
   }
 
   return <>
-        <div onClick={handleSearch} title={locale.NAV.SEARCH} alt={locale.NAV.SEARCH} className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
+        <div onClick={handleSearch} title={locale.NAV.SEARCH} alt={locale.NAV.SEARCH} className='cursor-pointer dark:text-white hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
             <i title={locale.NAV.SEARCH} className="fa-solid fa-magnifying-glass" />
         </div>
     </>
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index 497a7b2f..73d26593 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -34,7 +34,7 @@ const FaceBookPage = dynamic(
 export default function SideRight(props) {
   const {
     post, currentCategory, categories, latestPosts, tags,
-    currentTag, showCategory, showTag, rightAreaSlot, notice
+    currentTag, showCategory, showTag, rightAreaSlot, notice, className
   } = props
 
   const { locale } = useGlobal()
@@ -45,7 +45,7 @@ export default function SideRight(props) {
   }
 
   return (
-    <div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
+    <div id='sideRight' className={className}>
       <InfoCard {...props} />
       {siteConfig('HEXO_WIDGET_ANALYTICS', null, CONFIG) && <AnalyticsCard {...props} />}
 
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 8966aa51..541a99a7 100644
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -6,13 +6,13 @@ import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
 import { MenuListTop } from './MenuListTop'
-import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
 import SideBar from './SideBar'
 import SideBarDrawer from './SideBarDrawer'
 import { siteConfig } from '@/lib/config'
 import SearchButton from './SearchButton'
 import CONFIG from '../config'
+import { useRouter } from 'next/router'
 
 let windowTop = 0
 
@@ -25,11 +25,9 @@ const TopNav = props => {
   const searchDrawer = useRef()
   const { tags, currentTag, categories, currentCategory } = props
   const { locale } = useGlobal()
-  const { isDarkMode } = useGlobal()
   const router = useRouter()
-
   const [isOpen, changeShow] = useState(false)
-  const showSearchButton = siteConfig('HEXO_MENU_SEARCH',false,CONFIG)
+  const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -41,37 +39,46 @@ const TopNav = props => {
 
   // 监听滚动
   useEffect(() => {
-    scrollTrigger()
-    window.addEventListener('scroll', scrollTrigger)
+    window.addEventListener('scroll', topNavStyleHandler)
+    router.events.on('routeChangeComplete', topNavStyleHandler)
     return () => {
-      window.removeEventListener('scroll', scrollTrigger)
+      router.events.off('routeChangeComplete', topNavStyleHandler)
+      window.removeEventListener('scroll', topNavStyleHandler)
     }
   }, [])
 
   const throttleMs = 200
 
-  const scrollTrigger = useCallback(throttle(() => {
+  const topNavStyleHandler = useCallback(throttle(() => {
     const scrollS = window.scrollY
     const nav = document.querySelector('#sticky-nav')
+    // 首页和文章页会有头图
     const header = document.querySelector('#header')
-    // 是否将导航栏透明
-    const navTransparent = (scrollS < document.documentElement.clientHeight - 12 && router.route === '/') || scrollS < 300 // 透明导航条的条件
+    // 导航栏和头图是否重叠
+    const scrollInHeader = header && (scrollS < 10 || scrollS < header?.clientHeight - 50) // 透明导航条的条件
 
-    if (header && navTransparent) {
+    // const textWhite = header && scrollInHeader
+
+    if (scrollInHeader) {
       nav && nav.classList.replace('bg-white', 'bg-none')
-      nav && nav.classList.replace('text-black', 'text-white')
       nav && nav.classList.replace('border', 'border-transparent')
       nav && nav.classList.replace('drop-shadow-md', 'shadow-none')
       nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
     } else {
       nav && nav.classList.replace('bg-none', 'bg-white')
-      nav && nav.classList.replace('text-white', 'text-black')
       nav && nav.classList.replace('border-transparent', 'border')
       nav && nav.classList.replace('shadow-none', 'drop-shadow-md')
       nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
     }
 
-    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    if (scrollInHeader) {
+      nav && nav.classList.replace('text-black', 'text-white')
+    } else {
+      nav && nav.classList.replace('text-white', 'text-black')
+    }
+
+    // 导航栏不在头图里，且页面向下滚动一定程度 隐藏导航栏
+    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight + 100)
     if (!showNav) {
       nav && nav.classList.replace('top-0', '-top-20')
       windowTop = scrollS
@@ -79,22 +86,9 @@ const TopNav = props => {
       nav && nav.classList.replace('-top-20', 'top-0')
       windowTop = scrollS
     }
-    navDarkMode()
   }, throttleMs)
   )
 
-  const navDarkMode = () => {
-    const nav = document.getElementById('sticky-nav')
-    const header = document.querySelector('#header')
-    if (!isDarkMode && nav && header) {
-      if (window.scrollY < header.clientHeight) {
-        nav?.classList?.add('dark')
-      } else {
-        nav?.classList?.remove('dark')
-      }
-    }
-  }
-
   const searchDrawerSlot = <>
         {categories && (
             <section className='mt-8'>
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index a03ada6d..479ac17d 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -121,7 +121,7 @@ const LayoutBase = props => {
                     </div>
 
                     {/* 右侧栏 */}
-                    <SideRight {...props} />
+                    <SideRight {...props} className={`space-y-4 lg:w-80 pt-4 ${post ? 'lg:pt-0' : 'lg:pt-4'}`} />
                 </div>
             </main>