From f13ce77cd54a25123ab1176b9e5eda5cbdb43919 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 3 Dec 2021 17:18:53 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=8E=92=E7=89=88=E5=BE=AE=E8=B0=83?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=96=87=E7=AB=A0=E6=98=93=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CategoryGroup.js    |   2 +-
 components/Comment.js          |   8 +-
 components/JumpToTopButton.js  |  23 ++---
 components/LatestPostsGroup.js |   4 +-
 components/RecommendPosts.js   |   2 +-
 components/RewardButton.js     |   3 +-
 components/SearchInput.js      |   2 +-
 components/ShareBar.js         |  16 +--
 components/SideBar.js          |  10 +-
 components/TocDrawer.js        |   2 +-
 components/TocDrawerButton.js  |  10 +-
 layouts/BaseLayout.js          |  16 ++-
 pages/article/[slug].js        | 180 ++++++++++++++++-----------------
 13 files changed, 131 insertions(+), 147 deletions(-)

diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 0c598f31..56323fc8 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -5,7 +5,7 @@ import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   return <div>
-      <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800'>
+      <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
         {Object.keys(categories).map(category => {
           const selected = currentCategory === category
           return <Link key={category} href={`/category/${category}`} passHref>
diff --git a/components/Comment.js b/components/Comment.js
index cf31b7b2..d41d7de4 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -27,7 +27,6 @@ const Comment = ({ frontMatter }) => {
   const { theme } = useGlobal()
 
   return <div className='comment text-gray-800 dark:text-gray-300'>
-    {/* 评论插件 */}
     {BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
       <GitalkComponent
         options={{
@@ -46,9 +45,9 @@ const Comment = ({ frontMatter }) => {
       <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
     </div>
     )}
-    {BLOG.comment.provider === 'cusdis' && (
+    {BLOG.comment.provider === 'cusdis' && (<>
+      <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
       <div className='m-10'>
-        <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
         <CusdisComponent
           attrs={{
             host: BLOG.comment.cusdisConfig.host,
@@ -61,8 +60,7 @@ const Comment = ({ frontMatter }) => {
           lang={BLOG.lang.toLowerCase()}
         />
       </div>
-
-    )}
+    </>)}
   </div>
 }
 
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 6a124e3d..30855701 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -34,24 +34,17 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (
-    <div id='jump-to-top' className='right-0 fixed flex bottom-36 mr-4 duration-500 z-20 opacity-75'>
-      <div >
-        <div
-          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-          style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
-          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
-          <div className='text-center'>
-            <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
-              <FontAwesomeIcon icon={faArrowUp} />
-            </div>
-            {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
+  return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 duration-500 z-20'>
+      <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        className={(show ? 'animate__fadeInRight' : 'animate__fadeOutRight') + ' shadow-card bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
+        <div className='text-center'>
+          <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
+            <FontAwesomeIcon icon={faArrowUp} />
           </div>
+          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent} </div>)}
         </div>
       </div>
-    </div>
-
-  )
+    </div>)
 }
 
 export default JumpToTopButton
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 40ecb4d8..ef64f438 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -32,8 +32,8 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
         return (
           <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-500'>
+              className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1.5 px-5 flex'}>
+              <div className='mr-2 text-gray-500 text-xs leading-5'>
                 {formatDateFmt(post.lastEditedTime, 'MM/dd')}
               </div>
               <div
diff --git a/components/RecommendPosts.js b/components/RecommendPosts.js
index 149d497b..ce969734 100644
--- a/components/RecommendPosts.js
+++ b/components/RecommendPosts.js
@@ -39,7 +39,7 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
 
   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'>
+    <ul className='list-disc px-5 text-sm '>
       {filteredPosts.map(post => (
         <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer hover:underline'>{post.title}</a></Link></li>
       ))}
diff --git a/components/RewardButton.js b/components/RewardButton.js
index 8317bb81..c4b05984 100644
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -21,7 +21,8 @@ const RewardButton = () => {
   }
   return (
     <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'>
+      <div onMouseEnter={openPopover} onMouseLeave={closePopover}
+      className='bg-pink-500 py-2 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 rounded cursor-pointer'>
           <FontAwesomeIcon icon={faQrcode} className='mr-2' />
           <span>打赏一杯咖啡</span>
       </div>
diff --git a/components/SearchInput.js b/components/SearchInput.js
index 13e64356..d134386a 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -42,7 +42,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'pl-2 w-full transition leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
+      className={'pl-2 w-full transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
diff --git a/components/ShareBar.js b/components/ShareBar.js
index e620d418..aa12fc3b 100644
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -46,22 +46,22 @@ const ShareBar = ({ post }) => {
       className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
       <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>{locale.COMMON.SHARE}:</div>
       <div className='text-3xl cursor-pointer'>
-        <a className='hover:text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
+        <a className='text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
           <FontAwesomeIcon icon={faFacebookSquare}/>
         </a>
       </div>
       <div className='text-3xl cursor-pointer'>
-        <a className='hover:text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
+        <a className='text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
           <FontAwesomeIcon icon={faTwitterSquare}/>
         </a>
       </div>
       <div className='text-3xl cursor-pointer'>
-        <a className='hover:text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
+        <a className='text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
         <FontAwesomeIcon icon={faTelegram}/>
         </a>
       </div>
       <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
+        <a className='text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
           <FontAwesomeIcon icon={faWeixin}/>
           <div ref={popoverRef} className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2'}>
             <div className='p-2 bg-white border-0 duration-200 transform block z-50 font-normal shadow-xl mr-10'>
@@ -74,22 +74,22 @@ const ShareBar = ({ post }) => {
         </a>
       </div>
       <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-red-600' target='_blank' rel='noreferrer'href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
+        <a className='text-red-600' target='_blank' rel='noreferrer'href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
           <FontAwesomeIcon icon={faWeibo}/>
         </a>
       </div>
       <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-blue-400' target='_blank' rel='noreferrer'href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
+        <a className='text-blue-400' target='_blank' rel='noreferrer'href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
           <FontAwesomeIcon icon={faQq}/>
         </a>
       </div>
       <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-red-600' target='_blank' rel='noreferrer' href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} >
+        <a className='text-red-600' target='_blank' rel='noreferrer' href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} >
           <FontAwesomeIcon icon={faStar}/>
         </a>
       </div>
       <div className='cursor-pointer text-2xl'>
-        <a className='hover:text-red-600' onClick={copyUrl} >
+        <a className='text-red-600' onClick={copyUrl} >
           <FontAwesomeIcon icon={faLink}/>
         </a>
       </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index bf45abfa..66f28ef1 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -25,12 +25,12 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
  */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
-  return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+  return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <section>
       <InfoCard />
     </section>
 
-    <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-800 pb-4'}>
+    <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
 
       <section>
         {/* <hr className='dark:border-gray-700' /> */}
@@ -43,7 +43,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
       {/* 最新文章 */}
       {posts && (
-        <section className='mt-4'>
+        <section className='mt-12'>
           <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>
@@ -58,7 +58,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
       {/* 分类  */}
       {categories && (
-        <section className='mt-5'>
+        <section className='mt-12'>
           <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>
@@ -73,7 +73,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
       {/* 标签云  */}
       {tags && (
-        <section className='mt-5'>
+        <section className='mt-12'>
           <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>
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 9d6d3281..badb4638 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -27,7 +27,7 @@ const TocDrawer = ({ post, cRef }) => {
       <div
         className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border ' +
         ' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
-        ' w-60 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
+        ' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
           {post && <>
             <div className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
               {locale.COMMON.TABLE_OF_CONTENTS}
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index cfbac648..98bcfa29 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBook } from '@fortawesome/free-solid-svg-icons'
+import { faListOl } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 点击召唤目录抽屉
@@ -14,13 +14,11 @@ const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
 
   return (
-    <div id='toc-drawer-button' className='right-0 fixed flex top-40 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
+    <div id='toc-drawer-button' className='right-1 fixed flex bottom-52 duration-500 z-40 hidden' onClick={props.onClick}>
       <div className='transform hover:scale-105 duration-200 '>
-        <div style={{ borderRadius: '28px' }}
-          className={'animate__fadeInUp bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-xl'}>
+        <div className='animate__fadeInRight animate__animated bg-white dark:bg-gray-700 px-1 py-2.5 cursor-pointer shadow-card'>
           <div className='text-center dark:text-gray-100'>
-            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faBook} /> </div>
-            <div className='text-xs'>{locale.COMMON.TABLE_OF_CONTENTS}</div>
+            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
           </div>
         </div>
       </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 814f311b..066f934d 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -71,23 +71,21 @@ const BaseLayout = ({
       {/* 顶部导航栏 */}
       <div className='block lg:hidden'>
         <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories}
-                currentCategory={currentCategory} />
+          currentCategory={currentCategory} />
       </div>
 
       {/* Middle Wrapper */}
       <main className='flex dark:bg-black'>
-         <div className='hidden lg:block z-10'>
-           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
-         </div>
+        <div className='hidden lg:block z-10'>
+          <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
+        </div>
         <div className='flex flex-grow' ref={targetRef}>
           {children}
         </div>
         <JumpToTopButton targetRef={targetRef} showPercent={true} />
-        <div className='hidden lg:block fixed right-4 top-20 p-1 rounded-full
-         bg-white text-black
-         dark:border-gray-500 dark:bg-gray-700 dark:text-white
-         ' style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}>
-          <DarkModeButton/>
+        <div className='hidden lg:block fixed right-1 bottom-52 p-1
+         bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
+          <DarkModeButton />
         </div>
       </main>
 
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index d25ccdd7..92e2dcc6 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -51,110 +51,106 @@ 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 dark:bg-black pt-16 bg-gray-100'>
+    <article id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black pt-16 bg-gray-200'>
 
-      <div className='w-screen md:w-full pt-10 max-w-5xl mx-auto'>
-        {post.type && !post.type.includes('Page') && (<>
-
-          <div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 animate__fadeIn animate__animated'>
+      <div className='max-w-5xl mx-auto'>
+        <div className='w-screen md:w-full pt-10 '>
+          {post.type && !post.type.includes('Page') && (<div className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
             <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>)}
+        </div>
 
-          <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>
-            <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 className='animate__fadeIn animate__animated subpixel-antialiased w-screen md:w-full lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+          {/* 文章Title */}
+          <h1 className='font-bold text-4xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
 
-              {/* 不蒜子 */}
-              <div id='busuanzi_container_page_pv' className='hidden'>
-                <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2'/>
-                &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 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='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 && (
-          <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
-            components={{
-              equation: Equation,
-              code: Code,
-              collectionRow: CollectionRow,
-              collection: Collection
-            }}
-          />
-        )}
-
-        {/* 版权声明 */}
-        <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'>
-          <ul>
-            <li>本文作者: {BLOG.author}</li>
-            <li>本文链接: <a href={url}>{url}</a></li>
-            <li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
-          </ul>
-        </section>
-
-        {/* 推荐文章 */}
-        <RecommendPosts currentPost={post} totalPosts={allPosts} />
-
-        {/* 标签列表 */}
-        <section className='md:flex md:justify-between'>
-          {post.tagItems && (
-            <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
-              <div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div>
-              {post.tagItems.map(tag => (
-                <TagItem key={tag.name} tag={tag} />
-              ))}
-            </div>
+          {/* Notion文章主体 */}
+          {blockMap && (
+            <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+              components={{
+                equation: Equation,
+                code: Code,
+                collectionRow: CollectionRow,
+                collection: Collection
+              }}
+            />
           )}
-          <div>
-            <ShareBar post={post} />
-          </div>
-        </section>
 
-        <RewardButton />
+          {/* 版权声明 */}
+          <section className='text-sm overflow-auto dark:bg-gray-800 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
+            <ul>
+              <li>本文作者: {BLOG.author}</li>
+              <li>本文链接: <a href={url}>{url}</a></li>
+              <li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
+            </ul>
+          </section>
 
-        {/* 上一篇下一篇文章 */}
-        <div className='text-gray-800 my-5 dark:text-gray-300'>
-          <hr />
-          <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'>
-                <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}</div>
-            </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 my-1' />
+          {/* 推荐文章 */}
+          <RecommendPosts currentPost={post} totalPosts={allPosts} />
+
+          {/* 标签列表 */}
+          <section className='md:flex md:justify-between'>
+            {post.tagItems && (
+              <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
+                <div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div>
+                {post.tagItems.map(tag => (
+                  <TagItem key={tag.name} tag={tag} />
+                ))}
+              </div>
+            )}
+            <div>
+              <ShareBar post={post} />
+            </div>
+          </section>
+
+          <div className='flex-nowrap flex  mt-1 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 dark:text-gray-400 mt-3 ml-2' />
+              &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
+            </div>
+          </div>
+
+        </div>
+
+        <div className='w-screen md:w-full px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+          <div className='py-10'>
+            <RewardButton />
           </div>
         </div>
-      </div>
+        <div className='text-gray-800 dark:text-gray-300 dark:bg-gray-900 bg-gray-50 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'>
+                  <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}</div>
+              </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 my-1' />
+                </div>
+              </Link>
+            </div>
+          </div>
 
-      {/* 评论互动 */}
-      <div
-        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
+          className='my-10 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700'>
+          <Comment frontMatter={post} />
+        </div>
       </div>
     </article>