找回404,文章动画调整

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

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>

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,