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

2026-05-21 23:16:48 +00:00 · 2024-08-28 16:35:18 +08:00
parent 7b12ece1b7
commit c06cf1055d
10 changed files with 193 additions and 42 deletions
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -196,7 +196,29 @@ const LayoutSlug = props => {
 * @returns
 */
 const Layout404 = props => {
-  return <>404 Not found.</>
+  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>
+    </>
 }

 /**
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -213,7 +213,29 @@ const LayoutArchive = props => {
 * @returns
 */
 const Layout404 = props => {
-  return <>404</>
+  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>
+    </>
 }

 /**
--- a/themes/game/index.js
+++ b/themes/game/index.js
@@ -30,6 +30,7 @@ import SideBarContent from './components/SideBarContent'
 import SideBarDrawer from './components/SideBarDrawer'
 import CONFIG from './config'
 import { Style } from './style'
+import { useRouter } from 'next/router'

 // const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })

@@ -346,7 +347,29 @@ const LayoutSlug = props => {
 * @returns
 */
 const Layout404 = props => {
-  return <>404 Not found.</>
+  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>
+    </>
 }

 /**
--- a/themes/gitbook/index.js
+++ b/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>
+    </>
 }

 /**
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -290,9 +290,34 @@ const LayoutArchive = 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 =
+        typeof document !== 'undefined' &&
+        document.getElementById('notion-article')
+      if (!article) {
+        router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
+        })
+      }
+    }, 3000)
+  })
+  return (
+    <>
+      <div className='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'>
+            404
+          </h2>
+          <div className='inline-block text-left h-32 leading-10 items-center'>
+            <h2 className='m-0 p-0'>页面未找到</h2>
+          </div>
+        </div>
+      </div>
    </>
+  )
 }

 /**
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -360,15 +360,33 @@ const LayoutArchive = props => {

 /**
 * 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>
    </>
-  )
 }

 /**
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -241,9 +241,29 @@ const LayoutSlug = props => {
 * @param {*} props
 * @returns
 */
-const Layout404 = (props) => {
+const Layout404 = props => {
+  const router = useRouter()
+  useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
+    setTimeout(() => {
+      const article = isBrowser && document.getElementById('article-wrapper')
+      if (!article) {
+        router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
+        })
+      }
+    }, 3000)
+  }, [])
+
  return <>
-        404 Not found.
+        <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>
    </>
 }

--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -204,9 +204,29 @@ const LayoutSlug = props => {
 * @param {*} props
 * @returns
 */
-const Layout404 = (props) => {
+const Layout404 = props => {
+  const router = useRouter()
+  useEffect(() => {
+    // 延时3秒如果加载失败就返回首页
+    setTimeout(() => {
+      const article = isBrowser && document.getElementById('article-wrapper')
+      if (!article) {
+        router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
+        })
+      }
+    }, 3000)
+  }, [])
+
  return <>
-        404 Not found.
+        <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>
    </>
 }

--- a/themes/starter/components/MessageForm.js
+++ b/themes/starter/components/MessageForm.js
@@ -24,26 +24,6 @@ export const MessageForm = () => {
    }))
  }

-  //   useEffect(() => {
-  //     const form = formRef.current
-  //     const handleSubmit = (e) => {
-  //       e.preventDefault()
-  //       submitComments(formData).then(response => {
-  //         console.log('Subscription succeeded:', response)
-  //         // 在此处添加成功订阅后的操作
-  //         setSuccess(true)
-  //       })
-  //         .catch(error => {
-  //           console.error('Subscription failed:', error)
-  //           // 在此处添加订阅失败后的操作
-  //         })
-  //     }
-  //     form?.addEventListener('submit', handleSubmit)
-  //     return () => {
-  //       form?.removeEventListener('submit', handleSubmit)
-  //     }
-  //   }, [submitComments])
-
  return <>
                <h3
                className="mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]"