From 7120781e605c47210fd2de731353fd044c32a33a Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 8 Feb 2022 12:50:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=85=B3=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/LayoutSlug.js               |  5 +++--
 themes/Medium/components/ArticleAround.js | 26 +++++++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 themes/Medium/components/ArticleAround.js

diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index 79ac1dc3..fa1b5b8f 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/themes/Medium/LayoutSlug.js
@@ -15,13 +15,14 @@ import formatDate from '@/lib/formatDate'
 import Link from 'next/link'
 import mediumZoom from 'medium-zoom'
 import { useEffect, useRef } from 'react'
+import ArticleAround from './components/ArticleAround'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 
 export const LayoutSlug = (props) => {
-  const { post } = props
+  const { post, prev, next } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
     description: post.summary,
@@ -86,8 +87,8 @@ export const LayoutSlug = (props) => {
       )}
     </section>
     <div>
+      <ArticleAround prev={prev} next={next}/>
       <Comment frontMatter={post}/>
-
     </div>
   </LayoutBase>
 }
diff --git a/themes/Medium/components/ArticleAround.js b/themes/Medium/components/ArticleAround.js
new file mode 100644
index 00000000..577198cc
--- /dev/null
+++ b/themes/Medium/components/ArticleAround.js
@@ -0,0 +1,26 @@
+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 ArticleAround ({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return <section className='text-gray-800 h-12 flex items-center justify-between space-x-5 my-4'>
+    <Link href={`/article/${prev.slug}`} passHref>
+      <a className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+        <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
+      </a>
+    </Link>
+    <Link href={`/article/${next.slug}`} passHref>
+      <a className='text-sm  cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
+        <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
+      </a>
+    </Link>
+  </section>
+}