Merge pull request #1854 from tangly1024/fix/hexo-style

Hexo主题微调
2026-05-14 07:26:52 +00:00 · 2024-01-31 21:24:58 +08:00
parent 765ba1cb25 717382def4
commit 80a141140a
6 changed files with 31 additions and 39 deletions
--- 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>
  )
--- 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>
--- 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>
    </>
--- 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} />}

--- 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'>
--- 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>