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

fix(proxio): enable image click navigation in list view

Browse Source 
Closes #3468
This commit is contained in:
anime
2025-07-07 01:33:44 +08:00
parent 40b206b39b
commit aef0768391
1 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,10 +15,18 @@ export const Blog = ({ posts }) => {
}
// 博客列表默认显示summary文字，当鼠标指向时显示文章封面。这里可选把summary文字替换成图片占位符。
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_1 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_1')
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_2 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_2')
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_3 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_3')
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_4 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_4')
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_1 = siteConfig(
'PROXIO_BLOG_PLACEHOLDER_IMG_URL_1'
)
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_2 = siteConfig(
'PROXIO_BLOG_PLACEHOLDER_IMG_URL_2'
)
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_3 = siteConfig(
'PROXIO_BLOG_PLACEHOLDER_IMG_URL_3'
)
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_4 = siteConfig(
'PROXIO_BLOG_PLACEHOLDER_IMG_URL_4'
)
return (
<>
@@ -26,7 +34,9 @@ export const Blog = ({ posts }) => {
<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='-mx-4 flex flex-wrap justify-center wow fadeInUp'
data-wow-delay='.2s'>
<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'>
@@ -59,25 +69,30 @@ export const Blog = ({ posts }) => {
className='wow fadeInUp group mb-10 relative overflow-hidden blog'
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'>
{/* 图片半透明 */}
<Link href={item?.href} className='block'>
{item.pageCoverThumbnail && (
// 图片半透明
<LazyImage
src={item.pageCoverThumbnail}
alt={item.title}
className='w-full h-80 object-cover transition-transform duration-500 rounded-xl'
/>
</Link>
)}
{/* 遮罩层，仅覆盖图片部分 */}
<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'>
{!coverImg && <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>}
<LazyImage src={coverImg} className='absolute max-h-full object-cover' />
</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'>
{!coverImg && (
<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>
)}
<LazyImage
src={coverImg}
className='absolute max-h-full object-cover'
/>
</div>
</Link>
</div>
{/* 内容部分 */}
<div className='relative z-10 p-4'>
@@ -91,7 +106,6 @@ export const Blog = ({ posts }) => {
{item.title}
</Link>
</h3>
</div>
</div>
</div>
@@ -103,4 +117,4 @@ export const Blog = ({ posts }) => {
{/* <!-- ====== Blog Section End --> */}
</>
)
}
}