animation and style

themes/hexo/components/BlogPostCard.js

@@ -1,98 +1,39 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import React from 'react'
-import TagItemMini from './TagItemMini'
 import CONFIG_HEXO from '../config_hexo'
-import NotionPage from '@/components/NotionPage'
+import { BlogPostCardInfo } from './BlogPostCardInfo'
 // import Image from 'next/image'
 
-const BlogPostCard = ({ post, showSummary, siteInfo }) => {
+const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
   if (post && !post.page_cover && CONFIG_HEXO.POST_LIST_COVER_DEFAULT) {
     post.page_cover = siteInfo?.pageCover
   }
   const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover
+  const delay = (index % 2) * 200
+
   return (
     <div
         key={post.id}
-        data-aos="fade-up"
-        data-aso-delay="200"
-        data-aos-duration="200"
-        data-aos-once="true"
-        data-aos-anchor-placement="top-bottom"
         className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''}
-        w-full md:h-72 h-96 justify-between overflow-hidden shadow-md
+        w-full md:h-52 justify-between overflow-hidden
         border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
-        <div className={`lg:p-8 p-4 flex flex-col  ${showPageCover ? 'md:w-7/12 w-full' : 'w-full'}`}>
-          <Link
-            href={`${BLOG.SUB_PATH}/${post.slug}`}
-            passHref
-            className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
-              } leading-tight text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
+        {/* 文字内容 */}
+        <div
+            data-aos="fade-up"
+            data-aos-duration="200"
+            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'}`}>
 
-            {post.title}
+            <BlogPostCardInfo post={post} showPreview={showPreview} showSummary={showSummary}/>
 
-          </Link>
-
-          <div
-            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
-              } flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
-          >
-            <Link
-              href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-              passHref
-              className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
-
-              <i className="far fa-calendar-alt mr-1" />
-              {post.date?.start_date || post.lastEditedTime}
-
-            </Link>
-          </div>
-
-          {(!showPreview || showSummary) && !post.results && (
-            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
-              className="replace h-full max-h-32 my-4 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
-              {post.summary}
-            </p>
-          )}
-
-          {/* 搜索结果 */}
-          {post.results && (
-            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-              {post.results.map(r => (
-                <span key={r}>{r}</span>
-              ))}
-            </p>
-          )}
-
-          {showPreview && (
-            <div className="overflow-ellipsis truncate">
-              <NotionPage post={post} />
-            </div>
-          )}
-
-          <div className="text-gray-400 justify-between flex">
-            <Link
-              href={`/category/${post.category}`}
-              passHref
-              className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
-
-              <i className="mr-1 far fa-folder" />
-              {post.category}
-
-            </Link>
-            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
-              <div>
-                {' '}
-                {post.tagItems.map(tag => (
-                  <TagItemMini key={tag.name} tag={tag} />
-                ))}
-              </div>
-            </div>
-          </div>
         </div>
 
+         {/* 图片封面 */}
         {showPageCover && !showPreview && post?.page_cover && (
            <div className="flex overflow-hidden md:w-5/12 h-full">
                 <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
@@ -100,6 +41,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
                     <img
                         src={post?.page_cover}
                         alt={post.title}
+                        loading='lazy'
                         className="w-full cursor-pointer object-cover duration-200 hover:scale-125 "
                     />
                     {/* <div className='relative w-full h-full'>