用twikoo实现列表评论数

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

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

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

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