Merge pull request #279 from tangly1024/feat-recent-comments

最近评论

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

lib/lang/en-US.js

@@ -34,7 +34,8 @@ export default {
     ARTICLE_LOCK_TIPS: 'Please Enter the password:',
     SUBMIT: 'Submit',
     POST_TIME: 'Post on',
-    LAST_EDITED_TIME: 'Last edited'
+    LAST_EDITED_TIME: 'Last edited',
+    RECENT_COMMENTS: 'Recent Comments'
   },
   PAGINATION: {
     PREV: 'Prev',

lib/lang/zh-CN.js

@@ -36,7 +36,8 @@ export default {
     ARTICLE_LOCK_TIPS: '文章已上锁，请输入访问密码',
     SUBMIT: '提交',
     POST_TIME: '发布于',
-    LAST_EDITED_TIME: '最后更新'
+    LAST_EDITED_TIME: '最后更新',
+    RECENT_COMMENTS: '最新评论'
   },
   PAGINATION: {
     PREV: '上一页',

styles/globals.css

@@ -158,3 +158,16 @@ nav {
 .medium-zoom-image--opened{
   width: auto !important;
 }
+
+[data-waline] p {
+  color: var(--waline-color);
+  @apply dark:text-gray-200 !important
+}
+
+.waline-recent-content p{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

themes/hexo/components/SideRight.js

@@ -6,6 +6,14 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
 import CONFIG_HEXO from '../config_hexo'
+import WalineRecentComment from '@/components/WalineRecentsComments'
+import BLOG from '@/blog.config'
+
+/**
+ * Hexo主题右侧栏
+ * @param {*} props
+ * @returns
+ */
 export default function SideRight(props) {
   const {
     post, currentCategory, categories, latestPosts, tags,
@@ -37,8 +45,10 @@ export default function SideRight(props) {
         <LatestPostsGroup {...props} />
       </Card>}
 
+      {BLOG.COMMENT_WALINE_SERVER_URL && <WalineRecentComment/>}
+
       <div className='sticky top-20'>
-        {post && post.toc && <Card>
+        {post && post.toc && post.toc.length > 1 && <Card>
           <Catalog toc={post.toc} />
         </Card>}
         {slot}

themes/medium/components/ArticleDetail.js

@@ -8,6 +8,7 @@ import formatDate from '@/lib/formatDate'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import NotionPage from '@/components/NotionPage'
+import React from 'react'
 
 export const ArticleDetail = props => {
   const { post, prev, next, siteInfo } = props