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
key={post.id}
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`}>
{/* 文字内容 */}
@@ -27,7 +27,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
data-aos-delay={delay}
data-aos-once="true"
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}/>
@@ -35,15 +35,17 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
{/* 图片封面 */}
{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>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
{/* <img
src={post?.page_cover}
alt={post.title}
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'>
<Image
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 && (
<p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}
className="replace py-3 h-28 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
<p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '3', WebkitBoxOrient: 'vertical' }}
className="replace my-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}