d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-08 23:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

HEO 关闭移动端动画

Browse Source
This commit is contained in:
tangly1024.com
2024-05-31 15:33:59 +08:00
parent e16142f59c
commit 4b03ec2c78
4 changed files with 153 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
themes/heo/components/InfoCard.js
View File

@@ -1,6 +1,6 @@
import { siteConfig } from '@/lib/config'
import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons' import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
import LazyImage from '@/components/LazyImage' import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useState } from 'react' import { useState } from 'react'
@@ -19,41 +19,48 @@ export function InfoCard(props) {
// 在文章详情页特殊处理 // 在文章详情页特殊处理
const isSlugPage = router.pathname.indexOf('/[prefix]') === 0 const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
return ( return (
<Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'> <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
{/* 信息卡牌第一行 */} {/* 信息卡牌第一行 */}
<div className='flex justify-between'> <div className='flex justify-between'>
{/* 问候语 */} {/* 问候语 */}
<GreetingsWords /> <GreetingsWords />
<div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}> <div
<LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={siteConfig('AUTHOR')} /> className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
</div> <LazyImage
</div> src={siteInfo?.icon}
className='rounded-full'
width={isSlugPage ? 100 : 28}
alt={siteConfig('AUTHOR')}
/>
</div>
</div>
<h2 className='text-3xl font-extrabold mt-3'> <h2 className='text-3xl font-extrabold mt-3'>{siteConfig('AUTHOR')}</h2>
{siteConfig('AUTHOR')}
</h2>
{/* 公告栏 */} {/* 公告栏 */}
<div> <div>
<Announcement post={notice} style={{ color: 'white !important' }} /> <Announcement post={notice} style={{ color: 'white !important' }} />
</div> </div>
<div className='flex justify-between'> <div className='flex justify-between'>
<div className='flex space-x-3 hover:text-black dark:hover:text-white'> <div className='flex space-x-3 hover:text-black dark:hover:text-white'>
{/* 两个社交按钮 */} {/* 两个社交按钮 */}
<div className='bg-indigo-400 p-2 rounded-full transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'> <div className='bg-indigo-400 p-2 rounded-full transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
<Link href='/about'><GlobeAlt className={'w-6 h-6'} /></Link> <Link href='/about'>
</div> <GlobeAlt className={'w-6 h-6'} />
<div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'> </Link>
{siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}> </div>
<i className='fab fa-github text-xl' /> <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
</Link> {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && (
} <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
</div> <i className='fab fa-github text-xl' />
</div> </Link>
<MoreButton /> )}
</div> </div>
</Card> </div>
<MoreButton />
</div>
</Card>
) )
} }
@@ -69,9 +76,13 @@ function GreetingsWords() {
setGreeting(greetings[randomIndex]) setGreeting(greetings[randomIndex])
} }
return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50 hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg duration-200 transition-colors'> return (
{greeting} <div
onClick={handleChangeGreeting}
className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50 hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg duration-200 transition-colors'>
{greeting}
</div> </div>
)
} }
/** /**
@@ -79,10 +90,19 @@ function GreetingsWords() {
* @returns * @returns
*/ */
function MoreButton() { function MoreButton() {
return <Link href='/about'> return (
<div className={'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'}> <Link href='/about'>
<ArrowRightCircle className={'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'} /> <div
<div className='font-bold'>了解更多</div> className={
</div> 'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
}>
<ArrowRightCircle
className={
'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
}
/>
<div className='font-bold'>了解更多</div>
</div>
</Link> </Link>
)
} }

7
themes/heo/components/PostHeader.js
View File

