hexo微调 奇偶卡牌样式差异

themes/hexo/components/BlogPostCard.js

@@ -5,28 +5,29 @@ import TagItemMini from './TagItemMini'
 import CONFIG_HEXO from '../config_hexo'
 import NotionPage from '@/components/NotionPage'
 
-const BlogPostCard = ({ post, showSummary }) => {
+const BlogPostCard = ({ post, showSummary, index }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
+  const showPageCover = CONFIG_HEXO.POST_LIST_COVER
   return (
     <div
+        key={post.id}
         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="w-full drop-shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
-      <div
-        key={post.id}
-        className="animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300"
-      >
-        <div className="lg:p-8 p-4 flex flex-col w-full">
+        className={`flex md:flex-row flex-col-reverse  ${index % 2 === 0 ? 'md:flex-row-reverse' : ''}
+        w-full md:h-72 h-96 justify-between overflow-hidden drop-shadow-md  
+        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-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
+              } leading-tight text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
 
-            {post.title}
+            {post.title} {index % 2}
 
           </Link>
 
@@ -88,20 +89,20 @@ const BlogPostCard = ({ post, showSummary }) => {
           </div>
         </div>
 
-        {CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && !post.results && (
-          <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-            <div className="flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-l-none cursor-pointer transform overflow-hidden">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={post?.page_cover}
-                alt={post.title}
-                className="max-h-52 lg:max-h-72 w-full hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500"
-              />
-              {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+        {showPageCover && !showPreview && post?.page_cover && !post.results && (
+           <div className="flex relative duration-200 cursor-pointer transform overflow-hidden md:w-5/12 ">
+                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                        src={post?.page_cover}
+                        alt={post.title}
+                        className="h-full w-full hover:scale-125 transform object-cover duration-500"
+                    />
+                    {/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+                </Link>
             </div>
-          </Link>
         )}
-      </div>
+
     </div>
   )
 }

themes/hexo/components/BlogPostListPage.js

@@ -22,7 +22,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
         {/* 文章列表 */}
         <div className="space-y-6 px-2">
           {posts.map(post => (
-            <BlogPostCard key={post.id} post={post} />
+            <BlogPostCard key={post.id} post={post} index={posts.indexOf(post)}/>
           ))}
         </div>
         {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}

themes/hexo/components/BlogPostListScroll.js

@@ -58,7 +58,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE
       {/* 文章列表 */}
       <div className='flex flex-wrap space-y-1 lg:space-y-4 px-2'>
         {postsToShow.map(post => (
-          <BlogPostCard key={post.id} post={post} showSummary={showSummary}/>
+          <BlogPostCard key={post.id} post={post} index={posts.indexOf(post)} showSummary={showSummary}/>
         ))}
       </div>