找回404,文章动画调整

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

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,