proxio主题加入部分动画

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

97
components/CursorDot.js Normal file
View File

@@ -0,0 +1,97 @@
import { useEffect } from 'react';
const CursorDot = () => {
useEffect(() => {
// 创建小白点元素
const dot = document.createElement('div');
dot.classList.add('cursor-dot');
document.body.appendChild(dot);
// 鼠标坐标和缓动目标坐标
let mouse = { x: -100, y: -100 }; // 初始位置在屏幕外
let dotPos = { x: mouse.x, y: mouse.y };
// 监听鼠标移动
const handleMouseMove = (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
};
document.addEventListener('mousemove', handleMouseMove);
// 监听鼠标悬停在可点击对象上的事件
const handleMouseEnter = () => {
dot.classList.add('cursor-dot-hover'); // 添加放大样式
};
const handleMouseLeave = () => {
dot.classList.remove('cursor-dot-hover'); // 移除放大样式
};
// 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听
const clickableElements = document.querySelectorAll(
'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"]'
);
clickableElements.forEach((el) => {
el.addEventListener('mouseenter', handleMouseEnter);
el.addEventListener('mouseleave', handleMouseLeave);
});
// 动画循环:延迟更新小白点位置
const updateDotPosition = () => {
const damping = 0.2; // 阻尼系数,值越小延迟越明显
dotPos.x += (mouse.x - dotPos.x) * damping;
dotPos.y += (mouse.y - dotPos.y) * damping;
// 更新DOM
dot.style.left = `${dotPos.x}px`;
dot.style.top = `${dotPos.y}px`;
requestAnimationFrame(updateDotPosition);
};
// 启动动画
updateDotPosition();
// 清理函数
return () => {
document.removeEventListener('mousemove', handleMouseMove);
clickableElements.forEach((el) => {
el.removeEventListener('mouseenter', handleMouseEnter);
el.removeEventListener('mouseleave', handleMouseLeave);
});
document.body.removeChild(dot);
};
}, []);
return (
<style jsx global>{`
.cursor-dot {
position: fixed;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
transition: transform 100ms ease-out, width 200ms ease, height 200ms ease; /* 添加尺寸平滑过渡 */
mix-blend-mode: difference; /* 可选:增强对比度 */
}
.cursor-dot-hover {
border: 1px solid rgba(167, 167, 167, 0.14); /* 鼠标悬停时的深灰色边框厚度为1px */
width: 60px; /* 放大 */
height: 60px; /* 放大 */
background: hsla(0, 0%, 100%, 0.04); /* 半透明背景 */
-webkit-backdrop-filter: blur(5px); /* 毛玻璃效果 */
backdrop-filter: blur(5px);
}
.dark .cursor-dot-hover {
border: 1px solid rgba(66, 66, 66, 0.66); /* 鼠标悬停时的深灰色边框厚度为1px */
}
`}</style>
);
};
export default CursorDot;

View File

