From aef0768391153e3abbf10ce56a5101029fb4f458 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 7 Jul 2025 01:33:44 +0800
Subject: [PATCH] fix(proxio): enable image click navigation in list view

Closes #3468
---
 themes/proxio/components/Blog.js | 56 ++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/themes/proxio/components/Blog.js b/themes/proxio/components/Blog.js
index 66d8231e..6476e14a 100644
--- a/themes/proxio/components/Blog.js
+++ b/themes/proxio/components/Blog.js
@@ -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 --> */}
     </>
   )
-}
\ No newline at end of file
+}