优化增量静态及404处理

2026-05-14 07:26:52 +00:00 · 2022-04-26 22:20:02 +08:00
parent 5a884f9a73
commit d0edae963b
10 changed files with 71 additions and 51 deletions
--- a/lib/global.js
+++ b/lib/global.js
@@ -49,7 +49,7 @@ export function GlobalContextProvider({ children }) {
  }, [])

  return (
-    <GlobalContext.Provider value={{ onLoading, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}>
+    <GlobalContext.Provider value={{ onLoading, changeLoadingState, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}>
      {children}
    </GlobalContext.Provider>
  )
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -3,7 +3,8 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
-import { useEffect, useState } from 'react'
+import React from 'react'
+import { useRouter } from 'next/router'

 /**
 * 根据notion的slug访问页面，针对类型为Page的页面
@@ -11,16 +12,32 @@ import { useEffect, useState } from 'react'
 * @returns
 */
 const Slug = props => {
-  const { theme } = useGlobal()
+  const { theme, changeLoadingState } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
  const { post } = props
+
  if (!post) {
-    return <ThemeComponents.Layout404 {...props} />
+    changeLoadingState(true)
+    const router = useRouter()
+    setTimeout(() => {
+      if (typeof document !== 'undefined') {
+        const article = document.getElementById('container')
+        if (!article) {
+          router.push('/404').then(() => {
+            console.warn('找不到页面', router.asPath)
+          })
+        }
+      }
+    }, 5000)
+    const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` }
+    return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
  }

+  changeLoadingState(false)
+
  // 文章锁🔐
-  const [lock, setLock] = useState(post.password && post.password !== '')
-  useEffect(() => {
+  const [lock, setLock] = React.useState(post.password && post.password !== '')
+  React.useEffect(() => {
    if (post.password && post.password !== '') {
      setLock(true)
    } else {
@@ -40,12 +57,13 @@ const Slug = props => {

  const { siteInfo } = props
  const meta = {
-    title: `${post.title} | ${siteInfo.title}`,
-    description: post.summary,
+    title: `${post?.title} | ${siteInfo?.title}`,
+    description: post?.summary,
    type: 'article',
-    image: post.page_cover,
-    slug: post.slug,
-    tags: post.tags
+    slug: 'article/' + post?.slug,
+    image: post?.page_cover,
+    category: post?.category?.[0],
+    tags: post?.tags
  }

  props = { ...props, meta, lock, setLock, validPassword }
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -3,9 +3,9 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import React from 'react'
 import { idToUuid } from 'notion-utils'
+import { useRouter } from 'next/router'

 /**
 * 根据notion的slug访问页面
@@ -13,32 +13,33 @@ import { idToUuid } from 'notion-utils'
 * @returns
 */
 const Slug = props => {
-  const { theme } = useGlobal()
+  const { theme, changeLoadingState } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
  const { post } = props

  if (!post) {
+    changeLoadingState(true)
    const router = useRouter()
-    useEffect(() => {
-      setTimeout(() => {
-        if (window) {
-          const article = typeof document !== 'undefined' && document.getElementById('container')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
-          }
+    setTimeout(() => {
+      if (typeof document !== 'undefined') {
+        const article = document.getElementById('container')
+        if (!article) {
+          router.push('/404').then(() => {
+            console.warn('找不到页面', router.asPath)
+          })
        }
-      }, 3000)
-    })
+      }
+    }, 5000)
    const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` }
    return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
  }

+  changeLoadingState(false)
+
  // 文章锁🔐
-  const [lock, setLock] = useState(post.password && post.password !== '')
-  useEffect(() => {
-    if (post.password && post.password !== '') {
+  const [lock, setLock] = React.useState(post?.password && post?.password !== '')
+  React.useEffect(() => {
+    if (post?.password && post?.password !== '') {
      setLock(true)
    } else {
      setLock(false)
@@ -46,9 +47,9 @@ const Slug = props => {
  }, [post])

  /**
-   * 验证文章密码
-   * @param {*} result
-   */
+     * 验证文章密码
+     * @param {*} result
+     */
  const validPassword = result => {
    if (result) {
      setLock(false)
@@ -59,13 +60,13 @@ const Slug = props => {

  const { siteInfo } = props
  const meta = {
-    title: `${props.post.title} | ${siteInfo.title}`,
-    description: props.post.summary,
+    title: `${post?.title} | ${siteInfo?.title}`,
+    description: post?.summary,
    type: 'article',
-    slug: 'article/' + props.post.slug,
-    image: props.post.page_cover,
-    category: props.post.category?.[0],
-    tags: props.post.tags
+    slug: 'article/' + post?.slug,
+    image: post?.page_cover,
+    category: post?.category?.[0],
+    tags: post?.tags
  }

  return (
--- a/themes/example/components/ArticleLock.js
+++ b/themes/example/components/ArticleLock.js
@@ -24,9 +24,9 @@ export const ArticleLock = props => {
    }
  }

-  return <div className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
    <div className='text-center space-y-3'>
-    <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+      <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
      <div className='flex'>
        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lgfont-light leading-10 text-black bg-white dark:bg-gray-500'></input>
        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
@@ -36,5 +36,5 @@ export const ArticleLock = props => {
      <div id='tips'>
      </div>
    </div>
-</div>
+  </div>
 }
--- a/themes/fukasawa/components/ArticleLock.js
+++ b/themes/fukasawa/components/ArticleLock.js
@@ -24,11 +24,11 @@ export const ArticleLock = props => {
    }
  }

-  return (<div className="flex justify-center">
+  return (<div id='container' className="flex justify-center">
    <div className="shadow md:hover:shadow-2xl overflow-x-auto max-w-5xl  w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200 subpixel-antialiased">
      <div className="w-full flex justify-center items-center h-96 font-sans">
        <div className="text-center space-y-3">
-        <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+          <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
          <div className="flex">
            <input
              id="password" type='password'
--- a/themes/hexo/components/ArticleLock.js
+++ b/themes/hexo/components/ArticleLock.js
@@ -23,7 +23,7 @@ export const ArticleLock = props => {
    }
  }

-  return <div className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
    <div className='text-center space-y-3'>
      <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
      <div className='flex'>
@@ -35,5 +35,5 @@ export const ArticleLock = props => {
      <div id='tips'>
      </div>
    </div>
-</div>
+  </div>
 }
--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -5,7 +5,7 @@ import { useEffect } from 'react'

 export default function HeaderArticle({ post, siteInfo }) {
  if (!post) {
-    return <>loading...</>
+    return <></>
  }
  const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")`
  const { isDarkMode } = useGlobal()
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -1,12 +1,13 @@
+import BLOG from '@/blog.config'
 import Link from 'next/link'
 import React from 'react'

 const Logo = props => {
  const { siteInfo } = props
  return <Link href='/' passHref>
-        <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-          <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {siteInfo?.title}</div>
-        </div>
+    <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
+      <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {siteInfo?.title || BLOG.TITLE}</div>
+    </div>
  </Link>
 }
 export default Logo
--- a/themes/medium/components/ArticleLock.js
+++ b/themes/medium/components/ArticleLock.js
@@ -24,7 +24,7 @@ export const ArticleLock = props => {
    }
  }

-  return <div className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
    <div className='text-center space-y-3'>
      <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
      <div className='flex'>
@@ -36,5 +36,5 @@ export const ArticleLock = props => {
      <div id='tips'>
      </div>
    </div>
-</div>
+  </div>
 }
--- a/themes/next/components/ArticleLock.js
+++ b/themes/next/components/ArticleLock.js
@@ -25,7 +25,7 @@ export const ArticleLock = props => {
  }

  return (
-    <div className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200">
+    <div id='container' className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200">
      <div className="w-full flex justify-center items-center h-96 font-sans">
        <div className="text-center space-y-3">
          <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>