bg-header

2026-05-14 07:26:52 +00:00 · 2023-06-10 18:51:34 +08:00
parent 425ebe4e3d
commit b10f1ffbfc
3 changed files with 28 additions and 104 deletions
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -1,16 +1,12 @@
 // import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
 import NavButtonGroup from './NavButtonGroup'
-import throttle from 'lodash.throttle'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'

 let wrapperTop = 0
-let windowTop = 0
-let autoScroll = true
-const enableAutoScroll = false // 是否开启自动吸附滚动

 /**
 *
@@ -20,6 +16,9 @@ const Header = props => {
  const [typed, changeType] = useState()
  const { siteInfo } = props
  const { locale } = useGlobal()
+  const scrollToWrapper = () => {
+    window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+  }
  useEffect(() => {
    updateHeaderHeight()

@@ -36,16 +35,8 @@ const Header = props => {
      )
    }

-    if (enableAutoScroll) {
-      scrollTrigger()
-      window.addEventListener('scroll', scrollTrigger)
-    }
-
    window.addEventListener('resize', updateHeaderHeight)
    return () => {
-      if (enableAutoScroll) {
-        window.removeEventListener('scroll', scrollTrigger)
-      }
      window.removeEventListener('resize', updateHeaderHeight)
    }
  })
@@ -57,58 +48,33 @@ const Header = props => {
    })
  }

-  const autoScrollEnd = () => {
-    if (autoScroll) {
-      windowTop = window.scrollY
-      autoScroll = false
-    }
-  }
-  const throttleMs = 200
-  const scrollTrigger = useCallback(throttle(() => {
-    if (screen.width <= 768) {
-      return
-    }
-
-    const scrollS = window.scrollY
-    // 自动滚动
-    if ((scrollS > windowTop) & (scrollS < window.innerHeight) && !autoScroll
-    ) {
-      autoScroll = true
-      window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-      autoScrollEnd()
-    }
-    if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
-      autoScroll = true
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      autoScrollEnd()
-    }
-    windowTop = scrollS
-  }, throttleMs))
-
  return (
-        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
-
-            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
-                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+        <header
+            id="header" style={{ zIndex: 1 }}
+            className="w-full h-screen relative bg-black"
+        >

            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+                {/* 站点标题 */}
                <div className='font-black text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                {/* 站点欢迎语 */}
                <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
                    <span id='typed' />
                </div>

-                {/* 首页导航插件 */}
+                {/* 首页导航大按钮 */}
                {CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props} />}

+                {/* 滚动按钮 */}
+                <div onClick={scrollToWrapper} className="z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white">
+                    <div className="opacity-70 animate-bounce text-xs">{locale.COMMON.START_READING}</div>
+                    <i className='opacity-70 animate-bounce fas fa-angle-down' />
+                </div>
            </div>

-            <div
-                onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-                className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
-            >
-                <div className="opacity-70 animate-bounce text-xs">{locale.COMMON.START_READING}</div>
-                <i className='opacity-70 animate-bounce fas fa-angle-down' />
-            </div>
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
+
        </header>
  )
 }
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -1,15 +1,11 @@
 // import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_MATERY from '../config_matery'
-import throttle from 'lodash.throttle'
 import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'

 let wrapperTop = 0
-let windowTop = 0
-let autoScroll = false
-const enableAutoScroll = false // 是否开启自动吸附滚动
-const throttleMs = 200

 /**
 *
@@ -21,12 +17,11 @@ const Header = props => {
  const { locale } = useGlobal()

  useEffect(() => {
-    scrollTrigger()
    updateHeaderHeight()
    if (!typed && window && document.getElementById('typed')) {
      changeType(
        new Typed('#typed', {
-          strings: CONFIG_MATERY.HOME_BANNER_GREETINGS,
+          strings: BLOG.GREETING_WORDS.split(','),
          typeSpeed: 200,
          backSpeed: 100,
          backDelay: 400,
@@ -35,51 +30,13 @@ const Header = props => {
        })
      )
    }
-    if (enableAutoScroll) {
-      scrollTrigger()
-      window.addEventListener('scroll', scrollTrigger)
-    }
+
    window.addEventListener('resize', updateHeaderHeight)
    return () => {
-      if (enableAutoScroll) {
-        window.removeEventListener('scroll', scrollTrigger)
-      } window.removeEventListener('resize', updateHeaderHeight)
+      window.removeEventListener('resize', updateHeaderHeight)
    }
  }, [])

-  const autoScrollEnd = () => {
-    if (autoScroll) {
-      windowTop = window.scrollY
-      autoScroll = false
-    }
-  }
-
-  /**
-     * 吸附滚动，移动端关闭
-     * @returns
-     */
-  const scrollTrigger = useCallback(throttle(() => {
-    if (screen.width <= 768) {
-      return
-    }
-
-    const scrollS = window.scrollY
-
-    // 自动滚动
-    if ((scrollS > windowTop) & (scrollS < window.innerHeight) && !autoScroll
-    ) {
-      autoScroll = true
-      window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-      setTimeout(autoScrollEnd, 500)
-    }
-    if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
-      autoScroll = true
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      setTimeout(autoScrollEnd, 500)
-    }
-    windowTop = scrollS
-  }, throttleMs))
-
  function updateHeaderHeight() {
    requestAnimationFrame(() => {
      const wrapperElement = document.getElementById('wrapper')
@@ -90,11 +47,11 @@ const Header = props => {
  return (
        <header
            id="header" style={{ zIndex: 1 }}
-            className=" w-full h-screen bg-black text-white relative"
+            className=" w-full h-screen relative bg-black"
        >

-            <div className="absolute flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
+            <div className="text-white absolute flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
                    <span id='typed' />
                </div>
--- a/themes/matery/config_matery.js
+++ b/themes/matery/config_matery.js
@@ -1,5 +1,6 @@
 const CONFIG_MATERY = {
  HOME_BANNER_ENABLE: true,
+  // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
  HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字

  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