From cc289bb5454da73f6b4dca8835c7150191d4b183 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 18 Oct 2021 13:54:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E7=8E=AF=E5=A2=83=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=AD=E8=BD=AC=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostListScroll.js | 11 +++--------
 layouts/BaseLayout.js            |  6 +++---
 pages/article/[slug].js          |  9 +++++++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index fc98dff9..d6484df0 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -66,7 +66,7 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty />
   } else {
-    return <div id='post-list-wrapper' className='pt-28 md:pt-32 px-2 md:px-20' ref={targetRef}>
+    return <div id='post-list-wrapper' className='pt-28 md:pt-32 px-2 md:px-20 dark:bg-gray-900' ref={targetRef}>
       <div>
         {/* 文章列表 */}
         <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
@@ -76,13 +76,8 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
         </div>
 
         <div className='flex'>
-          {hasMore
-            ? (<div className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer'
-                    onClick={handleGetMore}> 加载更多 </div>)
-            : (
-              <div className='w-full my-4 py-4 bg-gray-200 text-center'> 加载完了😰 </div>
-              )}
-
+          <div className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
+               onClick={handleGetMore}> {hasMore ? '继续加载' : '加载完了😰'} </div>
         </div>
       </div>
     </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 1d05fe56..d5de2544 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -50,10 +50,10 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
       {/* Middle Wrapper */}
       <main className='flex bg-gray-100'>
         <SideBar tags={tags} post={post} />
-        <div className='flex flex-grow' ref={targetRef} >
-           {children}
+        <div className='flex flex-grow' ref={targetRef}>
+          {children}
+          <JumpToTop targetRef={targetRef} showPercent={false} />
         </div>
-        <JumpToTop targetRef={targetRef} showPercent={false} />
       </main>
 
       <Footer />
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 6a8629a3..191c9429 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -13,7 +13,6 @@ import ShareBar from '@/components/ShareBar'
 import BlogPostMini from '@/components/BlogPostMini'
 import Comment from '@/components/Comment'
 import TocBar from '@/components/TocBar'
-import JumpToTop from '@/components/JumpToTop'
 import BaseLayout from '@/layouts/BaseLayout'
 import { useRef } from 'react'
 
@@ -22,7 +21,13 @@ const mapPageUrl = id => {
 }
 const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
   if (!post) {
-    return <>空白页</>
+    return <BaseLayout meta={{ title: `${BLOG.title} | 加载中` }}>
+      <div className='w-full h-full flex justify-center mx-auto dark:bg-gray-800'>
+        <div className='dark:text-gray-300 text-black align-middle text-center my-auto animate-pulse'>
+          <div>Loading...</div>
+        </div>
+      </div>
+    </BaseLayout>
   }
   const meta = {
     title: post.title,