优化跳转到评论逻辑

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)
             }

themes/example/components/ExampleRecentComments.js

@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}><a >-- {comment.nick}</a></Link></div>
         </div>)}
 
   </>

themes/hexo/components/HexoRecentComments.js

@@ -10,7 +10,7 @@ import Link from 'next/link'
  * @param {*} props
  * @returns
  */
-const WalineRecentComment = (props) => {
+const HexoRecentComments = (props) => {
   const [comments, updateComments] = React.useState([])
   const { locale } = useGlobal()
   const [onLoading, changeLoading] = React.useState(true)
@@ -34,10 +34,10 @@ const WalineRecentComment = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
             <div className='dark:text-gray-200 text-sm waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}><a >-- {comment.nick}</a></Link></div>
         </div>)}
 
   </Card>
 }
 
-export default WalineRecentComment
+export default HexoRecentComments

themes/hexo/components/SideRight.js

@@ -6,7 +6,7 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
 import CONFIG_HEXO from '../config_hexo'
-import WalineRecentComment from './WalineRecentsComments'
+import HexoRecentComments from './HexoRecentComments'
 import BLOG from '@/blog.config'
 
 /**
@@ -45,7 +45,7 @@ export default function SideRight(props) {
         <LatestPostsGroup {...props} />
       </Card>}
 
-      {BLOG.COMMENT_WALINE_SERVER_URL && <WalineRecentComment/>}
+      {BLOG.COMMENT_WALINE_SERVER_URL && <HexoRecentComments/>}
 
       <div className='sticky top-20'>
         {post && post.toc && post.toc.length > 1 && <Card>

themes/next/components/NextRecentComments.js

@@ -26,7 +26,7 @@ const NextRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }><a >-- {comment.nick}</a></Link></div>
         </div>)}
 
   </>