开发环境添加中转页

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>

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

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,