hexo 封面图优化

This commit is contained in:
tangly1024
2023-03-13 21:02:35 +08:00
parent 5ccb71ea81
commit 5fe62df504
2 changed files with 10 additions and 8 deletions

View File

@@ -17,7 +17,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
<div <div
key={post.id} key={post.id}
className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''} className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''}
w-full md:h-52 justify-between overflow-hidden w-full justify-between overflow-hidden
border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}> border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
{/* 文字内容 */} {/* 文字内容 */}
@@ -27,7 +27,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
data-aos-delay={delay} data-aos-delay={delay}
data-aos-once="true" data-aos-once="true"
data-aos-anchor-placement="top-bottom" data-aos-anchor-placement="top-bottom"
className={`flex flex-col lg:p-6 p-4 ${showPageCover ? 'md:w-7/12 w-full ' : 'w-full'}`}> className={`flex flex-col justify-start lg:p-6 p-4 md:max-h-60 ${showPageCover ? 'md:w-7/12 w-full ' : 'w-full'}`}>
<BlogPostCardInfo post={post} showPreview={showPreview} showSummary={showSummary}/> <BlogPostCardInfo post={post} showPreview={showPreview} showSummary={showSummary}/>
@@ -35,15 +35,17 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
{/* 图片封面 */} {/* 图片封面 */}
{showPageCover && !showPreview && post?.page_cover && ( {showPageCover && !showPreview && post?.page_cover && (
<div className="flex overflow-hidden md:w-5/12 h-full"> <div className="h-auto md:w-5/12">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior> <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img {/* <img
src={post?.page_cover} src={post?.page_cover}
alt={post.title} alt={post.title}
loading='lazy' loading='lazy'
className="w-full cursor-pointer object-cover duration-200 hover:scale-125 " className="w-full relative cursor-pointer object-cover duration-200 hover:scale-125 "
/> /> */}
<div className='bg-center bg-cover md:h-full h-52' style={{ backgroundImage: `url(${post?.page_cover})` }}/>
{/* <div className='relative w-full h-full'> {/* <div className='relative w-full h-full'>
<Image <Image
className='hover:scale-125 transition cursor-pointer duration-500' className='hover:scale-125 transition cursor-pointer duration-500'

View File

@@ -34,8 +34,8 @@ export const BlogPostCardInfo = ({ post, showPreview, showSummary }) => {
{/* 摘要 */} {/* 摘要 */}
{(!showPreview || showSummary) && !post.results && ( {(!showPreview || showSummary) && !post.results && (
<p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }} <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '3', WebkitBoxOrient: 'vertical' }}
className="replace py-3 h-28 text-gray-700 dark:text-gray-300 text-sm font-light leading-7"> className="replace my-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary} {post.summary}
</p> </p>
)} )}