From 3d02abf98e34df2e0ee259ba4b0c839bf45dea65 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 1 Dec 2021 13:23:03 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20404=E9=A1=B5=E9=9D=A2=E6=A3=80?=
 =?UTF-8?q?=E6=B5=8B=E6=96=87=E7=AB=A0=E5=8A=A0=E8=BD=BD=EF=BC=9B=20Page?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=8E=92=E7=89=88=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  |   1 +
 components/RewardButton.js |   5 +-
 pages/404.js               |   8 ++-
 pages/article/[slug].js    | 118 ++++++++++++++++++-------------------
 4 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/README.md b/README.md
index 925ba98e..8622c2c2 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@
 - 评论、搜索、标签、分类
 - 订阅、网站统计
 - 本地化多语言
+- 服务端渲染、优秀的SEO
 
 **🎨 &nbsp;美观，轻松自定义**
 
diff --git a/components/RewardButton.js b/components/RewardButton.js
index f431ca1a..3726710f 100644
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -5,9 +5,8 @@ import React from 'react'
  * @returns {JSX.Element}
  * @constructor
  */
-const   RewardButton = () => {
+const RewardButton = () => {
   const [popoverShow, setPopoverShow] = React.useState(false)
-  const btnRef = React.createRef()
 
   const openPopover = () => {
     setPopoverShow(true)
@@ -16,7 +15,7 @@ const   RewardButton = () => {
     setPopoverShow(false)
   }
   return (
-    <div onMouseEnter={openPopover} onMouseLeave={closePopover}>
+    <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
       <div className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
           <span className='fa fa-qrcode mr-2' />
           <span>打赏一杯咖啡</span>
diff --git a/pages/404.js b/pages/404.js
index c2a21083..ade77625 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -11,8 +11,14 @@ import { useRouter } from 'next/router'
 export default function Custom404 () {
   const router = useRouter()
   useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
-      router.push('/')
+      if (window) {
+        const article = document.getElementById('article-wrapper')
+        if (!article) {
+          router.push('/')
+        }
+      }
     }, 3000)
   })
 
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index cfc27311..28d4da7e 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -47,75 +47,71 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
   return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
     <Progress targetRef={targetRef} />
 
-    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
       {/* 中央区域 wrapper */}
-      <header
-        className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mt-16 mb-2 lg:mt-32 md:flex-shrink-0 animate__fadeIn animate__animated'>
-        {/* 封面图 */}
-        {post.page_cover && post.page_cover.length > 1 && (
-          <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
-               src={post.page_cover} alt={post.title} />
-        )}
-      </header>
+      {post.type && !post.type.includes('Page') && (<>
+        <header
+          className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated'>
+          {/* 封面图 */}
+          {post.page_cover && post.page_cover.length > 1 && (
+            <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
+                 src={post.page_cover} alt={post.title} />
+          )}
+        </header>
+      </>)}
 
       <article
         className='hover:shadow-2xl duration-200 shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
-        {/* 文章标题 */}
-        <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
-          {post.title}
-        </h1>
 
-        <h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
-          {post.summary}
-        </h2>
+        {post.type && !post.type.includes('Page') && (<>
+            {/* 文章信息 */}
+            <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'> {post.title}</h1>
+            <h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>{post.summary}</h2>
+            <div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
+              <div className='flex-nowrap flex'>
+                <div className='py-2 opacity-50'>
+                  {locale.COMMON.CATEGORY}：
+                </div>
+                <Link href={`/category/${post.category}`} passHref>
+                  <div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
+                    className='fa fa-folder-open-o mr-1' />{post.category}</div>
+                </Link>
 
-        {/* 文章作者等关联信息 */}
-        <div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
-          <div className='flex-nowrap flex'>
-            <div className='py-2 opacity-50'>
-              {locale.COMMON.CATEGORY}：
-            </div>
-            <Link href={`/category/${post.category}`} passHref>
-              <div className='cursor-pointer text-md py-2 mx-3 hover:underline'><i
-                className='fa fa-folder-open-o mr-1' />{post.category}</div>
-            </Link>
-
-            {post.type[0] !== 'Page' && (
-              <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
-                {formatDate(
-                  post?.date?.start_date || post.createdTime,
-                  BLOG.lang
+                {post.type[0] !== 'Page' && (
+                  <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
+                    {formatDate(
+                      post?.date?.start_date || post.createdTime,
+                      BLOG.lang
+                    )}
+                  </div>
                 )}
               </div>
-            )}
-          </div>
 
-          {/* 不蒜子 */}
-          <div id='busuanzi_container_page_pv' className='hidden'>
-            <div className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
-              &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+              {/* 不蒜子 */}
+              <div id='busuanzi_container_page_pv' className='hidden'>
+                <div className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
+                  &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+        </>)}
 
-        <div className='mb-10'>
-          {/* Notion文章主体 */}
-          {blockMap && (
-            <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
-                            components={{
-                              equation: Equation,
-                              code: Code,
-                              collectionRow: CollectionRow,
-                              collection: Collection
-                            }}
-            />
-          )}
-        </div>
+        {/* Notion文章主体 */}
+        {blockMap && (
+          <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+                          components={{
+                            equation: Equation,
+                            code: Code,
+                            collectionRow: CollectionRow,
+                            collection: Collection
+                          }}
+          />
+        )}
 
-        <div className='flex justify-center pb-10'>
-          <RewardButton />
-        </div>
+        {/* 赞赏按钮 */}
+        <RewardButton />
 
+        {/* 推荐文章 */}
         <RecommendPosts currentPost={post} totalPosts={posts} />
 
         {/* 版权声明 */}
@@ -128,8 +124,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           </ul>
         </section>
 
+        {/* 标签列表 */}
         <section className='md:flex md:justify-between'>
-
            {post.tagItems && (
             <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
               <div className='hidden md:block dark:text-gray-300'>{locale.COMMON.TAGS}：</div>
@@ -138,13 +134,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
               ))}
             </div>
            )}
-
           <div>
             <ShareBar post={post} />
           </div>
-
         </section>
 
+        {/* 上一篇下一篇文章 */}
         <div className='text-gray-800 my-5 dark:text-gray-300'>
           <hr />
           <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
@@ -168,6 +163,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
 
     </div>
 
+    {/* 悬浮目录按钮 */}
     <div className='block lg:hidden'>
       <TocDrawerButton onClick={() => {
         drawerRight.current.handleSwitchVisible()
@@ -183,7 +179,6 @@ export async function getStaticPaths () {
   let posts = []
   if (BLOG.isProd) {
     posts = await getAllPosts({ from: 'slug - paths', includePage: true })
-    posts = posts.filter(post => post.status[0] === 'Published')
   }
   return {
     paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
@@ -192,8 +187,7 @@ export async function getStaticPaths () {
 }
 
 export async function getStaticProps ({ params: { slug } }) {
-  let posts = await getAllPosts({ from: 'slug-props' })
-  posts = posts.filter(post => post.status[0] === 'Published')
+  let posts = await getAllPosts({ from: 'slug-props', includePage: true })
   const post = posts.find(t => t.slug === slug)
   if (!post) {
     return {