From 7df33cb62a8af38b6836f7806a62c19681feac98 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 27 Jun 2023 22:59:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Comment.js    | 74 +++++++++++++++++++---------------------
 components/NotionPage.js | 26 +++++++++-----
 components/PrismMac.js   |  1 -
 3 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/components/Comment.js b/components/Comment.js
index 42b69f9e..411ad58a 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
-import { useEffect } from 'react'
+import { isBrowser } from '@/lib/utils'
 import { useRouter } from 'next/router'
 
 const WalineComponent = dynamic(
@@ -57,17 +57,13 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
 
-  useEffect(() => {
-    // 跳转到评论区
+  if (isBrowser() && ('giscus' in router.query || router.query.target === 'comment')) {
     setTimeout(() => {
-      if (window.location.href.indexOf('target=comment') > -1) {
-        const url = router.asPath.replace('?target=comment', '')
-        history.replaceState({}, '', url)
-        const commentNode = document.getElementById('comment')
-        commentNode.scrollIntoView({ block: 'start', behavior: 'smooth' })
-      }
-    }, 200)
-  }, [])
+      const url = router.asPath.replace('?target=comment', '')
+      history.replaceState({}, '', url)
+      document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+    }, 1000)
+  }
 
   if (!frontMatter) {
     return <>Loading...</>
@@ -75,42 +71,42 @@ const Comment = ({ frontMatter }) => {
 
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
-      <Tabs>
+        <Tabs>
 
-         { BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
-            <TwikooCompenent/>
-         </div>)}
+            {BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
+                <TwikooCompenent />
+            </div>)}
 
-        { BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
-            <WalineComponent/>
-        </div>) }
+            {BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
+                <WalineComponent />
+            </div>)}
 
-        {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-            <ValineComponent path={frontMatter.id}/>
-        </div>)}
+            {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
+                <ValineComponent path={frontMatter.id} />
+            </div>)}
 
-        {BLOG.COMMENT_GISCUS_REPO && (
-          <div key="Giscus">
-            <GiscusComponent className="px-2" />
-          </div>
-        )}
+            {BLOG.COMMENT_GISCUS_REPO && (
+                <div key="Giscus">
+                    <GiscusComponent className="px-2" />
+                </div>
+            )}
 
-        {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <CusdisComponent frontMatter={frontMatter}/>
-        </div>)}
+            {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
+                <CusdisComponent frontMatter={frontMatter} />
+            </div>)}
 
-        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>)}
+            {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+                <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+            </div>)}
 
-        {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-          <GitalkComponent frontMatter={frontMatter}/>
-        </div>)}
+            {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
+                <GitalkComponent frontMatter={frontMatter} />
+            </div>)}
 
-        {BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
-          <WebMentionComponent frontMatter={frontMatter} className="px-2" />
-        </div>)}
-      </Tabs>
+            {BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
+                <WebMentionComponent frontMatter={frontMatter} className="px-2" />
+            </div>)}
+        </Tabs>
     </div>
   )
 }
diff --git a/components/NotionPage.js b/components/NotionPage.js
index 07e62f4f..e389468f 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -47,16 +47,8 @@ const Tweet = ({ id }) => {
 }
 
 const NotionPage = ({ post, className }) => {
-  // 滚动到评论区
   useEffect(() => {
-    setTimeout(() => {
-      if (window.location.hash) {
-        const tocNode = document.getElementById(window.location.hash.substring(1))
-        if (tocNode && tocNode?.className?.indexOf('notion') > -1) {
-          tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' })
-        }
-      }
-    }, 180)
+    autoScrollToTarget()
   }, [])
 
   if (!post || !post.blockMap) {
@@ -82,6 +74,22 @@ const NotionPage = ({ post, className }) => {
   </div>
 }
 
+/**
+ * 根据url参数自动滚动到指定区域
+ */
+const autoScrollToTarget = () => {
+  setTimeout(() => {
+    // 跳转到指定标题
+    const needToJumpToTitle = window.location.hash
+    if (needToJumpToTitle) {
+      const tocNode = document.getElementById(window.location.hash.substring(1))
+      if (tocNode && tocNode?.className?.indexOf('notion') > -1) {
+        tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      }
+    }
+  }, 180)
+}
+
 /**
  * 将id映射成博文内部链接。
  * @param {*} id
diff --git a/components/PrismMac.js b/components/PrismMac.js
index ee531070..1d2cddc3 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -21,7 +21,6 @@ import { useRouter } from 'next/navigation'
 const PrismMac = () => {
   const router = useRouter()
   useEffect(() => {
-    console.log('渲染Code')
     if (BLOG.CODE_MAC_BAR) {
       loadExternalResource('/css/prism-mac-style.css', 'css')
     }