@@ -1,30 +1,26 @@
/** import { useEffect, useRef } from 'react'
* 鼠标滚动阻尼感
*/
import { useEffect } from 'react'
import { loadExternalResource } from '@/lib/utils' import { loadExternalResource } from '@/lib/utils'
/** /**
* 鼠标点击烟花特效 * 滚动阻尼特效
* 目前只用在proxio主题
* @returns * @returns
*/ */
const Lenis = () => { const Lenis = () => {
const lenisRef = useRef(null) // 用于存储 Lenis 实例
useEffect(() => { useEffect(() => {
// 异步加载 // 异步加载
async function loadLenis() { async function loadLenis() {
loadExternalResource( loadExternalResource('/js/lenis.js', 'js').then(() => {
'/js/lenis.js', // console.log('Lenis', window.Lenis)
'js' if (!window.Lenis) {
).then(() => {
console.log('Lenis',window.Lenis)
if(!window.Lenis) {
console.error('Lenis not loaded') console.error('Lenis not loaded')
return return
} }
const Lenis = window.Lenis const Lenis = window.Lenis
// 创建 Lenis 实例
// 创建 Lenis 实例
const lenis = new Lenis({ const lenis = new Lenis({
duration: 1.2, duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
@@ -35,18 +31,23 @@ const Lenis = () => {
smoothTouch: false, smoothTouch: false,
touchMultiplier: 2, touchMultiplier: 2,
infinite: false, infinite: false,
}) })
//get scroll value // 存储实例到 ref
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => { console.log({ scroll, limit, velocity, direction, progress }) lenisRef.current = lenis
})
function raf(time) { // 监听滚动事件
// lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
// // console.log({ scroll, limit, velocity, direction, progress })
// })
// 动画帧循环
function raf(time) {
lenis.raf(time) lenis.raf(time)
requestAnimationFrame(raf) requestAnimationFrame(raf)
} }
requestAnimationFrame(raf) requestAnimationFrame(raf)
}) })
} }
@@ -54,6 +55,11 @@ const Lenis = () => {
return () => { return () => {
// 在组件卸载时清理资源 // 在组件卸载时清理资源
if (lenisRef.current) {
lenisRef.current.destroy() // 销毁 Lenis 实例
lenisRef.current = null
// console.log('Lenis instance destroyed')
}
} }
}, []) }, [])

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

View File

@@ -13,7 +13,7 @@ const Announcement = ({ post, className }) => {
<div className={className}> <div className={className}>
<section <section
id='announcement-wrapper' 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> */} {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
{post && ( {post && (
<div id='announcement-content'> <div id='announcement-content'>

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]'> <section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'>
<div className='container mx-auto'> <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='w-full px-4'>
<div className='mx-auto mb-[60px] max-w-[485px] text-center'> <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
<span className='mb-2 block text-lg font-semibold text-primary'> <span className='mb-2 block text-lg font-semibold text-primary'>
@@ -33,21 +33,25 @@ export const Blog = ({ posts }) => {
return ( return (
<div key={index} className='w-full px-4'> <div key={index} className='w-full px-4'>
<div <div
className='wow fadeInUp group mb-10' className='wow fadeInUp group mb-10 relative overflow-hidden rounded-[10px]'
data-wow-delay='.1s'> data-wow-delay='.1s'>
<div className='mb-8 overflow-hidden rounded-[5px]'> {/* 图片部分 */}
<div className='relative'>
{item.pageCoverThumbnail && ( {item.pageCoverThumbnail && (
<Link href={item?.href} className='block'> <Link href={item?.href} className='block'>
<LazyImage <LazyImage
src={item.pageCoverThumbnail} src={item.pageCoverThumbnail}
alt={item.title} 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> </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>
<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} {item.publishDay}
</span> </span>
<h3> <h3>

View File

@@ -13,26 +13,26 @@ export const CTA = () => {
return ( return (
<> <>
{/* <!-- ====== CTA Section Start --> */} {/* <!-- ====== 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='container mx-auto'>
<div className='relative overflow-hidden'> <div className='relative overflow-hidden'>
<div className='-mx-4 flex flex-wrap items-stretch'> <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'> <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>{siteConfig('PROXIO_CTA_TITLE')}</span>
<span className='text-3xl font-normal md:text-[40px]'> <span className='text-3xl font-normal md:text-[40px]'>
{siteConfig('PROXIO_CTA_TITLE_2')} {siteConfig('PROXIO_CTA_TITLE_2')}
</span> </span>
</h2> </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')} {siteConfig('PROXIO_CTA_DESCRIPTION')}
</p> </p>
{siteConfig('PROXIO_CTA_BUTTON') && ( {siteConfig('PROXIO_CTA_BUTTON') && (
<> <>
<Link <Link
href={siteConfig('PROXIO_CTA_BUTTON_URL', '')} 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')} {siteConfig('PROXIO_CTA_BUTTON_TEXT')}
</Link> </Link>
</> </>

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 { siteConfig } from '@/lib/config'
import SocialButton from '@/themes/fukasawa/components/SocialButton' import { useGlobal } from '@/lib/global'
import { Logo } from './Logo'
import { SVGFooterCircleBG } from './svg/SVGFooterCircleBG'
import Link from 'next/link' 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 ( return (
<> <footer
{/* <!-- ====== Footer Section Start --> */} id='footer-bottom'
<footer className='z-10 justify-center m-auto w-full p-6 relative container'>
className='wow fadeInUp relative z-10 bg-[#090E34] pt-20 lg:pt-[100px]' <div className='max-w-screen-3xl w-full mx-auto '>
data-wow-delay='.15s'> {/* 信息与链接区块 */}
<div className='container'> <div className='w-full flex lg:flex-row flex-col justify-between py-16'>
<div className='-mx-4 flex flex-wrap'> <div className='gap-y-2 flex flex-col items-start dark:text-gray-200'>
<div className='w-full px-4 sm:w-1/2 md:w-1/2 lg:w-4/12 xl:w-3/12'> <div className='flex gap-x-1'>
<div className='mb-10 w-full'> <LazyImage
<a className='-mx-4 mb-6 inline-block max-w-[160px]'> src={siteInfo?.icon}
<Logo white={true} /> className='rounded-full'
</a> width={24}
<p className='mb-8 max-w-[270px] text-base text-gray-7'> alt={siteConfig('AUTHOR')}
{siteConfig('PROXIO_FOOTER_SLOGAN')} />
</p> <h1 className='text-lg'>{title}</h1>
<div className='-mx-3 flex items-center'> <span
<div className='mx-3'> className='underline font-bold justify-start'>
<SocialButton /> {siteConfig('AUTHOR')}
</div> </span>
</div>
</div>
</div> </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 ( return (
<div <div key={index}>
key={index} <div className='font-bold text-xl dark:text-white lg:pb-8 pb-4'>
className='w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12'> {group.name}
<div className='mb-10 w-full'> </div>
<h4 className='mb-9 text-lg font-semibold text-white'> <div className='flex flex-col gap-y-2'>
{item.TITLE} {group?.menus?.map((menu, index) => {
</h4> return (
<ul> <div key={index}>
{item?.LINK_GROUP?.map((l, i) => { <Link href={menu.href} className='hover:underline dark:text-gray-200'>
return ( {menu.title}
<li key={i}> </Link>
<Link </div>
href={l.URL} )
className='mb-3 inline-block text-base text-gray-7 hover:text-primary'> })}
{l.TITLE}
</Link>
</li>
)
})}
</ul>
</div> </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='dark:text-gray-200 py-4 flex flex-col lg:flex-row justify-between items-center border-t border-gray-600'>
<div className='mb-10 w-full'> <div className='flex gap-x-2 flex-wrap justify-between items-center'>
<h4 className='mb-9 text-lg font-semibold text-white'> <CopyRightDate />
{siteConfig('PROXIO_FOOTER_BLOG_LATEST_TITLE')} <PoweredBy />
</h4> </div>
{/* 展示两条最新博客文章 */}
<div className='flex flex-col gap-8'> <DarkModeButton className='text-white' />
{latestPosts?.map((item, index) => {
return ( <div className='flex justify-between items-center gap-x-2'>
<Link <div className='flex items-center gap-x-4'>
key={index} <AnalyticsBusuanzi />
href={item?.href} <SocialButton />
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> </div>
</div> </div>
</div> </div>
{/* 底部版权信息相关 */} {/* 备案 */}
<div className='dark:text-gray-200 w-full text-center flex flex-wrap items-center justify-center gap-x-2'>
<div className='mt-12 border-t border-[#8890A4] border-opacity-40 py-8 lg:mt-[60px]'> <BeiAnSite />
<div className='container'> <BeiAnGongAn />
<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> </div>
</div>
{/* Footer 背景 */} </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 --> */}
</>
) )
} }

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;

View File

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

View File

@@ -2,11 +2,7 @@
* 另一个落地页主题 * 另一个落地页主题
*/ */
const CONFIG = { const CONFIG = {
// 默认只展示Logo文字如果设置了logo图片会在文字左侧显示图标 PROXIO_WELCOME_TEXT:'欢迎来到此网站,点击任意位置进入', // 欢迎文字,留空则不启用
PROXIO_LOGO: '', // 普通logo图片 示例:/images/starter/logo/logo.svg
PROXIO_LOGO_WHITE: '', // 透明底浅色logo 示例: /images/starter/logo/logo-white.svg
// MENU 菜单部分不在此处配置请在Notion数据库中添加MENU
// 英雄区块导航 // 英雄区块导航
PROXIO_HERO_ENABLE: true, // 开启英雄区 PROXIO_HERO_ENABLE: true, // 开启英雄区
@@ -205,15 +201,15 @@ const CONFIG = {
PROXIO_ABOUT_TEXT_1: '我们的开发者团队', PROXIO_ABOUT_TEXT_1: '我们的开发者团队',
PROXIO_ABOUT_TEXT_2: PROXIO_ABOUT_TEXT_2:
'NotionNext 由众多开源技术爱好者们共同合作完成,感谢每一位<a className="underline" href="https://github.com/tangly1024/NotionNext/graphs/contributors">贡献者</a>', 'NotionNext 由众多开源技术爱好者们共同合作完成,感谢每一位<a className="underline" href="https://github.com/tangly1024/NotionNext/graphs/contributors">贡献者</a>',
PROXIO_ABOUT_PHOTO_URL:'', PROXIO_ABOUT_PHOTO_URL: '',
PROXIO_ABOUT_KEY_1:'经验年限', PROXIO_ABOUT_KEY_1: '经验年限',
PROXIO_ABOUT_VAL_1:'10年+', PROXIO_ABOUT_VAL_1: '10年+',
PROXIO_ABOUT_KEY_2:'客户', PROXIO_ABOUT_KEY_2: '客户',
PROXIO_ABOUT_VAL_2:'1000+', PROXIO_ABOUT_VAL_2: '1000+',
PROXIO_ABOUT_KEY_3:'交付项目', PROXIO_ABOUT_KEY_3: '交付项目',
PROXIO_ABOUT_VAL_3:'5000+', PROXIO_ABOUT_VAL_3: '5000+',
PROXIO_ABOUT_KEY_4:'累积创作时长(小时)', PROXIO_ABOUT_KEY_4: '累积创作时长(小时)',
PROXIO_ABOUT_VAL_4:'10000+', PROXIO_ABOUT_VAL_4: '10000+',
// 联系模块 // 联系模块
@@ -274,54 +270,43 @@ const CONFIG = {
PROXIO_FOOTER_SLOGAN: '我们通过技术为品牌和公司创造数字体验。', PROXIO_FOOTER_SLOGAN: '我们通过技术为品牌和公司创造数字体验。',
// 页脚三列菜单组 // 页脚三列菜单组
PROXIO_FOOTER_LINK_GROUP: [ // 页脚菜单
PROXIO_FOOTER_LINKS: [
{ {
TITLE: '关于我们', name: '友情链接',
LINK_GROUP: [ menus: [
{ TITLE: '官方主页', URL: '/#home' },
{ TITLE: '操作文档', URL: 'https://docs.tangly1024.com/about' },
{ {
TITLE: '帮助支持', title: 'Tangly的学习笔记',
URL: 'https://docs.tangly1024.com/article/how-to-question' href: 'https://blog.tangly1024.com'
}, },
{ {
TITLE: '合作申请', title: 'NotionNext',
URL: 'https://docs.tangly1024.com/article/my-service' href: 'https://www.tangly1024.com'
} }
] ]
}, },
{ {
TITLE: '功能特性', name: '开发者',
LINK_GROUP: [ menus: [
{ title: 'Github', href: 'https://github.com/tangly1024/NotionNext' },
{ {
TITLE: '部署指南', title: '开发帮助',
URL: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next' href: 'https://docs.tangly1024.com/article/how-to-develop-with-notion-next'
}, },
{ {
TITLE: '升级指南', title: '功能反馈',
URL: 'https://docs.tangly1024.com/article/how-to-update-notionnext' href: 'https://github.com/tangly1024/NotionNext/issues/new/choose'
},
{ TITLE: '最新版本', URL: 'https://docs.tangly1024.com/article/latest' }
]
},
{
TITLE: 'Notion写作',
LINK_GROUP: [
{
TITLE: 'Notion开始写作',
URL: 'https://docs.tangly1024.com/article/start-to-write'
}, },
{ {
TITLE: '快捷键提升效率', title: '技术讨论',
URL: 'https://docs.tangly1024.com/article/notion-short-key' href: 'https://github.com/tangly1024/NotionNext/discussions'
}, },
{ {
TITLE: '中国大陆使用Notion', title: '关于作者',
URL: 'https://docs.tangly1024.com/article/notion-faster' href: 'https://blog.tangly1024.com/about'
} }
] ]
} }],
],
PROXIO_FOOTER_BLOG_LATEST_TITLE: '最新文章', PROXIO_FOOTER_BLOG_LATEST_TITLE: '最新文章',

View File

@@ -42,6 +42,8 @@ import { SignUpForm } from './components/SignUpForm'
import { SVG404 } from './components/svg/SVG404' import { SVG404 } from './components/svg/SVG404'
import Lenis from '@/components/Lenis' import Lenis from '@/components/Lenis'
import Announcement from './components/Announcement' import Announcement from './components/Announcement'
import CursorDot from '@/components/CursorDot'
import LoadingCover from './components/LoadingCover'
/** /**
* 布局框架 * 布局框架
@@ -77,9 +79,10 @@ const LayoutBase = props => {
{/* 悬浮按钮 */} {/* 悬浮按钮 */}
<BackToTopButton /> <BackToTopButton />
{/* 鼠标阻尼效果 */} {/* 鼠标阻尼动画 */}
<Lenis /> <Lenis />
{/* 鼠标跟随动画 */}
<CursorDot />
{/* <MadeWithButton/> */} {/* <MadeWithButton/> */}
</div> </div>
) )
@@ -118,6 +121,7 @@ const LayoutIndex = props => {
className={ className={
'announncement text-center py-16' 'announncement text-center py-16'
} }
/>} />}
{/* 团队介绍 */} {/* 团队介绍 */}
@@ -128,6 +132,7 @@ const LayoutIndex = props => {
{/* 产品特性 */} {/* 产品特性 */}
{siteConfig('PROXIO_FEATURE_ENABLE', true, CONFIG) && <Features />} {siteConfig('PROXIO_FEATURE_ENABLE', true, CONFIG) && <Features />}
{/* 生涯 */} {/* 生涯 */}
{siteConfig('PROXIO_CAREER_ENABLE', true, CONFIG) && <About />} {siteConfig('PROXIO_CAREER_ENABLE', true, CONFIG) && <About />}
@@ -136,7 +141,6 @@ const LayoutIndex = props => {
{/* {siteConfig('PROXIO_PRICING_ENABLE', true, CONFIG) && <Pricing />} */} {/* {siteConfig('PROXIO_PRICING_ENABLE', true, CONFIG) && <Pricing />} */}
{/* 评价展示 */} {/* 评价展示 */}
{siteConfig('PROXIO_TESTIMONIALS_ENABLE', true, CONFIG) && ( {siteConfig('PROXIO_TESTIMONIALS_ENABLE', true, CONFIG) && (
<Testimonials /> <Testimonials />
@@ -147,6 +151,8 @@ const LayoutIndex = props => {
{/* 行动呼吁 */} {/* 行动呼吁 */}
{siteConfig('PROXIO_CTA_ENABLE', true, CONFIG) && <CTA />} {siteConfig('PROXIO_CTA_ENABLE', true, CONFIG) && <CTA />}
<LoadingCover/>
</> </>
) )
} }