Merge pull request #44 from tangly1024/theme-medium

文章关联

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>
 }

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>
+}