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

heo 动画微调

Browse Source
This commit is contained in:
tangly1024.com
2024-08-30 18:15:23 +08:00
parent 053fc6576b
commit ffa8511439
6 changed files with 51 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/LoadingCover.js
View File

@@ -13,7 +13,7 @@ export default function LoadingCover() {
if (onLoading) {
setIsVisible(true)
} else {
const timeout = setTimeout(() => setIsVisible(false), 1000) // 等待淡出动画结束
const timeout = setTimeout(() => setIsVisible(false), 1500) // 等待淡出动画结束
return () => clearTimeout(timeout)
}
}, [onLoading])
@@ -30,7 +30,7 @@ export default function LoadingCover() {
<div
id='loading-cover'
onClick={handleClick}
className={`dark:text-white text-black bg-white dark:bg-black animate__animated ${
className={`dark:text-white text-black bg-white dark:bg-black animate__animated animate__faster ${
onLoading ? 'animate__fadeIn' : 'animate__fadeOut'
} flex flex-col justify-center z-50 w-full h-screen fixed top-0 left-0`}>
<div className='mx-auto'>

16
themes/heo/components/Announcement.js
View File

@@ -4,13 +4,15 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
const Announcement = ({ post, className }) => {
if (post?.blockMap) {
return <div >
{post && (
<div id="announcement-content">
<NotionPage post={post} />
</div>
)}
</div>
return (
<div>
{post && (
<div id='announcement-content'>
<NotionPage post={post} />
</div>
)}
</div>
)
} else {
return <></>
}

4
themes/heo/components/CategoryBar.js
View File

@@ -32,8 +32,8 @@ export default function CategoryBar(props) {
return (
<div
id='category-bar'
className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
className={`wow fadeInUp flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
<div
id='category-bar-items'
ref={categoryBarItemsRef}

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

@@ -23,11 +23,12 @@ export function InfoCard(props) {
const url2 = siteConfig('HEO_INFO_CARD_URL2', null, CONFIG)
const icon2 = siteConfig('HEO_INFO_CARD_ICON2', null, CONFIG)
return (
<Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
<Card className='wow fadeInUp bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
{/* 信息卡牌第一行 */}
<div className='flex justify-between'>
{/* 问候语 */}
<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`}>
<LazyImage
@@ -42,9 +43,7 @@ export function InfoCard(props) {
<h2 className='text-3xl font-extrabold mt-3'>{siteConfig('AUTHOR')}</h2>
{/* 公告栏 */}
<div>
<Announcement post={notice} style={{ color: 'white !important' }} />
</div>
<Announcement post={notice} style={{ color: 'white !important' }} />
<div className='flex justify-between'>
<div className='flex space-x-3 hover:text-black dark:hover:text-white'>

10
themes/heo/components/SideRight.js
View File

@@ -34,23 +34,25 @@ export default function SideRight(props) {
return (
<div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
<InfoCard {...props} className='w-72' />
<InfoCard {...props} className='w-72 wow fadeInUp' />
<div className='sticky top-20 space-y-4'>
{/* 文章页显示目录 */}
{post && post.toc && post.toc.length > 0 && (
<Card className='bg-white dark:bg-[#1e1e1e]'>
<Card className='bg-white dark:bg-[#1e1e1e] wow fadeInUp'>
<Catalog toc={post.toc} />
</Card>
)}
{/* 联系交流群 */}
<TouchMeCard />
<div className='wow fadeInUp'>
<TouchMeCard />
</div>
{/* 最新文章列表 */}
<div
className={
'border hover:border-indigo-600 dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
'border wow fadeInUp hover:border-indigo-600 dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
}>
<LatestPostsGroupMini {...props} />
</div>

49
themes/heo/components/TouchMeCard.js
View File

@@ -1,8 +1,7 @@
import FlipCard from '@/components/FlipCard'
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
/**
* 交流频道
@@ -13,23 +12,33 @@ export default function TouchMeCard() {
return <></>
}
return (
<div className={'relative h-28 text-white flex flex-col'}>
<FlipCard
className='cursor-pointer lg:p-6 p-4 border rounded-xl bg-[#4f65f0] dark:bg-yellow-600 dark:border-gray-600'
frontContent={
<div className='h-full'>
<h2 className='font-[1000] text-3xl'>{siteConfig('HEO_SOCIAL_CARD_TITLE_1', null, CONFIG)}</h2>
<h3 className='pt-2'>{siteConfig('HEO_SOCIAL_CARD_TITLE_2', null, CONFIG)}</h3>
<div className='absolute left-0 top-0 w-full h-full' style={{ background: 'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat' }}></div>
</div>}
backContent={<Link href={siteConfig('HEO_SOCIAL_CARD_URL', null, CONFIG)}>
<div className='font-[1000] text-xl h-full'>
{siteConfig('HEO_SOCIAL_CARD_TITLE_3', null, CONFIG)}
</div>
</Link>}
/>
</div>
<div className={'relative h-28 text-white flex flex-col'}>
<FlipCard
className='cursor-pointer lg:p-6 p-4 border rounded-xl bg-[#4f65f0] dark:bg-yellow-600 dark:border-gray-600'
frontContent={
<div className='h-full'>
<h2 className='font-[1000] text-3xl'>
{siteConfig('HEO_SOCIAL_CARD_TITLE_1', null, CONFIG)}
</h2>
<h3 className='pt-2'>
{siteConfig('HEO_SOCIAL_CARD_TITLE_2', null, CONFIG)}
</h3>
<div
className='absolute left-0 top-0 w-full h-full'
style={{
background:
'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat'
}}></div>
</div>
}
backContent={
<Link href={siteConfig('HEO_SOCIAL_CARD_URL', null, CONFIG)}>
<div className='font-[1000] text-xl h-full'>
{siteConfig('HEO_SOCIAL_CARD_TITLE_3', null, CONFIG)}
</div>
</Link>
}
/>
</div>
)
}