From e4f7e179748440449f06cec3cead951ccda4ad57 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 19 Oct 2021 14:12:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8Link=E6=9B=BF=E6=8D=A2<a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPost.js     |  9 +++++----
 components/BlogPostMini.js | 30 ++++++++++++++++--------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/BlogPost.js b/components/BlogPost.js
index 61a85868..93494898 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import TagItemMini from '@/components/TagItemMini'
+import Link from 'next/link'
 
 const BlogPost = ({ post }) => {
   return (
@@ -7,16 +8,16 @@ const BlogPost = ({ post }) => {
              className='animate__animated animate__fadeIn inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
-          <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
+          <Link href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
             <img className='w-full max-h-60 object-cover cursor-pointer transform hover:scale-110 duration-500' src={post.page_cover} alt={post.title} />
-          </a>
+          </Link>
         )}
 
         <div className='px-8 py-6'>
-          <a href={`${BLOG.path}/article/${post.slug}`}
+          <Link href={`${BLOG.path}/article/${post.slug}`}
              className='block my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
             {post.title}
-          </a>
+          </Link>
           <div className='flex flex-nowrap'>
             {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
             <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
diff --git a/components/BlogPostMini.js b/components/BlogPostMini.js
index 4e8d01f6..c71b5e57 100644
--- a/components/BlogPostMini.js
+++ b/components/BlogPostMini.js
@@ -1,22 +1,24 @@
 import BLOG from '@/blog.config'
+import Link from 'next/link'
 
 const BlogPostMini = ({ post }) => {
   return (
-    <a key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`}
-       className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
-      {/*  封面图 */}
-      {post.page_cover && post.page_cover.length > 1 && (
-        <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
-      )}
+    <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
+     <div className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
+       {/*  封面图 */}
+       {post.page_cover && post.page_cover.length > 1 && (
+         <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
+       )}
 
-      <main className='px-2 overflow-x-hidden'>
-        <div
-          className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline whitespace-nowrap'>
-          {post.title}
-        </div>
-        <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
-      </main>
-    </a>
+       <main className='px-2 overflow-x-hidden'>
+         <div
+           className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline whitespace-nowrap'>
+           {post.title}
+         </div>
+         <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
+       </main>
+     </div>
+    </Link>
   )
 }