@@ -22,7 +22,7 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
return ( return (
<div <div
id='post-bg' id='post-bg'
className='w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10 mb-5'> className='md:mb-0 -mb-5 w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10'>
<style jsx>{` <style jsx>{`
.coverdiv:after { .coverdiv:after {
position: absolute; position: absolute;
@@ -38,7 +38,6 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
`}</style> `}</style>
<div <div
style={{ backdropFilter: 'blur(15px)' }}
className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}> className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}>
{/* 文章背景图 */} {/* 文章背景图 */}
<div <div
@@ -46,10 +45,10 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
style={{ style={{
filter: 'blur(15px)' filter: 'blur(15px)'
}} }}
className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'> className='coverdiv lg:opacity-50 lg:translate-x-96 lg:rotate-12'>
<LazyImage <LazyImage
id='post-cover' id='post-cover'
className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' className='w-full h-full object-cover max-h-[50rem] min-w-[50vw] min-h-[20rem]'
src={headerImage} src={headerImage}
/> />
</div> </div>

141
themes/heo/components/WavesArea.js
View File

@@ -1,4 +1,5 @@
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import { useEffect, useState } from 'react'
/** /**
* 文章波浪动画 * 文章波浪动画
@@ -6,60 +7,96 @@ import { useGlobal } from '@/lib/global'
export default function WavesArea() { export default function WavesArea() {
const { isDarkMode } = useGlobal() const { isDarkMode } = useGlobal()
const color = isDarkMode ? '#18171d' : '#f7f9fe' const color = isDarkMode ? '#18171d' : '#f7f9fe'
const [showWave, setShowWave] = useState(true)
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 800) {
setShowWave(false)
} else {
setShowWave(true)
}
}
// Initial check
handleResize()
// Add event listener for window resize
window.addEventListener('resize', handleResize)
// Cleanup event listener on component unmount
return () => {
window.removeEventListener('resize', handleResize)
}
}, [])
if (!showWave) {
return null
}
return ( return (
<section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0"> <section className='main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0'>
<svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto"> <svg
<defs> className='waves-svg w-full h-[60px]'
<path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path> xmlns='http://www.w3.org/2000/svg'
</defs> xlink='http://www.w3.org/1999/xlink'
<g className="parallax"> viewBox='0 24 150 28'
<use href="#gentle-wave" x="48" y="0"></use> preserveAspectRatio='none'
<use href="#gentle-wave" x="48" y="3"></use> shapeRendering='auto'>
<use href="#gentle-wave" x="48" y="5"></use> <defs>
<use href="#gentle-wave" x="48" y="7"></use> <path
</g> id='gentle-wave'
</svg> d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z'></path>
<style jsx global>{` </defs>
/* Animation */ <g className='parallax'>
<use href='#gentle-wave' x='48' y='0'></use>
<use href='#gentle-wave' x='48' y='3'></use>
<use href='#gentle-wave' x='48' y='5'></use>
<use href='#gentle-wave' x='48' y='7'></use>
</g>
</svg>
<style jsx global>
{`
/* Animation */
.parallax > use { .parallax > use {
animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5)
} infinite;
.parallax > use:nth-child(1) { }
animation-delay: -2s; .parallax > use:nth-child(1) {
animation-duration: 7s; animation-delay: -2s;
fill: ${color}; animation-duration: 7s;
opacity: 0.5; fill: ${color};
} opacity: 0.5;
.parallax > use:nth-child(2) { }
animation-delay: -3s; .parallax > use:nth-child(2) {
animation-duration: 10s; animation-delay: -3s;
fill: ${color}; animation-duration: 10s;
opacity: 0.6; fill: ${color};
} opacity: 0.6;
.parallax > use:nth-child(3) { }
animation-delay: -4s; .parallax > use:nth-child(3) {
animation-duration: 13s; animation-delay: -4s;
fill: ${color}; animation-duration: 13s;
opacity: 0.7; fill: ${color};
} opacity: 0.7;
.parallax > use:nth-child(4) { }
animation-delay: -5s; .parallax > use:nth-child(4) {
animation-duration: 20s; animation-delay: -5s;
fill: ${color}; animation-duration: 20s;
} fill: ${color};
}
@keyframes move-forever {
0% { @keyframes move-forever {
transform: translate3d(-90px, 0, 0); 0% {
} transform: translate3d(-90px, 0, 0);
100% { }
transform: translate3d(85px, 0, 0); 100% {
} transform: translate3d(85px, 0, 0);
} }
`} }
</style> `}
</section> </style>
</section>
) )
} }

2
themes/heo/index.js
View File

@@ -297,7 +297,7 @@ const LayoutSlug = props => {
data-wow-delay='.2s' data-wow-delay='.2s'
className='wow fadeInUp'> className='wow fadeInUp'>
{/* Notion文章主体 */} {/* Notion文章主体 */}
<section className='px-5 justify-center mx-auto'> <section className='px-5 py-5 justify-center mx-auto'>
<WWAds orientation='horizontal' className='w-full' /> <WWAds orientation='horizontal' className='w-full' />
{post && <NotionPage post={post} />} {post && <NotionPage post={post} />}
<WWAds orientation='horizontal' className='w-full' /> <WWAds orientation='horizontal' className='w-full' />