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

medium 封面图

Browse Source
This commit is contained in:
tangly1024.com
2023-02-09 17:38:32 +08:00
parent 6cad972e49
commit d64fa80ee3
1 changed files with 63 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
themes/medium/components/BlogPostCard.js
View File

@@ -11,65 +11,76 @@ const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
const { locale } = useGlobal() const { locale } = useGlobal()
return ( return (
<div
key={post.id}
className="animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 "
>
<div className="lg:py-8 py-4 flex flex-col w-full">
<Link
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={
'cursor-pointer font-bold hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
}>
{post.title}
</Link>
<div <div
className={ key={post.id}
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400' data-aos="fade-up"
} data-aos-duration="600"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className="mb-6 max-w-7xl border-b dark:border-gray-800 "
> >
<div className="text-sm py-1">{post.date?.start_date}</div>
{CONFIG_MEDIUM.POST_LIST_CATEGORY && (
<CategoryItem category={post.category} />
)}
{CONFIG_MEDIUM.POST_LIST_TAG &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
<div className="flex"></div> <div className="lg:py-8 py-4 flex flex-col w-full">
{(!showPreview || showSummary) && (
<p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionPage post={post} />
<div className="pointer-events-none border-t pt-8 border-dashed">
<div className="w-full justify-start flex">
<Link <Link
href={`${BLOG.SUB_PATH}/${post.slug}`} href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref passHref
className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer"> className={
'cursor-pointer font-bold hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
{locale.COMMON.ARTICLE_DETAIL} }>
<i className="ml-1 fas fa-angle-right" /> <div>
<div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={post.page_cover} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
</div>
{post.title}
</div>
</Link> </Link>
</div>
<div
className={
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
}
>
<div className="text-sm py-1">{post.date?.start_date}</div>
{CONFIG_MEDIUM.POST_LIST_CATEGORY && (
<CategoryItem category={post.category} />
)}
{CONFIG_MEDIUM.POST_LIST_TAG &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
<div className="flex"></div>
{(!showPreview || showSummary) && (
<p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionPage post={post} />
<div className="pointer-events-none border-t pt-8 border-dashed">
<div className="w-full justify-start flex">
<Link
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
{locale.COMMON.ARTICLE_DETAIL}
<i className="ml-1 fas fa-angle-right" />
</Link>
</div>
</div>
</div>
)}
</div> </div>
</div> </div>
)}
</div>
</div>
) )
} }