优化跳转到评论逻辑

components/Comment.js

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
 import { useGlobal } from '@/lib/global'
 import React from 'react'
+import { useRouter } from 'next/router'
 
 const WalineComponent = dynamic(
   () => {
@@ -46,11 +47,14 @@ const Comment = ({ frontMatter }) => {
     return <>Loading...</>
   }
   const { isDarkMode } = useGlobal()
+  const router = useRouter()
 
-  // 需要跳转到评论区域
   React.useEffect(() => {
+    // 跳转到评论区
     setTimeout(() => {
-      if (window.location.hash) {
+      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' })
       }

components/NotionPage.js

@@ -37,24 +37,34 @@ const NotionPage = ({ post }) => {
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
   React.useEffect(() => {
-    addWatch4Dom()
-  }, [])
-  setTimeout(() => {
-    if (isBrowser()) {
-      // 将相册gallery下的图片加入放大功能
-      const imgList = document.querySelectorAll('.notion-collection-card-cover img')
-      if (imgList && zoomRef.current) {
-        for (let i = 0; i < imgList.length; i++) {
-          (zoomRef.current).attach(imgList[i])
+    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)
 
-      const cards = document.getElementsByClassName('notion-collection-card')
-      for (const e of cards) {
-        e.removeAttribute('href')
+    setTimeout(() => {
+      if (isBrowser()) {
+        // 将相册gallery下的图片加入放大功能
+        const imgList = document.querySelectorAll('.notion-collection-card-cover img')
+        if (imgList && zoomRef.current) {
+          for (let i = 0; i < imgList.length; i++) {
+            (zoomRef.current).attach(imgList[i])
+          }
+        }
+
+        const cards = document.getElementsByClassName('notion-collection-card')
+        for (const e of cards) {
+          e.removeAttribute('href')
+        }
       }
-    }
-  }, 800)
+    }, 800)
+
+    addWatch4Dom()
+  }, [])
 
   return <div id='container' className='max-w-4xl mx-auto'>
     <NotionRenderer

components/WalineComponent.js

@@ -36,11 +36,11 @@ const WalineComponent = (props) => {
           const type = mutation.type
           if (type === 'childList') {
             const anchorElement = document.getElementById(anchor.substring(1))
-            if (anchorElement) {
+            if (anchorElement && anchorElement.className === 'wl-item') {
               anchorElement.scrollIntoView({ block: 'end', behavior: 'smooth' })
               setTimeout(() => {
                 anchorElement.classList.add('animate__animated')
-                anchorElement.classList.add('animate__bounceIn')
+                anchorElement.classList.add('animate__bounceInRight')
                 observer.disconnect()
               }, 300)
             }