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

Merge pull request #1127 from tangly1024/feat/loading-animation

Browse Source 
Feat/loading animation
This commit is contained in:
tangly1024
2023-06-10 18:54:12 +08:00
committed by GitHub
parent e5d71910ed a8fa08cbd6
commit c93932cc66
21 changed files with 141 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Loading.js
View File

@@ -1,11 +1,13 @@
/**
* 异步文件加载过程中的占位符
* 异步文件加载时的占位符
* @returns
*/
const Loading = (props) => {
return <div id="loading-bg" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
<i className='fas fa-spinner animate-spin text-3xl' />
return <div id="loading-container" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
<div id="loading-wrapper">
<div className="loading"> <i className="fas fa-spinner animate-spin text-3xl "/></div>
</div>
</div>
}
export default Loading

25
pages/404.js
View File

@@ -1,6 +1,15 @@
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import Loading from '@/components/Loading'
import { Suspense, useEffect, useState } from 'react'
import BLOG from '@/blog.config'
const layout = 'Layout404'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 404
@@ -10,8 +19,20 @@ import dynamic from 'next/dynamic'
const NoFound = props => {
const { theme, siteInfo } = useGlobal()
const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`))
return <Layout404 {...props} meta={meta}/>
const [Layout, setLayout] = useState(DefaultLayout)
useEffect(() => {
const loadLayout = async () => {
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
}
export async function getStaticProps () {

7
pages/[...slug].js
View File

@@ -12,10 +12,12 @@ import md5 from 'js-md5'
import dynamic from 'next/dynamic'
import Loading from '@/components/Loading'
const layout = 'LayoutSlug'
/**
* 懒加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSlug`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 根据notion的slug访问页面
@@ -31,7 +33,8 @@ const Slug = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSlug`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

8
pages/archive/index.js
View File

@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutArchive'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutArchive`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const ArchiveIndex = props => {
const { siteInfo } = props
@@ -18,7 +19,8 @@ const ArchiveIndex = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutArchive`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

8
pages/category/[category]/index.js
View File

@@ -3,13 +3,13 @@ import React, { Suspense, useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutCategory'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategory`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 分类页
@@ -20,10 +20,12 @@ export default function Category(props) {
const { siteInfo } = props
const { locale, theme } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

9
pages/category/[category]/page/[page].js
View File

@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutCategory'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategory`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 分类页
@@ -20,12 +21,12 @@ export default function Category(props) {
const { theme } = useGlobal()
const { siteInfo } = props
const { locale } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

8
pages/category/index.js
View File

@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import BLOG from '@/blog.config'
import Loading from '@/components/Loading'
const layout = 'LayoutCategoryIndex'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategoryIndex`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 分类首页
@@ -25,7 +26,8 @@ export default function Category(props) {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

18
pages/index.js
View File

@@ -8,10 +8,12 @@ import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutIndex'
/**
* 懒加载默认主题
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutIndex`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 首页布局
@@ -21,17 +23,19 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutIndex`)
const Index = props => {
// 动态切换主题
const { theme } = useGlobal()
const [Layout, setLayoutIndex] = useState(DefaultLayout)
const [Layout, setLayout] = useState(DefaultLayout)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayoutIndex(dynamic(() => import(`@/themes/${theme}/LayoutIndex`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Suspense fallback={<Loading />}>
<Layout {...props} />
</Suspense>
}
/**

14
pages/page/[page].js
View File

@@ -5,10 +5,13 @@ import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutPage'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutPage`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 文章列表分页
@@ -22,7 +25,8 @@ const Page = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutPage`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
@@ -37,9 +41,9 @@ const Page = props => {
props = { ...props, meta }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Suspense fallback={<Loading />}>
<Layout {...props} />
</Suspense>
}
export async function getStaticPaths() {

6
pages/search/[keyword]/index.js
View File

@@ -6,10 +6,11 @@ import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutSearch'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Index = props => {
const { keyword, siteInfo } = props
@@ -18,7 +19,8 @@ const Index = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

7
pages/search/[keyword]/page/[page].js
View File

@@ -6,10 +6,11 @@ import BLOG from '@/blog.config'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutSearch'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Index = props => {
const { keyword, siteInfo } = props
@@ -18,10 +19,12 @@ const Index = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const meta = {
title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
description: siteInfo?.title,

19
pages/search/index.js
View File

@@ -5,27 +5,29 @@ import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutSearch'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Search = props => {
const { posts, siteInfo } = props
const { theme } = useGlobal()
const { theme, locale } = useGlobal()
const [Layout, setLayout] = useState(DefaultLayout)
const router = useRouter()
const keyword = getSearchKey(router)
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])
const router = useRouter()
let filteredPosts
const keyword = getSearchKey(router)
// 静态过滤
if (keyword) {
filteredPosts = posts.filter(post => {
@@ -39,7 +41,6 @@ const Search = props => {
filteredPosts = []
}
const { locale } = useGlobal()
const meta = {
title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
description: siteInfo?.description,
@@ -50,9 +51,9 @@ const Search = props => {
props = { ...props, meta, posts: { filteredPosts } }
return <Suspense fallback={<Loading/>}>
<Layout {...props} />
</Suspense>
return <Suspense fallback={<Loading />}>
<Layout {...props} />
</Suspense>
}
/**

7
pages/tag/[tag]/index.js
View File

@@ -4,11 +4,11 @@ import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutTag'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTag`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Tag = props => {
const { theme } = useGlobal()
@@ -19,7 +19,8 @@ const Tag = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

6
pages/tag/[tag]/page/[page].js
View File

@@ -5,10 +5,11 @@ import dynamic from 'next/dynamic'
import { Suspense, useEffect, useState } from 'react'
import Loading from '@/components/Loading'
const layout = 'LayoutTag'
/**
* 加载默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTag`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
const Tag = props => {
const { theme } = useGlobal()
@@ -18,7 +19,8 @@ const Tag = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

6
pages/tag/index.js
View File

@@ -4,10 +4,11 @@ import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import Loading from '@/components/Loading'
const layout = 'LayoutTagIndex'
/**
* 默认主题
*/
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTagIndex`), { ssr: true })
const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
/**
* 标签首页
@@ -22,7 +23,8 @@ const TagIndex = props => {
// 切换主题
useEffect(() => {
const loadLayout = async () => {
setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`)))
const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
setLayout(newLayout)
}
loadLayout()
}, [theme])

4
themes/fukasawa/LayoutBase.js
View File

@@ -43,8 +43,8 @@ const LayoutBase = (props) => {
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
<AsideLeft {...props} slot={leftAreaSlot}/>
<main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
<main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
<div> {headerSlot} </div>
<div> {onLoading ? LoadingCover : children} </div>
</div>

2
themes/fukasawa/components/MenuItemDrop.js
View File

@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
</div>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} py-1 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link?.subMenus?.map(sLink => {
return <li key={sLink.id}>
<Link href={sLink.to} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>

4
themes/fukasawa/components/MenuList.js
View File

@@ -30,10 +30,10 @@ export const MenuList = (props) => {
}
return (<>
<nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
<nav id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
{links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
</nav>
<nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
<nav id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
{links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={props.onHeightChange}/>)}
</nav>
</>

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

64
themes/matery/components/Header.js
View File

@@ -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,14 +47,17 @@ 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>
{/* 滚动按钮 */}
<div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
<i className='animate-bounce fas fa-angle-double-down' /> <span>{locale.COMMON.START_READING}</span>
@@ -105,7 +65,7 @@ const Header = props => {
</div>
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
</header>
)

1
themes/matery/config_matery.js
View File

@@ -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, // 首页是否显示分类大图标按钮