最近评论

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)

components/WalineRecentsComments.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { RecentComments } from '@waline/client'
+import BLOG from '@/blog.config'
+import Card from '@/themes/hexo/components/Card'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const WalineRecentComment = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const { locale } = useGlobal()
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return <Card >
+        <div className="font-sans mb-2 px-1 justify-between">
+            <i className="mr-2 fas fas fa-comment" />
+            {locale.COMMON.RECENT_COMMENTS}
+        </div>
+
+        {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
+        {!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-200 text-sm waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+            <div className='dark:text-gray-100 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>)}
+
+  </Card>
+}
+
+export default WalineRecentComment