plog-基础布局

themes/plog/components/BlogPost.js

@@ -1,3 +1,6 @@
+import { compressImage } from '@/lib/notion/mapImage'
+import Link from 'next/link'
+import { usePlogGlobal } from '..'
 
 /**
  * 博客照片卡牌
@@ -6,15 +9,30 @@
  */
 const BlogPost = (props) => {
   const { post, siteInfo } = props
-  const pageThumbnail = post?.pageCoverThumbnail || siteInfo?.pageCover
-  console.log('缩略图', pageThumbnail, siteInfo)
+  const pageThumbnail = compressImage(post?.pageCoverThumbnail || siteInfo?.pageCover, 800, 80)
+  const { setModalContent, setShowModal } = usePlogGlobal()
+  const handleClick = () => {
+    setShowModal(true)
+    setModalContent(post)
+  }
   return (
-        <article key={post?.id} className='cursor-pointer relative'>
+        <article
+            onClick={handleClick}
+            data-aos="fade-up"
+            data-aos-duration="500"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
+            key={post?.id} className='cursor-pointer relative'>
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover' />
-            <h2 className="text-md absolute left-0 bottom-0 mb-4 ml-4 text-black dark:text-gray-100 text-shadow">
+            <img src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
+            <h2 className="text-md absolute left-0 bottom-0 m-4 text-black dark:text-gray-100 text-shadow">
                 {post?.title}
             </h2>
+            {post?.category && <div className='text-xs rounded-lg absolute left-0 top-0 m-4 px-2 py-1 bg-black bg-opacity-25 hover:bg-blue-700 hover:text-white duration-200'>
+                <Link href={`/category/${post?.category}`}>
+                {post?.category}
+                </Link>
+            </div>}
         </article>
 
   )