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

图片优化

Browse Source
This commit is contained in:
tangly1024.com
2023-07-21 13:46:41 +08:00
parent 8da4af6a03
commit 32b7747d74
20 changed files with 126 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
themes/hexo/components/BlogPostCard.js
View File

@@ -3,6 +3,7 @@ import React from 'react'
import CONFIG from '../config'
import { BlogPostCardInfo } from './BlogPostCardInfo'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
// import Image from 'next/image'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -16,15 +17,14 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
return (
<div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div
<div key={post.id}
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="800"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
id='blog-post-card'
key={post.id}
className={`md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.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`}>
{/* 文字内容 */}
@@ -34,7 +34,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
{showPageCover && (
<div className="md:w-5/12 overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
<LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
</Link>
</div>
)}