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

proxio 初版

Browse Source
This commit is contained in:
tangly1024
2025-04-13 11:45:10 +08:00
parent 610550ed57
commit 4bdde35969
14 changed files with 468 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,33 +12,34 @@ export const Blog = ({ posts }) => {
return (
<>
{/* <!-- ====== Blog Section Start --> */}
<section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'>
<section className='bg-white pt-20 dark:bg-dark lg:pt-[120px]'>
<div className='container mx-auto'>
{/* 区块标题文字 */}
<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'>
<div className='w-full px-4 py-4'>
<div className='mx-auto max-w-[485px] text-center space-y-4'>
<span className='px-3 py-0.5 rounded-2xl mb-2 dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_BLOG_TITLE')}
</span>
<h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
<h2 className='text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
{siteConfig('PROXIO_BLOG_TEXT_1')}
</h2>
</div>
</div>
</div>
{/* 博客列表 此处优先展示3片文章 */}
<div className='-mx-4 grid grid-cols-2'>
<div className='-mx-4 grid md:grid-cols-2 grid-cols-1'>
{posts?.map((item, index) => {
return (
<div key={index} className='w-full px-4'>
<div
className='wow fadeInUp group mb-10 relative overflow-hidden'
data-wow-delay='.1s'>
{/* 图片部分 */}
<div className='relative rounded-xl border overflow-hidden shadow-md dark:border-gray-700 dark:bg-gray-800'>
{item.pageCoverThumbnail && (
<Link href={item?.href} className='block'>
{/* 图片半透明 */}
<LazyImage
src={item.pageCoverThumbnail}
alt={item.title}
@@ -47,11 +48,16 @@ export const Blog = ({ posts }) => {
</Link>
)}
{/* 遮罩层，仅覆盖图片部分 */}
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-opacity duration-500 group-hover:opacity-0'></div>
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-all duration-500 group-hover:opacity-50 group-hover:bg-black' />
{/* 鼠标悬停时显示的文字内容 */}
<div className='absolute inset-0 flex items-center justify-center group-hover:scale-110 duration-200 group-hover:text-white'>
<p className='max-w-[370px] text-base text-body-color dark:text-dark-6 flex items-center justify-center duration-200 group-hover:text-white '>
{item.summary}
</p></div>
</div>
{/* 内容部分 */}
<div className='relative z-10 p-4'>
<span className='mb-6 inline-block bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
<span className='inline-blocktext-center text-xs font-medium leading-loose text-white'>
{item.publishDay}
</span>
<h3>
@@ -61,9 +67,7 @@ export const Blog = ({ posts }) => {
{item.title}
</Link>
</h3>
<p className='max-w-[370px] text-base text-body-color dark:text-dark-6'>
{item.summary}
</p>
</div>
</div>
</div>