最近评论

components/WalineComponent.js

@@ -24,6 +24,36 @@ const WalineComponent = (props) => {
       serverURL: BLOG.COMMENT_WALINE_SERVER_URL
     })
     router.events.on('routeChangeComplete', updateWaline)
+
+    const anchor = window.location.hash
+    /** 需要跳转到评论区 */
+    if (anchor) {
+      // 选择需要观察变动的节点
+      const targetNode = document.getElementsByClassName('wl-cards')[0]
+      const commentNode = document.getElementById('comment')
+      commentNode.scrollIntoView({ block: 'start', behavior: 'smooth' })
+
+      // 当观察到变动时执行的回调函数
+      const mutationCallback = (mutations) => {
+        for (const mutation of mutations) {
+          const type = mutation.type
+          if (type === 'childList') {
+            const anchorElement = document.getElementById(anchor.substring(1))
+            if (anchorElement) {
+              anchorElement.scrollIntoView({ block: 'end', behavior: 'smooth' })
+              setTimeout(() => {
+                anchorElement.classList.add('animate__animated')
+                anchorElement.classList.add('animate__bounceIn')
+              }, 300)
+            }
+          }
+        }
+      }
+
+      // 观察子节点 变化
+      new MutationObserver(mutationCallback).observe(targetNode, { childList: true })
+    }
+
     return () => {
       walineInstanceRef.current?.destroy()
       router.events.off('routeChangeComplete', updateWaline)