feature:

版面微调

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

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>

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>