Merge pull request #2726 from laogou717/4.70版本-Heo主题封面比例、动画更改

4.70版本 heo主题封面比例、动画更改
tangly1024 · Sep 17, 2024 · f88d44d · f88d44d
2 parents 69562d1 + e456de6
commit f88d44d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
@@ -1,5 +1,5 @@
 import LazyImage from '@/components/LazyImage'
-import NotionIcon from '@/components/NotionIcon'
+import NotionIcon from './NotionIcon'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import CONFIG from '../config'
@@ -29,7 +29,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
   return (
     <article
-      className={` ${COVER_HOVER_ENLARGE} ? ' hover:scale-110 transition-all duration-150' : ''}`}>
+      className={` ${COVER_HOVER_ENLARGE} ? ' hover:transition-all duration-150' : ''}`}>
       <div
         data-wow-delay='.2s'
         className={
@@ -48,7 +48,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 priority={index === 0}
                 src={post?.pageCoverThumbnail}
                 alt={post?.title}
-                className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'
+                className='h-full w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-500 ease-in-out' //宽高都调整为自适应,保证封面居中
               />
             </div>
           </Link>
@@ -74,15 +74,18 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
               </div>
             )}
 
-            {/* 标题 */}
+            {/* 标题和图标 */}
             <Link
               href={post?.href}
               passHref
               className={
                 ' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'
               }>
               {siteConfig('POST_TITLE_ICON') && (
-                <NotionIcon icon={post.pageIcon} />
+                <NotionIcon
+                icon={post.pageIcon}
+                className="heo-icon w-6 h-6 mr-1 align-middle transform translate-y-[-8%]" // 专门为 Heo 主题的图标设置样式
+              />
               )}
               <span className='menu-link '>{post.title}</span>
             </Link>

diff --git a/themes/heo/components/NotionIcon.js b/themes/heo/components/NotionIcon.js
@@ -0,0 +1,22 @@
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon, className = 'w-8 h-8 my-auto inline mr-1' }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    // 这里优先使用传入的 className
+    return <LazyImage src={icon} className={className} />
+  }
+
+  // 对于 emoji 或 svg，设置默认 className，也可以传递不同的样式
+  return <span className={`inline-block ${className}`}>{icon}</span>
+}
+
+export default NotionIcon