增加多主题的页面404跳转功能

themes/gitbook/index.js

@@ -404,14 +404,34 @@ const LayoutArchive = props => {
 }
 
 /**
- * 404
+ * 404 页面
+ * @param {*} props
+ * @returns
  */
 const Layout404 = props => {
-  return (
-    <div className='w-full h-96 py-80 flex justify-center items-center'>
-      404 Not found.
-    </div>
-  )
+  const router = useRouter()
+  useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
+    setTimeout(() => {
+      const article = isBrowser && document.getElementById('article-wrapper')
+      if (!article) {
+        router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
+        })
+      }
+    }, 3000)
+  }, [])
+
+  return <>
+        <div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
+            <div className='dark:text-gray-200'>
+                <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
+                <div className='inline-block text-left h-32 leading-10 items-center'>
+                    <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
+                </div>
+            </div>
+        </div>
+    </>
 }
 
 /**