simple-theme article-around

themes/medium/components/ArticleAround.js

@@ -28,5 +28,5 @@ export default function ArticleAround ({ prev, next }) {
 
       </Link>
     </section>
-  );
+  )
 }

themes/simple/LayoutSlug.js

@@ -3,9 +3,10 @@ import { ArticleLock } from './components/ArticleLock'
 import NotionPage from '@/components/NotionPage'
 import { ArticleInfo } from './components/ArticleInfo'
 import Comment from '@/components/Comment'
+import ArticleAround from './components/ArticleAround'
 
 export const LayoutSlug = props => {
-  const { post, lock, validPassword } = props
+  const { post, lock, validPassword, prev, next } = props
 
   if (!post) {
     return <LayoutBase {...props} />
@@ -21,6 +22,7 @@ export const LayoutSlug = props => {
                     {post && <>
                         <ArticleInfo post={post} />
                         <NotionPage post={post} />
+                        {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
                         <Comment frontMatter={post}/>
                     </>}
                 </div>}

themes/simple/components/ArticleAround.js

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return (
+        <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+            {prev && <Link
+                href={`/${prev.slug}`}
+                passHref
+                className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+
+                <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+
+            </Link>}
+            {next && <Link
+                href={`/${next.slug}`}
+                passHref
+                className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
+                {next.title}
+                <i className='ml-1 my-1 fas fa-angle-double-right' />
+
+            </Link>}
+        </section>
+  )
+}