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

proxio主题加入部分动画

Browse Source
This commit is contained in:
tangly1024
2025-04-12 22:58:46 +08:00
parent d43d1bce56
commit 2d3a3ac649
11 changed files with 450 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/proxio/components/Announcement.js
View File

@@ -13,7 +13,7 @@ const Announcement = ({ post, className }) => {
<div className={className}>
<section
id='announcement-wrapper'
className='rounded-xl px-2'>
className='rounded-xl px-2 wow fadeInUp' data-wow-delay='.2s'>
{/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
{post && (
<div id='announcement-content'>

18
themes/proxio/components/Blog.js
View File

@@ -15,7 +15,7 @@ export const Blog = ({ posts }) => {
<section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'>
<div className='container mx-auto'>
{/* 区块标题文字 */}
<div className='-mx-4 flex flex-wrap justify-center'>
<div className='-mx-4 flex flex-wrap justify-center wow fadeInUp' data-wow-delay='.2s'>
<div className='w-full px-4'>
<div className='mx-auto mb-[60px] max-w-[485px] text-center'>
<span className='mb-2 block text-lg font-semibold text-primary'>
@@ -33,21 +33,25 @@ export const Blog = ({ posts }) => {
return (
<div key={index} className='w-full px-4'>
<div
className='wow fadeInUp group mb-10'
className='wow fadeInUp group mb-10 relative overflow-hidden rounded-[10px]'
data-wow-delay='.1s'>
<div className='mb-8 overflow-hidden rounded-[5px]'>
{/* 图片部分 */}
<div className='relative'>
{item.pageCoverThumbnail && (
<Link href={item?.href} className='block'>
<LazyImage
src={item.pageCoverThumbnail}
alt={item.title}
className='w-full h-80 object-cover transition group-hover:rotate-6 group-hover:scale-125'
className='w-full h-80 object-cover transition-transform duration-500'
/>
</Link>
)}
{/* 遮罩层，仅覆盖图片部分 */}
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-opacity duration-500 group-hover:opacity-0'></div>
</div>
<div>
<span className='mb-6 inline-block rounded-[5px] bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
{/* 内容部分 */}
<div className='relative z-10 p-4'>
<span className='mb-6 inline-block rounded-[10px] bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
{item.publishDay}
</span>
<h3>
@@ -71,4 +75,4 @@ export const Blog = ({ posts }) => {
{/* <!-- ====== Blog Section End --> */}
</>
)
}
}

10
themes/proxio/components/CTA.js
View File

@@ -13,26 +13,26 @@ export const CTA = () => {
return (
<>
{/* <!-- ====== CTA Section Start --> */}
<section className='relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]'>
<section className='relative z-10 overflow-hidden bg-gray-1 dark:bg-dark-2 py-20 lg:py-[115px]'>
<div className='container mx-auto'>
<div className='relative overflow-hidden'>
<div className='-mx-4 flex flex-wrap items-stretch'>
<div className='w-full px-4'>
<div className='w-full px-4 mb-2'>
<div className='mx-auto max-w-[570px] text-center'>
<h2 className='mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]'>
<h2 className='mb-2.5 text-3xl font-bold dark:text-white md:text-[38px] md:leading-[1.44]'>
<span>{siteConfig('PROXIO_CTA_TITLE')}</span>
<span className='text-3xl font-normal md:text-[40px]'>
{siteConfig('PROXIO_CTA_TITLE_2')}
</span>
</h2>
<p className='mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white'>
<p className='mx-auto mb-6 max-w-[515px] text-base leading-[1.5] dark:text-white'>
{siteConfig('PROXIO_CTA_DESCRIPTION')}
</p>
{siteConfig('PROXIO_CTA_BUTTON') && (
<>
<Link
href={siteConfig('PROXIO_CTA_BUTTON_URL', '')}
className='inline-block rounded-md border border-transparent bg-secondary px-7 py-3 text-base font-medium text-white transition hover:bg-[#0BB489]'>
className='inline-flex items-center justify-center rounded-2xl bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2'>
{siteConfig('PROXIO_CTA_BUTTON_TEXT')}
</Link>
</>

228
themes/proxio/components/Footer.js
View File

@@ -1,168 +1,96 @@
import AnalyticsBusuanzi from '@/components/AnalyticsBusuanzi'
import { BeiAnGongAn } from '@/components/BeiAnGongAn'
import BeiAnSite from '@/components/BeiAnSite'
import CopyRightDate from '@/components/CopyRightDate'
import DarkModeButton from '@/components/DarkModeButton'
import LazyImage from '@/components/LazyImage'
import PoweredBy from '@/components/PoweredBy'
import { siteConfig } from '@/lib/config'
import SocialButton from '@/themes/fukasawa/components/SocialButton'
import { Logo } from './Logo'
import { SVGFooterCircleBG } from './svg/SVGFooterCircleBG'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CONFIG from '../config'
import SocialButton from './SocialButton'
/**
* 网页底脚
*/
export const Footer = ({ title }) => {
const { siteInfo } = useGlobal()
const PROXIO_FOOTER_LINKS = siteConfig('PROXIO_FOOTER_LINKS', [], CONFIG)
/* eslint-disable @next/next/no-img-element */
export const Footer = props => {
const footerPostCount = siteConfig('PROXIO_FOOTER_POST_COUNT', 2)
const latestPosts = props?.latestPosts
? props?.latestPosts.slice(0, footerPostCount)
: []
const PROXIO_FOOTER_LINK_GROUP = siteConfig('PROXIO_FOOTER_LINK_GROUP', [])
return (
<>
{/* <!-- ====== Footer Section Start --> */}
<footer
className='wow fadeInUp relative z-10 bg-[#090E34] pt-20 lg:pt-[100px]'
data-wow-delay='.15s'>
<div className='container'>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4 sm:w-1/2 md:w-1/2 lg:w-4/12 xl:w-3/12'>
<div className='mb-10 w-full'>
<a className='-mx-4 mb-6 inline-block max-w-[160px]'>
<Logo white={true} />
</a>
<p className='mb-8 max-w-[270px] text-base text-gray-7'>
{siteConfig('PROXIO_FOOTER_SLOGAN')}
</p>
<div className='-mx-3 flex items-center'>
<div className='mx-3'>
<SocialButton />
</div>
</div>
</div>
<footer
id='footer-bottom'
className='z-10 justify-center m-auto w-full p-6 relative container'>
<div className='max-w-screen-3xl w-full mx-auto '>
{/* 信息与链接区块 */}
<div className='w-full flex lg:flex-row flex-col justify-between py-16'>
<div className='gap-y-2 flex flex-col items-start dark:text-gray-200'>
<div className='flex gap-x-1'>
<LazyImage
src={siteInfo?.icon}
className='rounded-full'
width={24}
alt={siteConfig('AUTHOR')}
/>
<h1 className='text-lg'>{title}</h1>
<span
className='underline font-bold justify-start'>
{siteConfig('AUTHOR')}
</span>
</div>
<div className='px-1'>{siteConfig('DESCRIPTION')}</div>
<div className='px-1'>{siteConfig('CONTACT_EMAIL')}</div>
</div>
{/* 中间三列菜单组 */}
{PROXIO_FOOTER_LINK_GROUP?.map((item, index) => {
{/* 右侧链接区块 */}
<div className='flex gap-x-4'>
{PROXIO_FOOTER_LINKS?.map((group, index) => {
return (
<div
key={index}
className='w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12'>
<div className='mb-10 w-full'>
<h4 className='mb-9 text-lg font-semibold text-white'>
{item.TITLE}
</h4>
<ul>
{item?.LINK_GROUP?.map((l, i) => {
return (
<li key={i}>
<Link
href={l.URL}
className='mb-3 inline-block text-base text-gray-7 hover:text-primary'>
{l.TITLE}
</Link>
</li>
)
})}
</ul>
<div key={index}>
<div className='font-bold text-xl dark:text-white lg:pb-8 pb-4'>
{group.name}
</div>
<div className='flex flex-col gap-y-2'>
{group?.menus?.map((menu, index) => {
return (
<div key={index}>
<Link href={menu.href} className='hover:underline dark:text-gray-200'>
{menu.title}
</Link>
</div>
)
})}
</div>
</div>
)
})}
</div>
</div>
{/* 页脚右侧最新博文 */}
<div className='w-full px-4 md:w-2/3 lg:w-6/12 xl:w-3/12'>
<div className='mb-10 w-full'>
<h4 className='mb-9 text-lg font-semibold text-white'>
{siteConfig('PROXIO_FOOTER_BLOG_LATEST_TITLE')}
</h4>
{/* 展示两条最新博客文章 */}
<div className='flex flex-col gap-8'>
{latestPosts?.map((item, index) => {
return (
<Link
key={index}
href={item?.href}
className='group flex items-center gap-[22px]'>
{item.pageCoverThumbnail && (
<div className='overflow-hidden rounded w-20 h-12'>
<img
src={item.pageCoverThumbnail}
alt={item.title}
/>
</div>
)}
<span className='line-clamp-2 max-w-[180px] text-base text-gray-7 group-hover:text-white'>
{item.title}
</span>
</Link>
)
})}
</div>
</div>
{/* 页脚 */}
<div className='dark:text-gray-200 py-4 flex flex-col lg:flex-row justify-between items-center border-t border-gray-600'>
<div className='flex gap-x-2 flex-wrap justify-between items-center'>
<CopyRightDate />
<PoweredBy />
</div>
<DarkModeButton className='text-white' />
<div className='flex justify-between items-center gap-x-2'>
<div className='flex items-center gap-x-4'>
<AnalyticsBusuanzi />
<SocialButton />
</div>
</div>
</div>
{/* 底部版权信息相关 */}
<div className='mt-12 border-t border-[#8890A4] border-opacity-40 py-8 lg:mt-[60px]'>
<div className='container'>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4 md:w-2/3 lg:w-1/2'>
<div className='my-1'>
<div className='-mx-3 flex items-center justify-center md:justify-start'>
<Link
href={siteConfig('PROXIO_FOOTER_PRIVACY_POLICY_URL', '')}
className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
{siteConfig('PROXIO_FOOTER_PRIVACY_POLICY_TEXT')}
</Link>
<Link
href={siteConfig(
'PROXIO_FOOTER_PRIVACY_LEGAL_NOTICE_URL', ''
)}
className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
{siteConfig('PROXIO_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT')}
</Link>
<Link
href={siteConfig(
'PROXIO_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL', ''
)}
className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
{siteConfig(
'PROXIO_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT', ''
)}
</Link>
</div>
</div>
</div>
<div className='w-full px-4 md:w-1/3 lg:w-1/2'>
<div className='my-1 flex justify-center md:justify-end'>
<p className='text-base text-gray-7'>
Designed and Developed by
<a
href='https://github.com/tangly1024/NotionNext'
rel='nofollow noopner noreferrer'
target='_blank'
className='px-1 text-gray-1 hover:underline'>
NotionNext {siteConfig('VERSION')}
</a>
</p>
</div>
</div>
</div>
</div>
{/* 备案 */}
<div className='dark:text-gray-200 w-full text-center flex flex-wrap items-center justify-center gap-x-2'>
<BeiAnSite />
<BeiAnGongAn />
</div>
{/* Footer 背景 */}
<div>
<span className='absolute left-0 top-0 z-[-1]'>
<img src='/images/starter/footer/shape-1.svg' alt='' />
</span>
<span className='absolute bottom-0 right-0 z-[-1]'>
<img src='/images/starter/footer/shape-3.svg' alt='' />
</span>
<span className='absolute right-0 top-0 z-[-1]'>
<SVGFooterCircleBG />
</span>
</div>
</footer>
{/* <!-- ====== Footer Section End --> */}
</>
</div>
</footer>
)
}
}

168
themes/proxio/components/LoadingCover.js Normal file
View File

@@ -0,0 +1,168 @@
import { siteConfig } from '@/lib/config';
import { useEffect, useState } from 'react';
const LoadingCover = ({ onFinishLoading }) => {
const [isVisible, setIsVisible] = useState(true);
const welcomeText = siteConfig('PROXIO_WELCOME_TEXT', '欢迎来到我们的网站！');
// 定义颜色变量
const colors = {
backgroundStart: '#1a1a1a', // 深灰色
backgroundMiddle: '#4d4d4d', // 中灰色
backgroundEnd: '#e6e6e6', // 浅灰色
textColor: '#ffffff', // 白色
rippleColor: 'rgba(255, 255, 255, 0.6)', // 半透明白色
};
useEffect(() => {
const pageContainer = document.getElementById('pageContainer');
const handleClick = (e) => {
// 创建扩散光圈
const ripple = document.createElement('div');
ripple.classList.add('ripple');
ripple.style.left = `${e.clientX - 10}px`;
ripple.style.top = `${e.clientY - 10}px`;
document.body.appendChild(ripple);
// 添加页面缩放 + 模糊动画
pageContainer.classList.add('page-clicked');
// 模拟加载完成，调用回调函数
setTimeout(() => {
setIsVisible(false); // 淡出动画
setTimeout(() => {
if (onFinishLoading) {
onFinishLoading();
}
}, 600); // 等待淡出动画完成
}, 1200);
// 清理 ripple 元素
setTimeout(() => {
ripple.remove();
}, 1000);
};
document.body.addEventListener('click', handleClick);
return () => {
document.body.removeEventListener('click', handleClick);
};
}, [onFinishLoading]);
if (!isVisible) return null;
return (
<div className="welcome" id="pageContainer">
<div className="welcome-text" id="welcomeText">
{welcomeText}
</div>
<style jsx>
{`
body {
margin: 0;
background-color: ${colors.backgroundStart};
height: 100vh;
overflow: hidden;
cursor: pointer;
}
.welcome {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
pointer-events: auto;
background: linear-gradient(120deg, ${colors.backgroundStart}, ${colors.backgroundMiddle}, ${colors.backgroundEnd});
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;
transition: opacity 0.6s ease; /* 淡出动画 */
}
.welcome.page-clicked {
opacity: 0;
pointer-events: none;
}
.welcome-text {
font-size: 2.5rem;
font-weight: bold;
color: ${colors.textColor};
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6);
user-select: none;
animation: textPulse 3s ease-in-out infinite, fadeInUp 1.5s ease-out forwards;
text-align: center;
z-index: 10000; /* 确保文字层级高于背景 */
position: relative;
}
.ripple {
position: absolute;
border-radius: 50%;
background: radial-gradient(${colors.rippleColor} 0%, transparent 70%);
pointer-events: none;
width: 20px;
height: 20px;
transform: scale(0);
opacity: 0.8;
z-index: 10;
animation: rippleExpand 1s ease-out forwards;
}
/* 动态背景动画 */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 文字呼吸动画 */
@keyframes textPulse {
0%, 100% {
transform: scale(1);
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6);
}
50% {
transform: scale(1.1);
text-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.8);
}
}
/* 文字淡入动画 */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 扩散光圈动画 */
@keyframes rippleExpand {
to {
transform: scale(40);
opacity: 0;
}
}
`}
</style>
</div>
);
};
export default LoadingCover;

28
themes/proxio/components/Logo.js
View File

@@ -12,12 +12,10 @@ import { useEffect, useState } from 'react'
* @returns
*/
export const Logo = props => {
const { white, NOTION_CONFIG } = props
const { siteInfo, white } = props
const router = useRouter()
const logoWhite = siteConfig('PROXIO_LOGO_WHITE')
const logoNormal = siteConfig('PROXIO_LOGO')
const { isDarkMode } = useGlobal()
const [logo, setLogo] = useState(logoWhite)
const [logoTextColor, setLogoTextColor] = useState('text-white')
useEffect(() => {
@@ -29,10 +27,8 @@ export const Logo = props => {
const homePageNavBar = router.route === '/' && scrollY < 10 // 在首页并且视窗在页面顶部
if (white || isDarkMode || homePageNavBar) {
setLogo(logoWhite)
setLogoTextColor('text-white')
} else {
setLogo(logoNormal)
setLogoTextColor('text-black')
}
}, throttleMs)
@@ -47,18 +43,14 @@ export const Logo = props => {
return (
<div className='w-60 max-w-full px-4'>
<div className='navbar-logo flex items-center w-full py-5 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
{logo && (
<LazyImage
priority
onClick={() => {
router.push('/')
}}
src={logo}
alt='logo'
className='header-logo mr-1 h-8'
/>
)}
<LazyImage
priority
src={siteInfo?.icon}
width={24}
height={20}
alt={siteConfig('AUTHOR')}
className='mr-2 hidden md:inline-block'
/>
{/* logo文字 */}
<span
onClick={() => {