Merge pull request #2220 from tangly1024/fix/theme-fukasawa-card-image-link

fix fukasawa card link

themes/fukasawa/components/BlogCard.js

@@ -1,10 +1,10 @@
-import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
-import TagItemMini from './TagItemMini'
-import CONFIG from '../config'
 import LazyImage from '@/components/LazyImage'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+import CONFIG from '../config'
+import TagItemMini from './TagItemMini'
 
 /**
  * 文章列表卡片
@@ -12,13 +12,24 @@ import NotionIcon from '@/components/NotionIcon'
  * @returns
  */
 const BlogCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+  const showPreview =
+    siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   // fukasawa 强制显示图片
-  if (siteConfig('FUKASAWA_POST_LIST_COVER_FORCE', null, CONFIG) && post && !post.pageCover) {
+  if (
+    siteConfig('FUKASAWA_POST_LIST_COVER_FORCE', null, CONFIG) &&
+    post &&
+    !post.pageCover
+  ) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
-  const showPageCover = siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail
-  const FUKASAWA_POST_LIST_ANIMATION = siteConfig('FUKASAWA_POST_LIST_ANIMATION', null, CONFIG)
+  const showPageCover =
+    siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) &&
+    post?.pageCoverThumbnail
+  const FUKASAWA_POST_LIST_ANIMATION = siteConfig(
+    'FUKASAWA_POST_LIST_ANIMATION',
+    null,
+    CONFIG
+  )
 
   // 动画样式  首屏卡片不用，后面翻出来的加动画
   const aosProps = FUKASAWA_POST_LIST_ANIMATION
@@ -30,63 +41,68 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
       }
     : {}
 
-  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+  const url = checkContainHttp(post.slug)
+    ? sliceUrlFromHttp(post.slug)
+    : `${siteConfig('SUB_PATH', '')}/${post.slug}`
 
   return (
-        <article {...aosProps} style={{ maxHeight: '60rem' }}
-            className="w-full lg:max-w-sm p-3 shadow mb-4 mx-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200"
-        >
-            <div className="flex flex-col justify-between h-full">
-                {/* 封面图 */}
-                {showPageCover && (
-                    <div className="flex-grow mb-3 w-full duration-200 cursor-pointer transform overflow-hidden">
-                        <Link href={url} passHref legacyBehavior>
-                            <LazyImage
-                                src={post?.pageCoverThumbnail}
-                                alt={post?.title || siteConfig('TITLE')}
-                                className="object-cover w-full h-full hover:scale-125 transform duration-500"
-                            />
-                        </Link>
-                    </div>
-                )}
-
-                {/* 文字部分 */}
-                <div className="flex flex-col w-full">
-                    <h2>
-                        <Link passHref href={url}
-                            className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
-                        >
-                        <NotionIcon icon={post.pageIcon} /> {post.title}
-                        </Link>
-                    </h2>
-
-                    {(!showPreview || showSummary) && (
-                        <main className="my-2 tracking-wide line-clamp-3 text-gray-800 dark:text-gray-300 text-md font-light leading-6">
-                            {post.summary}
-                        </main>
-                    )}
-
-                    {/* 分类标签 */}
-                    <div className="mt-auto justify-between flex">
-                        {post.category && <Link
-                            href={`/category/${post.category}`}
-                            passHref
-                            className="cursor-pointer dark:text-gray-300 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>
+    <article
+      {...aosProps}
+      style={{ maxHeight: '60rem' }}
+      className='w-full lg:max-w-sm p-3 shadow mb-4 mx-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200'>
+      <div className='flex flex-col justify-between h-full'>
+        {/* 封面图 */}
+        {showPageCover && (
+          <Link href={url} passHref legacyBehavior>
+            <div className='flex-grow mb-3 w-full duration-200 cursor-pointer transform overflow-hidden'>
+              <LazyImage
+                src={post?.pageCoverThumbnail}
+                alt={post?.title || siteConfig('TITLE')}
+                className='object-cover w-full h-full hover:scale-125 transform duration-500'
+              />
             </div>
-        </article>
+          </Link>
+        )}
+
+        {/* 文字部分 */}
+        <div className='flex flex-col w-full'>
+          <h2>
+            <Link
+              passHref
+              href={url}
+              className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+              <NotionIcon icon={post.pageIcon} /> {post.title}
+            </Link>
+          </h2>
+
+          {(!showPreview || showSummary) && (
+            <main className='my-2 tracking-wide line-clamp-3 text-gray-800 dark:text-gray-300 text-md font-light leading-6'>
+              {post.summary}
+            </main>
+          )}
+
+          {/* 分类标签 */}
+          <div className='mt-auto justify-between flex'>
+            {post.category && (
+              <Link
+                href={`/category/${post.category}`}
+                passHref
+                className='cursor-pointer dark:text-gray-300 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>
+      </div>
+    </article>
   )
 }