useEffect调整

2026-05-17 23:16:50 +00:00 · 2022-04-26 10:45:23 +08:00
parent 2fb0c679d1
commit 8290a844b2
7 changed files with 28 additions and 32 deletions
--- a/themes/next/Layout404.js
+++ b/themes/next/Layout404.js
@@ -16,13 +16,13 @@ export const Layout404 = props => {
        }
      }
    }, 3000)
-  })
+  }, [])

  return <LayoutBase {...props}>
    <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>
+        <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>
--- a/themes/next/LayoutSearch.js
+++ b/themes/next/LayoutSearch.js
@@ -2,21 +2,17 @@ import LayoutBase from './LayoutBase'
 import StickyBar from './components/StickyBar'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import { useGlobal } from '@/lib/global'
-import { useEffect } from 'react'

 export const LayoutSearch = (props) => {
  const { locale } = useGlobal()
  const { posts, keyword } = props
-  useEffect(() => {
-    setTimeout(() => {
-      const container = document.getElementById('container')
-      if (container && container.innerHTML) {
-        const re = new RegExp(`${keyword}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
-      }
-    },
-    100)
-  })
+  setTimeout(() => {
+    const container = document.getElementById('container')
+    if (container && container.innerHTML) {
+      const re = new RegExp(`${keyword}`, 'gim')
+      container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+    }
+  }, 200)
  return (
    <LayoutBase {...props} >
      <StickyBar>
@@ -26,7 +22,7 @@ export const LayoutSearch = (props) => {
        </div>
      </StickyBar>
      <div className="md:mt-5">
-        <BlogPostListScroll {...props} showSummary={true}/>
+        <BlogPostListScroll {...props} showSummary={true} />
      </div>
    </LayoutBase>
  )
--- a/themes/next/components/BlogPostListScroll.js
+++ b/themes/next/components/BlogPostListScroll.js
@@ -44,7 +44,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NE
    return () => {
      window.removeEventListener('scroll', scrollTrigger)
    }
-  })
+  }, [])

  const targetRef = useRef(null)
  const { locale } = useGlobal()
@@ -57,7 +57,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NE
      {/* 文章列表 */}
      <div className='flex flex-wrap space-y-1 lg:space-y-4'>
        {postsToShow.map(post => (
-          <BlogPostCard key={post.id} post={post} showSummary={showSummary}/>
+          <BlogPostCard key={post.id} post={post} showSummary={showSummary} />
        ))}
      </div>

@@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NE
        <div onClick={() => {
          handleGetMore()
        }}
-             className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200'
+          className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200'
        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
      </div>
    </div>
--- a/themes/next/components/Header.js
+++ b/themes/next/components/Header.js
@@ -27,7 +27,7 @@ export default function Header(props) {
        })
      )
    }
-  })
+  }, [])
  const { isDarkMode } = useGlobal()

  const autoScrollEnd = () => {
@@ -90,7 +90,7 @@ export default function Header(props) {
      window.removeEventListener('scroll', scrollTrigger)
      window.removeEventListener('resize', updateHeaderHeight)
    }
-  })
+  }, [])

  return (
    <header
--- a/themes/next/components/Live2DWaifu.js
+++ b/themes/next/components/Live2DWaifu.js
@@ -2,18 +2,18 @@ import Head from 'next/head'
 import { useEffect } from 'react'
 import { loadExternalResource } from '@/lib/utils'

-export default function Live2DWife () {
+export default function Live2DWife() {
  useEffect(() => {
    if (window) {
      initLive2DWife()
    }
-  })
+  }, [])
  return <>
-    <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/></Head>
+    <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" /></Head>
  </>
 }

-function initLive2DWife () {
+function initLive2DWife() {
  // 注意：live2d_path 参数应使用绝对路径
  const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/'
  // const live2d_path = "/live2d-widget/";
--- a/themes/next/components/SideBarDrawer.js
+++ b/themes/next/components/SideBarDrawer.js
@@ -18,7 +18,7 @@ const SideBarDrawer = ({ post, cRef, tags, slot, categories, currentCategory })
  useEffect(() => {
    const sideBarWrapperElement = document.getElementById('sidebar-wrapper')
    sideBarWrapperElement?.classList?.remove('hidden')
-  })
+  }, [])

  const router = useRouter()
  useEffect(() => {
@@ -52,7 +52,7 @@ const SideBarDrawer = ({ post, cRef, tags, slot, categories, currentCategory })
      <SideBar tags={tags} post={post} slot={slot} categories={categories} currentCategory={currentCategory} />
    </div>
    {/* 背景蒙版 */}
-    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }} className='hidden animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-30 w-full h-full glassmorphism'/>
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }} className='hidden animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-30 w-full h-full glassmorphism' />

  </div>
 }
--- a/themes/next/components/WordCount.js
+++ b/themes/next/components/WordCount.js
@@ -4,20 +4,20 @@ import { useEffect } from 'react'
 * 字数统计
 * @returns
 */
-export default function WordCount () {
+export default function WordCount() {
  useEffect(() => {
    countWords()
-  })
+  }, [])

  return <div id='wordCountWrapper' className='hidden'>
-   <i className='mr-1 fas fa-file-word'/> 本文字数 <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock' /> 阅读时长 ≈ <strong id='readTime'>0</strong> 分钟
-    </div>
+    <i className='mr-1 fas fa-file-word' /> 本文字数 <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock' /> 阅读时长 ≈ <strong id='readTime'>0</strong> 分钟
+  </div>
 }

 /**
 * 更新字数统计和阅读时间
 */
-function countWords () {
+function countWords() {
  if (window) {
    const articleElement = document.getElementById('notion-article')
    if (articleElement) {
@@ -33,13 +33,13 @@ function countWords () {
 }

 // 去除html标签
-function deleteHtmlTag (str) {
+function deleteHtmlTag(str) {
  str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合
  return str
 }

 // 用word方式计算正文字数
-function fnGetCpmisWords (str) {
+function fnGetCpmisWords(str) {
  let sLen = 0
  try {
    // eslint-disable-next-line no-irregular-whitespace