hexo-列表鼠标悬停放大

themes/hexo/components/BlogPostCard.js

@@ -14,50 +14,37 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const delay = (index % 2) * 200
 
   return (
-    <div
-        id='blog-post-card'
-        data-aos="fade-up"
-        data-aos-duration="200"
-        data-aos-delay={delay}
-        data-aos-once="true"
-        data-aos-anchor-placement="top-bottom"
-        key={post.id}
-        className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''}
-        w-full justify-between overflow-hidden
-        border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
-        {/* 文字内容 */}
-        <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary}/>
+        <div
+            className={`${CONFIG_HEXO.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`}
+        >
+            <div
+                data-aos="fade-up"
+                data-aos-duration="200"
+                data-aos-delay={delay}
+                data-aos-once="false"
+                data-aos-anchor-placement="top-bottom"
+                id='blog-post-card'
+                key={post.id}
+                className={`h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+                    overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
-         {/* 图片封面 */}
-        {showPageCover && !showPreview && post?.page_cover && (
-           <div className="h-auto md:w-5/12 overflow-hidden">
-                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    {/* <img
-                        src={post?.page_cover}
-                        alt={post.title}
-                        loading='lazy'
-                        className="w-full relative cursor-pointer object-cover duration-200 hover:scale-125 "
-                    /> */}
-                    <div className='bg-center bg-cover md:h-full h-52 hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }}/>
+                {/* 文字内容 */}
+                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
+
+                {/* 图片封面 */}
+                {showPageCover && !showPreview && post?.page_cover && (
+                    <div className="h-auto md:w-5/12 overflow-hidden">
+                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                            <div className='bg-center bg-cover md:h-full hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
+                        </Link>
+                    </div>
+                )}
 
-                    {/* <div className='relative w-full h-full'>
-                    <Image
-                     className='hover:scale-125 transition cursor-pointer duration-500'
-                     src={post?.page_cover}
-                     alt={post.title}
-                     quality={30}
-                     placeholder='blur'
-                     blurDataURL='/bg_image.jpg'
-                     style={{ objectFit: 'cover' }}
-                     fill/>
-                    </div> */}
-                </Link>
             </div>
-        )}
 
-    </div>
+        </div>
+
   )
 }
 

themes/hexo/config_hexo.js

@@ -13,6 +13,8 @@ const CONFIG_HEXO = {
   MENU_SEARCH: true, // 显示搜索
 
   POST_LIST_COVER: true, // 列表显示文章封面
+  POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+
   POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
   POST_LIST_SUMMARY: true, // 文章摘要
   POST_LIST_PREVIEW: true, // 读取文章预览