From ea024762d1d8dfbb5a1ce48e0eab29abcb0c6dee Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Wed, 8 Dec 2021 20:04:04 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E7=89=88=E9=9D=A2=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostArchive.js  | 27 ++++++++-------------------
 components/BlogPostCard.js     |  2 +-
 components/LatestPostsGroup.js |  4 ++--
 pages/article/[slug].js        | 18 +++++++++---------
 4 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/components/BlogPostArchive.js b/components/BlogPostArchive.js
index 15a906eb..1e235174 100644
--- a/components/BlogPostArchive.js
+++ b/components/BlogPostArchive.js
@@ -15,30 +15,19 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
   } else {
     return <div ref={targetRef}>
       <div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
-      <ul className='flex flex-wrap space-y-1'>
+      <ul>
         {posts.map(post => (
-          <Link key={post.id} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <li className='w-full border-l pl-2 hover:underline cursor-pointer hover:scale-105 transform duration-500'>
-              <div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-blue-400 text-blue-600'>{post.title}</span></div>
-            </li>
-          </Link>
+          <li key={post.id} className='border-l-2 p-1  hover:scale-x-105 hover:border-blue-500 transform duration-500'>
+            <div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
+              <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
+                <span className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</span>
+              </Link>
+            </div>
+          </li>
         ))}
       </ul>
     </div>
   }
 }
 
-/**
- * 获取从第1页到指定页码的文章
- * @param page 第几页
- * @param totalPosts 所有文章
- * @param postsPerPage 每页文章数量
- * @returns {*}
- */
-const getPostByPage = function (page, totalPosts, postsPerPage) {
-  return totalPosts.slice(
-    0,
-    postsPerPage * page
-  )
-}
 export default BlogPostArchive
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 8bb7533f..19852627 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -11,7 +11,7 @@ const BlogPostCard = ({ post, tags }) => {
     <div key={post.id} className='hover:shadow-2xl shadow-md mb-14 duration-300 md:grid md:grid-cols-5 rounded-xl dark:border-gray-600 animate__animated animate__fadeIn animate__faster
      w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
       <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='w-full h-60 duration-200 cursor-pointer transform col-span-2 overflow-hidden rounded-l-2xl'>
+        <div className='w-full h-60 rounded-t-xl md:rounded-t-none md:rounded-l-xl md:h-full duration-200 cursor-pointer transform col-span-2 overflow-hidden'>
           <Image className='hover:scale-105 transform duration-500' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 175ec24b..3c5fd670 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -32,13 +32,13 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
             <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex justify-between'}>
-              <div className={ ' text-xs py-1 flex w-44 overflow-x-hidden whitespace-nowrap overflow-hidden pt-1 ' +
+              <div className={ 'text-xs py-1 flex w-40 overflow-x-hidden whitespace-nowrap overflow-hidden ' +
                 'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' +
                   (selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300')
                 }>
                 {post.title}
               </div>
-              <div className='mr-2 text-gray-500 text-xs py-1'>
+              <div className='text-gray-500 text-xs py-1'>
                 {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
               </div>
             </div>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 5247b5f3..1167a0af 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -53,16 +53,16 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
 
     <div id='article-wrapper' ref={targetRef} className='flex-grow'>
 
-      <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full hover:shadow-2xl'>
-        {post.type && !post.type.includes('Page') && (<>
-          <header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 rounded-t-2xl overflow-hidden'>
-            <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
-          </header>
-        </>)}
+      <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full duration-300'>
 
-        <article itemScope itemType="https://schema.org/Movie" className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+        <article itemScope itemType="https://schema.org/Movie" className='hover:shadow-2xl pt-10 animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+          {post.type && !post.type.includes('Page') && (<>
+            <header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden'>
+              <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
+            </header>
+          </>)}
           {/* 文章Title */}
-          <h2 className='font-bold text-3xl text-black dark:text-white font-serif'> {post.title}</h2>
+          <h2 className='font-bold text-3xl text-black dark:text-white font-serif pt-10'> {post.title}</h2>
           <hr className='mt-4' />
           <section className='flex-nowrap flex  mt-1 dark:text-white font-light'>
             <Link href={`/category/${post.category}`} passHref>
@@ -126,7 +126,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
 
         </article>
 
-        <div className='text-gray-800 dark:text-gray-300 dark:bg-gray-900 bg-gray-50 px-5 '>
+        <div className='text-gray-800 dark:text-gray-300 dark:bg-gray-900 bg-gray-100 px-5 '>
           <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
             <Link href={`/article/${prev.slug}`} passHref>
               <div className='py-3 text-blue-500 text-lg hover:underline cursor-pointer'>