用twikoo实现列表评论数

2026-05-14 07:26:52 +00:00 · 2023-05-07 18:30:56 +08:00
parent 74ace70a7b
commit eecac656e1
9 changed files with 156 additions and 31 deletions
--- a/blog.config.js
+++ b/blog.config.js
@@ -185,7 +185,9 @@ const BLOG = {
  // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK

  // twikoo
-  COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO地址 腾讯云环境填 envId；Vercel 环境域名地址（https://xxx.vercel.app)
+  COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO后端地址 腾讯云环境填envId；Vercel环境填域名，教程：https://tangly1024.com/article/notionnext-twikoo
+  COMMENT_TWIKOO_COUNT_ENABLE: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // 博客列表是否显示评论数
+  COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js', // twikoo客户端cdn

  // utterance
  COMMENT_UTTERRANCES_REPO:
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -23,8 +23,10 @@ const PrismMac = () => {
      loadExternalResource('/css/prism-mac-style.css', 'css')
    }
    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
-    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((e) => {
-      Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+      if (window?.Prism?.plugins?.autoloader) {
+        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+      }
      renderPrismMac()
    })
  }
--- a/components/Twikoo.js
+++ b/components/Twikoo.js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
-import React from 'react'
-import twikoo from 'twikoo'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+// import twikoo from 'twikoo'

 /**
 * Giscus评论 @see https://giscus.app/zh-CN
@@ -10,17 +11,48 @@ import twikoo from 'twikoo'
 */

 const Twikoo = ({ isDarkMode }) => {
-  React.useEffect(() => {
-    twikoo({
-      envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
-      el: '#twikoo', // 容器元素
-      lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
-      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
-      // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
-    })
-  })
+  const loadTwikoo = async () => {
+    try {
+      const url = await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
+      console.log('twikoo 加载成功', url)
+      const twikoo = window.twikoo
+      twikoo.init({
+        envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+        el: '#twikoo', // 容器元素
+        lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+        // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
+      })
+
+      twikoo.getCommentsCount({
+        envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
+        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
+        urls: [ // 不包含协议、域名、参数的文章路径列表，必传参数
+          '/article/notion-next',
+          '/article/notion-next-guide'
+        ],
+        includeReply: false // 评论数是否包括回复，默认：false
+      }).then(function (res) {
+        console.log(res)
+        // 返回示例: [
+        //   { url: '/2020/10/post-1.html', count: 10 },
+        //   { url: '/2020/11/post-2.html', count: 0 },
+        //   { url: '/2020/12/post-3.html', count: 20 }
+        // ]
+      }).catch(function (err) {
+        // 发生错误
+        console.error(err)
+      })
+    } catch (error) {
+      console.error('twikoo 加载失败', error)
+    }
+  }
+
+  useEffect(() => {
+    loadTwikoo()
+  }, [])
  return (
-   <div id="twikoo"></div>
+        <div id="twikoo"></div>
  )
 }

--- a/components/TwikooCommenCount.js
+++ b/components/TwikooCommenCount.js
@@ -0,0 +1,22 @@
+import BLOG from '@/blog.config'
+// import twikoo from 'twikoo'
+
+/**
+ * 获取博客的评论数，用与在列表中展示
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TwikooCommentCount = ({ post, className }) => {
+  if (!JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE)) {
+    return null
+  }
+  return <a href={`${post.slug}?target=comment`} className={`mx-1 hidden comment-count-wrapper-${post.id} ${className || ''}`}>
+        <i className="far fa-comment mr-1"></i>
+        <span className={`comment-count-text-${post.id}`}>
+            {/* <i className='fa-solid fa-spinner animate-spin' /> */}
+        </span>
+    </a>
+}
+
+export default TwikooCommentCount
--- a/components/TwikooCommentCounter.js
+++ b/components/TwikooCommentCounter.js
@@ -0,0 +1,61 @@
+import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 获取博客的评论数，用与在列表中展示
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TwikooCommentCounter = (props) => {
+  const loadTwikoo = async (posts) => {
+    posts.forEach(post => {
+      post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
+    })
+    try {
+      await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
+      const twikoo = window.twikoo
+      twikoo.getCommentsCount({
+        envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
+        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
+        urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
+        includeReply: true // 评论数是否包括回复，默认：false
+      }).then(function (res) {
+        console.log(res)
+        posts.forEach(post => {
+          const matchingRes = res.find(r => r.url === post.slug)
+          if (matchingRes) {
+            // 修改评论数量div
+            const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`)
+            textElements.forEach(element => {
+              element.innerHTML = matchingRes.count
+            })
+            // 取消隐藏
+            const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`)
+            wrapperElements.forEach(element => {
+              element.classList.remove('hidden')
+            })
+          }
+        })
+      }).catch(function (err) {
+        // 发生错误
+        console.error(err)
+      })
+    } catch (error) {
+      console.error('twikoo 加载失败', error)
+    }
+  }
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (props?.posts && props?.posts?.length > 0) {
+      loadTwikoo(props.posts)
+    }
+  }, [router.events])
+  return null
+}
+
+export default TwikooCommentCounter
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
    "react-share": "^4.4.1",
    "react-tweet-embed": "~2.0.0",
    "smoothscroll-polyfill": "^0.4.4",
-    "twikoo": "^1.6.16",
    "typed.js": "^2.0.12",
    "use-ackee": "^3.0.0",
    "valine": "^1.4.18"
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -26,6 +26,7 @@ import smoothscroll from 'smoothscroll-polyfill'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
 import { isMobile } from '@/lib/utils'
+import TwikooCommentCounter from '@/components/TwikooCommentCounter'

 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -53,6 +54,7 @@ const MyApp = ({ Component, pageProps }) => {
        {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
        {JSON.parse(BLOG.NEST) && <Nest />}
        {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
+        {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...pageProps}/>}
        {JSON.parse(BLOG.RIBBON) && <Ribbon />}
        <ExternalScript/>
    </>
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
 import NotionPage from '@/components/NotionPage'
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
+import TwikooCommentCount from '@/components/TwikooCommenCount'

 /**
 * 博客列表的文字内容
@@ -26,17 +27,19 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
        {/* 日期 */}
        <div
            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
-                } flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
+                } flex-wrap dark:text-gray-500 text-gray-400 `}
        >
            <Link
                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
                passHref
-                className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                className="font-light cursor-pointer text-sm leading-4 mr-3 hover:text-indigo-700 dark:hover:text-indigo-400">

                <i className="far fa-calendar-alt mr-1" />
                {post.date?.start_date || post.lastEditedTime}

            </Link>
+
+            <TwikooCommentCount className='text-sm hover:text-indigo-700 dark:hover:text-indigo-400' post={post}/>
        </div>

          {/* 摘要 */}
--- a/themes/hexo/components/HexoRecentComments.js
+++ b/themes/hexo/components/HexoRecentComments.js
@@ -25,21 +25,23 @@ const HexoRecentComments = (props) => {
  }, [])

  return (
-    <Card >
-          <div className=" mb-2 px-1 justify-between">
-              <i className="mr-2 fas fas fa-comment" />
-              {locale.COMMON.RECENT_COMMENTS}
-          </div>
+        <Card >
+            <div className=" 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 pl-1'>
-              <div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-              <div className='dark:text-gray-400 text-gray-400  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' } }}>--{comment.nick}</Link></div>
-          </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 pl-1'>
+                <div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+                <div className='dark:text-gray-400 text-gray-400  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' } }}>--{comment.nick}</Link>
+                </div>
+            </div>)}

-    </Card>
-  );
+        </Card>
+  )
 }

 export default HexoRecentComments