d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-25 07:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

bg-header

Browse Source
This commit is contained in:
tangly1024
2023-06-10 18:51:34 +08:00
parent 425ebe4e3d
commit b10f1ffbfc
3 changed files with 28 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
themes/hexo/components/Header.js
View File

@@ -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>
)
}