From 718da30c50224cc84d7ec69d62142c490a20378c Mon Sep 17 00:00:00 2001
From: LooseLi <1329307562@qq.com>
Date: Fri, 25 Aug 2023 17:11:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=8F=9C=E5=8D=95=E4=B8=8B=E5=88=92?=
 =?UTF-8?q?=E7=BA=BF=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/next/components/BlogPostCard.js | 12 ++++++------
 themes/next/style.js                   | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
index 050b33c2..90224ecd 100644
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -28,10 +28,10 @@ const BlogPostCard = ({ post, showSummary }) => {
             data-aos-duration="500"
             data-aos-once="true"
             data-aos-anchor-placement="top-bottom"
-            className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
+            className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''
               } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
 
-            <NotionIcon icon={post.pageIcon} /> {post.title}
+            <NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
 
           </Link>
 
@@ -48,10 +48,10 @@ const BlogPostCard = ({ post, showSummary }) => {
                   <Link
                     href={`/category/${post.category}`}
                     passHref
-                    className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm hover:underline transform">
+                    className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm transform">
 
                     <i className="mr-1 fas fa-folder" />
-                    {post.category}
+                    <span className='menu-link'>{post.category}</span>
 
                   </Link>
                   <span className="mx-2">|</span>
@@ -60,8 +60,8 @@ const BlogPostCard = ({ post, showSummary }) => {
                 <Link
                     href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
                     passHref
-                    className="hover:text-blue-500 dark:hover:text-blue-400 font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
-                    {post.date?.start_date}
+                    className="hover:text-blue-500 dark:hover:text-blue-400 font-light cursor-pointer text-sm leading-4 mr-3">
+                    <span className='menu-link'>{post.date?.start_date}</span>
                 </Link>
             </div>
             <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
diff --git a/themes/next/style.js b/themes/next/style.js
index aaf580ad..daf6af46 100644
--- a/themes/next/style.js
+++ b/themes/next/style.js
@@ -19,6 +19,20 @@ const Style = () => {
       padding: 40px;
     }
 
+    // 菜单下划线动画
+    #theme-next .menu-link {
+      text-decoration: none;
+      background-image: linear-gradient(#4e80ee, #4e80ee);
+      background-repeat: no-repeat;
+      background-position: bottom center;
+      background-size: 0 2px;
+      transition: background-size 100ms ease-in-out;
+    }
+    #theme-next .menu-link:hover {
+      background-size: 100% 2px;
+      color: #4e80ee;
+    }
+
   `}</style>
 }