File size: 4,988 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
import { useGlobal } from '@/lib/global'
import Image from 'next/image'
import Link from 'next/link'
import Card from './Card'
import TagItemMini from './TagItemMini'
import CONFIG from '../config'
import NotionPage from '@/components/NotionPage'
import NotionIcon from '@/components/NotionIcon'
import TwikooCommentCount from '@/components/TwikooCommentCount'
import { formatDateFmt } from '@/lib/formatDate'
import { siteConfig } from '@/lib/config'
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
const BlogPostCard = ({ post, index, showSummary }) => {
const { locale } = useGlobal()
const showPreview = siteConfig('NEXT_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
// 动画样式 首屏卡片不用，后面翻出来的加动画
const aosProps = index > 2
? {
'data-aos': 'fade-down',
'data-aos-duration': '400',
'data-aos-once': 'true',
'data-aos-anchor-placement': 'top-bottom'
}
: {}
const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
return (
<Card className="w-full">
<div
key={post.id}
className="flex flex-col-reverse justify-between duration-300"
>
<div className="lg:p-8 p-4 flex flex-col w-full">
{/* 文章标题 */}
<Link
{...aosProps}
href={url}
passHref
className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
<NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
</Link>
<div {...aosProps} className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-500 `}>
<div>
{post.category && (
<>
<Link
href={`/category/${post.category}`}
passHref
className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm transform">
<i className="mr-1 fas fa-folder" />
<span className='menu-link'>{post.category}</span>
</Link>
<span className="mx-2">|</span>
</>
)}
<Link
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
passHref
className="hover:text-blue-500 dark:hover:text-blue-400 font-light cursor-pointer text-sm leading-4 mr-3">
<span className='menu-link'>{post.date?.start_date}</span>
</Link>
</div>
<TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
<div className="hover:text-blue-500 dark:hover:text-blue-400 md:flex-nowrap flex-wrap md:justify-start inline-block">
{post.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
</div>
{(!showPreview || showSummary) && !post.results && (
<p {...aosProps} className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{/* 搜索结果 */}
{post.results && (
<p className="line-clamp-4 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map((r, index) => (
<span key={index}>{r}</span>
))}
</p>
)}
{showPreview && post?.blockMap && (
<div className="overflow-ellipsis truncate">
<NotionPage post={post} />
</div>
)}
<div className="text-right border-t pt-8 border-dashed">
<Link
href={url}
className="hover:bg-opacity-100 hover:underline transform duration-300 p-3 text-white bg-gray-800 cursor-pointer">
{locale.COMMON.ARTICLE_DETAIL}
<i className="ml-1 fas fa-angle-right" />
</Link>
</div>
</div>
{siteConfig('NEXT_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && (
<Link href={url} passHref legacyBehavior>
<div className="h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden">
<Image
className="hover:scale-105 transform duration-500"
src={post?.pageCoverThumbnail}
alt={post.title}
layout="fill"
objectFit="cover"
loading="lazy"
/>
</div>
</Link>
)}
</div>
</Card>
)
}
export default BlogPostCard
|