From 046b11ef2babfff4fd094bf9c0db7f9a6b4eb6f9 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 13 Dec 2021 12:34:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E5=BD=95=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=E6=96=87=E7=AB=A0=E5=85=B3=E8=81=94=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogAround.js | 23 +++++++++++++++++++++++
 components/TocDrawer.js  |  2 +-
 pages/article/[slug].js  | 27 ++++++++++-----------------
 3 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 components/BlogAround.js

diff --git a/components/BlogAround.js b/components/BlogAround.js
new file mode 100644
index 00000000..4bd6c3a6
--- /dev/null
+++ b/components/BlogAround.js
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function BlogAround ({ prev, next }) {
+  return <section className='text-gray-800 mb-8 lg:mb-32 border-t dark:text-gray-300 px-5 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
+    <Link href={`/article/${prev.slug}`} passHref>
+      <div className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
+        <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
+        </div>
+    </Link>
+    <Link href={`/article/${next.slug}`} passHref>
+      <div className='text-sm flex py-3 text-blue-500 hover:underline cursor-pointer'>{next.title}
+        <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
+      </div>
+    </Link>
+  </section>
+}
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 6fe0de6d..9f161edb 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -29,7 +29,7 @@ const TocDrawer = ({ post, cRef }) => {
         ' 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 overflow-y-auto'}>
           {post && <>
-            <div className='text-xl font-bold text-black bg-gray-50 dark:text-white py-3 px-6'>
+            <div className='text-xl font-bold text-black bg-gray-50 dark:text-white dark:bg-black py-3 px-6'>
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
             <Toc toc={post.toc}/>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 1167a0af..1f03857e 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -27,7 +27,8 @@ import TocDrawerButton from '@/components/TocDrawerButton'
 import { useGlobal } from '@/lib/global'
 import { getNotionPageData } from '@/lib/notion/getNotionData'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleDoubleLeft, faAngleDoubleRight, faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
+import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
+import BlogAround from '@/components/BlogAround'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -53,9 +54,9 @@ 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 duration-300'>
+      <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full'>
 
-        <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'>
+        <article itemScope itemType="https://schema.org/Movie" className='duration-300 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} />
@@ -84,6 +85,10 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </div>
           </section>
 
+          <section className='px-1 py-2 my-1 text-sm  font-light italic bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
+            {post.summary}
+          </section>
+
           {/* Notion文章主体 */}
           {blockMap && (
             <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
@@ -124,21 +129,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </div>
           </section>
 
-        </article>
+          <BlogAround prev={prev} next={next}/>
 
-        <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'>
-                <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>
+        </article>
 
         {/* 评论互动 */}
         <div