From 1ddd7adf3780d1c28c2e2e7efa6fb6f8cda65b51 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 3 Dec 2021 16:11:05 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20=E8=AF=84=E8=AE=BA=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E7=A9=BA=E7=99=BD=EF=BC=9B=20=E8=B5=9E=E8=B5=8F=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=BE=AE=E8=B0=83=EF=BC=9B=20=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E3=80=81=E8=AF=A6=E6=83=85=E9=A1=B5=E5=BE=AE=E8=B0=83?=
 =?UTF-8?q?=E6=8E=92=E7=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Comment.js          | 14 ++++----
 components/LatestPostsGroup.js |  7 ++--
 components/RecommendPosts.js   |  2 +-
 components/RewardButton.js     | 10 +++---
 components/SideBar.js          | 12 +++----
 pages/article/[slug].js        | 64 ++++++++++++++++------------------
 6 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/components/Comment.js b/components/Comment.js
index c376d704..cf31b7b2 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -28,7 +28,7 @@ const Comment = ({ frontMatter }) => {
 
   return <div className='comment text-gray-800 dark:text-gray-300'>
     {/* 评论插件 */}
-    {BLOG.comment.provider === 'gitalk' && (
+    {BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
       <GitalkComponent
         options={{
           id: frontMatter.id,
@@ -41,12 +41,13 @@ const Comment = ({ frontMatter }) => {
           distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
         }}
       />
-    )}
-    {BLOG.comment.provider === 'utterances' && (
+    </div>)}
+    {BLOG.comment.provider === 'utterances' && (<div className='m-10'>
       <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+    </div>
     )}
     {BLOG.comment.provider === 'cusdis' && (
-      <>
+      <div className='m-10'>
         <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
         <CusdisComponent
           attrs={{
@@ -59,9 +60,10 @@ const Comment = ({ frontMatter }) => {
           }}
           lang={BLOG.lang.toLowerCase()}
         />
-      </>
+      </div>
 
-    )}</div>
+    )}
+  </div>
 }
 
 export default Comment
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index c52b2fdd..40ecb4d8 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -2,7 +2,6 @@ import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { formatDateFmt } from '@/lib/formatDate'
 import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
 
 /**
  * 最新文章列表
@@ -31,15 +30,15 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
       {postsSortByDate.map(post => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
-          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`}>
+          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
             <div
               className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
-              <div className='mr-2 text-gray-400'>
+              <div className='mr-2 text-gray-500'>
                 {formatDateFmt(post.lastEditedTime, 'MM/dd')}
               </div>
               <div
                 className={
-                  (selected ? 'dark:text-white text-black ' : 'text-gray-500 ') +
+                  (selected ? 'dark:text-white text-black ' : 'text-gray-500') +
                   ' text-sm flex w-50 overflow-x-hidden whitespace-nowrap  hover:text-black dark:hover:text-white cursor-pointer hover:underline'
                 }>
                 {post.title}
diff --git a/components/RecommendPosts.js b/components/RecommendPosts.js
index 834271fc..149d497b 100644
--- a/components/RecommendPosts.js
+++ b/components/RecommendPosts.js
@@ -37,7 +37,7 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
 
   const { locale } = useGlobal()
 
-  return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 mb-2  border-l-4 border-yellow-500'>
+  return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 my-2  border-l-4 border-yellow-500'>
     <h2 className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</h2>
     <ul className='list-disc px-5'>
       {filteredPosts.map(post => (
diff --git a/components/RewardButton.js b/components/RewardButton.js
index 359d0568..8317bb81 100644
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -20,15 +20,15 @@ const RewardButton = () => {
     }
   }
   return (
-    <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
-      <div className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
+    <div className='justify-center'>
+      <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
           <FontAwesomeIcon icon={faQrcode} className='mr-2' />
           <span>打赏一杯咖啡</span>
       </div>
 
-      <div id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
-           <div className='w-72 bg-black'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
-           <div className='w-72 bg-black'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
+      <div onMouseEnter={openPopover} onMouseLeave={closePopover} id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
+           <div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
+           <div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
       </div>
     </div>
   )
diff --git a/components/SideBar.js b/components/SideBar.js
index f4d9301a..bf45abfa 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -38,14 +38,14 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
         <section className='p-5'>
           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </section>
-        <hr classNaÍme='dark:border-gray-700' />
+        <hr className='dark:border-gray-700' />
       </section>
 
       {/* 最新文章 */}
       {posts && (
         <section className='mt-4'>
-          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
+          <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
+            <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
             <Link href='/archive' passHref>
               <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -59,8 +59,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 分类  */}
       {categories && (
         <section className='mt-5'>
-          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
+          <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
+            <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
               <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -74,7 +74,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 标签云  */}
       {tags && (
         <section className='mt-5'>
-          <div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
+          <div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
             <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4' />{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
               <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index bd1cbc5e..2952873f 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -51,48 +51,46 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
   return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
     <Progress targetRef={targetRef} />
 
-    <article id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
+    <article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-100'>
 
       <div className='w-screen md:w-full pt-10 max-w-5xl mx-auto'>
         {post.type && !post.type.includes('Page') && (<>
-          {/* 封面图 */}
 
-            <div style={{ height: '30rem' }} className='w-full transform duration-200 md:flex-shrink-0 animate__fadeIn animate__animated'>
-              <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='lazy' objectFit='cover' layout='fill' alt={post.title} />
-            </div>
+          <div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 animate__fadeIn animate__animated'>
+            <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='lazy' objectFit='cover' layout='fill' alt={post.title} />
+          </div>
 
-          <div className='dark:border-gray-700 bg-white dark:bg-gray-800'>
+          <div className='dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pb-3'>
             {/* 文章信息 */}
             <h1 className='font-bold text-2xl px-5 pt-5 text-black dark:text-white animate__animated animate__fadeIn'> {post.title}</h1>
-            <h2 className='text-gray-500 px-5 pt-3 text-sm dark:text-gray-400 animate__animated animate__fadeIn'>{post.summary}</h2>
-            <div className='justify-between mt-5 flex flex-wrap bg-gray-100 p-2 dark:bg-gray-700 dark:text-white border-b-2 dark:border-gray-500'>
-              <div className='flex-nowrap flex'>
-                <Link href={`/category/${post.category}`} passHref>
-                  <div className='cursor-pointer text-md py-2 mx-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
-                    <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
-                  </div>
-                </Link>
-                {post.type[0] !== 'Page' && (
-                  <div className='flex items-start text-gray-500 dark:text-gray-300 leading-10'>
-                    {formatDate(
-                      post?.date?.start_date || post.createdTime,
-                      BLOG.lang
-                    )}
-                  </div>
-                )}
-              </div>
+            <div className='flex-nowrap flex  mt-1  mx-4 dark:text-white'>
+              <Link href={`/category/${post.category}`} passHref>
+                <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
+                  <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
+                </div>
+              </Link>
+              {post.type[0] !== 'Page' && (
+                <div className='pl-1 text-gray-400 dark:text-gray-300 leading-10'>
+                  {formatDate(
+                    post?.date?.start_date || post.createdTime,
+                    BLOG.lang
+                  )}
+                </div>
+              )}
+
               {/* 不蒜子 */}
               <div id='busuanzi_container_page_pv' className='hidden'>
-                <FontAwesomeIcon icon={faEye} className='text-gray-500 leading-none m-2.5' />
+                <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2'/>
                 &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
               </div>
             </div>
+            <h2 className='text-gray-600 px-5 pt-1 text-md dark:text-gray-400'>{post.summary}</h2>
           </div>
 
         </>)}
       </div>
 
-      <div className='shadow-card  w-screen md:w-full md:px-10 px-5 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
+      <div className='w-screen md:w-full md:px-10 px-5 py-2 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
 
         {/* Notion文章主体 */}
         {blockMap && (
@@ -106,12 +104,6 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
           />
         )}
 
-        {/* 赞赏按钮 */}
-        <RewardButton />
-
-        {/* 推荐文章 */}
-        <RecommendPosts currentPost={post} totalPosts={allPosts} />
-
         {/* 版权声明 */}
         <section
           className='overflow-auto dark:bg-gray-800 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
@@ -122,6 +114,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
           </ul>
         </section>
 
+        {/* 推荐文章 */}
+        <RecommendPosts currentPost={post} totalPosts={allPosts} />
+
         {/* 标签列表 */}
         <section className='md:flex md:justify-between'>
           {post.tagItems && (
@@ -137,6 +132,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
           </div>
         </section>
 
+        <RewardButton />
+
         {/* 上一篇下一篇文章 */}
         <div className='text-gray-800 my-5 dark:text-gray-300'>
           <hr />
@@ -147,7 +144,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </Link>
             <Link href={`/article/${next.slug}`} passHref>
               <div className='flex py-3 text-blue-500 text-lg hover:underline cursor-pointer'>{next.title}
-                <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1' />
+                <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
               </div>
             </Link>
           </div>
@@ -156,10 +153,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
 
       {/* 评论互动 */}
       <div
-        className='shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-700'>
+        className='my-10 w-screen md:w-full overflow-x-auto max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-700'>
         <Comment frontMatter={post} />
       </div>
-
     </article>
 
     {/* 悬浮目录按钮 */}