From 1d6473eac11c7c9ec1076311325c7ef855f8f787 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 19 Oct 2021 16:46:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=BE=E5=9B=9E404,=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPost.js        |  2 +-
 components/MenuButtonGroup.js | 12 +++++-------
 pages/404.js                  | 25 +++++++++++++++----------
 pages/article/[slug].js       |  9 ++-------
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/components/BlogPost.js b/components/BlogPost.js
index 93494898..9b5f9e69 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -5,7 +5,7 @@ import Link from 'next/link'
 const BlogPost = ({ post }) => {
   return (
     <article key={post.id}
-             className='animate__animated animate__fadeIn inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+             className='animate__animated animate__slideInUp animate__faster inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <Link href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index cf349c2e..5a17e9b5 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useLocale } from '@/lib/locale'
+import Link from 'next/link'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
   const locale = useLocale()
@@ -20,17 +21,14 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
       {links.map(
         link =>
           link.show && (
-            <a
-              key={link.id + link.icon}
-              title={link.to}
-              href={link.to}
-              className='py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'
-            >
+            <Link key={link.id + link.icon} title={link.to} href={link.to} >
+              <a className='py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle' >
                 <div className='my-auto w-5 text-2xl justify-center flex'>
                   <i className={'fa ' + link.icon} />
                 </div>
                 <div className={'ml-4 w-32'}>{link.name}</div>
-            </a>
+              </a>
+            </Link>
           )
       )}
     </div>
diff --git a/pages/404.js b/pages/404.js
index a8b252a3..40715dbf 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -3,22 +3,27 @@
  * @returns {JSX.Element}
  * @constructor
  */
-import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import BaseLayout from '@/layouts/BaseLayout'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
 
 export default function Custom404 () {
+  const router = useRouter()
   useEffect(() => {
     setTimeout(() => {
-      window.location.href = '/'
-    }, 3000)
+      router.push('/')
+    }, 3000000)
   })
 
-  return <div
-    className='text-black bg-white h-screen text-center justify-center content-center items-center flex flex-col'>
-    <div>
-      <h1 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'>404</h1>
-      <div className='inline-block text-left h-32 leading-10 align-middle'>
-        <h2 className='m-0 p-0'>页面丢失了，3秒后返回首页</h2></div>
+  return <BaseLayout meta={{ title: `${BLOG.title} | 页面找不到啦` }}>
+    <div
+      className='text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
+      <div>
+        <h1 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='fa fa-spinner mr-2 animate-spin'/>404</h1>
+        <div className='inline-block text-left h-32 leading-10 align-middle'>
+          <h2 className='m-0 p-0'>页面找不到了，3秒后返回首页</h2></div>
+      </div>
     </div>
-  </div>
+  </BaseLayout>
 }
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 2bda08cc..392c6ca8 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -15,19 +15,14 @@ import Comment from '@/components/Comment'
 import TocBar from '@/components/TocBar'
 import BaseLayout from '@/layouts/BaseLayout'
 import { useRef } from 'react'
+import Custom404 from '@/pages/404'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 const BlogPost = ({ post, blockMap, tags, prev, next }) => {
   if (!post) {
-    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>
+    return <Custom404/>
   }
   const meta = {
     title: post.title,