主题添加最近评论插件

themes/example/components/ExampleRecentComments.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { RecentComments } from '@waline/client'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const ExampleRecentComments = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return <>
+         {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-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>)}
+
+  </>
+}
+
+export default ExampleRecentComments

themes/example/components/SideBar.js

@@ -1,6 +1,8 @@
+import BLOG from '@/blog.config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import ExampleRecentComments from './ExampleRecentComments'
 
 export const SideBar = (props) => {
   const { locale } = useGlobal()
@@ -36,6 +38,14 @@ export const SideBar = (props) => {
             </div>
         </aside>
 
+        {BLOG.COMMENT_WALINE_SERVER_URL && <aside className="rounded shadow overflow-hidden mb-6">
+            <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
+
+            <div className="p-4">
+                <ExampleRecentComments/>
+            </div>
+        </aside>}
+
         <aside className="rounded  overflow-hidden mb-6">
             <Live2D />
         </aside>