主题适配twikoo评论数

components/TwikooCommentCounter.js

@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -10,7 +11,10 @@ import { useEffect } from 'react'
  */
 
 const TwikooCommentCounter = (props) => {
-  const loadTwikoo = async (posts) => {
+  let commentsData = []
+  const { theme } = useGlobal()
+
+  const fetchTwikooData = async (posts) => {
     posts.forEach(post => {
       post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
     })
@@ -23,22 +27,9 @@ const TwikooCommentCounter = (props) => {
         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')
-            })
-          }
-        })
+        console.log('查询', res)
+        commentsData = res
+        updateCommentCount()
       }).catch(function (err) {
         // 发生错误
         console.error(err)
@@ -48,13 +39,41 @@ const TwikooCommentCounter = (props) => {
     }
   }
 
+  const updateCommentCount = () => {
+    if (commentsData.length === 0) {
+      return
+    }
+    props.posts.forEach(post => {
+      const matchingRes = commentsData.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')
+        })
+      }
+    })
+  }
   const router = useRouter()
 
   useEffect(() => {
+    console.log('路由触发评论计数')
     if (props?.posts && props?.posts?.length > 0) {
-      loadTwikoo(props.posts)
+      fetchTwikooData(props.posts)
     }
-  }, [router.events])
+    //   }, [router.events])
+  })
+
+  // 监控主题变化时的的评论数
+  useEffect(() => {
+    console.log('主题触发评论计数', commentsData)
+    updateCommentCount()
+  }, [theme])
   return null
 }
 

themes/example/components/BlogListPage.js

@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import CONFIG_EXAMPLE from '../config_example'
+import BlogPostCard from './BlogPostCard'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
@@ -22,46 +23,8 @@ export const BlogListPage = props => {
         <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
 
             <div id="container">
-                {posts?.map(p => (
-                    <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
-                        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
-                            <h2 className="mb-4">
-                                <Link
-                                    href={`/${p.slug}`}
-                                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                                    {p.title}
-                                </Link>
-                            </h2>
-
-                            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                                by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                                <span className="font-bold mx-1"> | </span>
-                                <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
-                                {/* <span className="font-bold mx-1"> | </span> */}
-                                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                            </div>
-
-                            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
-                                {p.summary}
-                            </p>
-                            {/* 搜索结果 */}
-                            {p.results && (
-                                <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                                    {p.results.map(r => (
-                                        <span key={r}>{r}</span>
-                                    ))}
-                                </p>
-                            )}
-                        </div>
-                        {/* 图片封面 */}
-                        {showPageCover && (
-                            <div className="md:w-5/12 w-full overflow-hidden p-1">
-                                <Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
-                                    <div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
-                                </Link>
-                            </div>
-                        )}
-                    </article>
+                {posts?.map(post => (
+                    <BlogPostCard key={post.id} post = {post}/>
                 ))}
             </div>
 

themes/example/components/BlogListScroll.js

@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import React from 'react'
+import React, { useEffect } from 'react'
 import throttle from 'lodash.throttle'
+import BlogPostCard from './BlogPostCard'
 import CONFIG_EXAMPLE from '../config_example'
 
 export const BlogListScroll = props => {
@@ -35,8 +35,9 @@ export const BlogListScroll = props => {
       handleGetMore()
     }
   }, 500))
+  const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
 
     return () => {
@@ -44,60 +45,22 @@ export const BlogListScroll = props => {
     }
   })
 
-  const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
-
   return (
-      <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
-              {postsToShow.map(p => (
-                  <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
-                        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
-                            <h2 className="mb-4">
-                                <Link
-                                    href={`/${p.slug}`}
-                                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                                    {p.title}
-                                </Link>
-                            </h2>
 
-                            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                                by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                                <span className="font-bold mx-1"> | </span>
-                                <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
-                                {/* <span className="font-bold mx-1"> | </span> */}
-                                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                            </div>
+        <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`} ref={targetRef}>
 
-                            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
-                                {p.summary}
-                            </p>
-                            {/* 搜索结果 */}
-                            {p.results && (
-                                <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                                    {p.results.map(r => (
-                                        <span key={r}>{r}</span>
-                                    ))}
-                                </p>
-                            )}
-                        </div>
-                        {/* 图片封面 */}
-                        {showPageCover && (
-                            <div className="md:w-5/12 w-full overflow-hidden p-1">
-                                <Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
-                                    <div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
-                                </Link>
-                            </div>
-                        )}
-                    </article>
-              ))}
+            {postsToShow?.map(post => (
+                <BlogPostCard key={post.id} post={post} />
+            ))}
 
-              <div
-                  onClick={handleGetMore}
-                  className="w-full my-4 py-4 text-center cursor-pointer "
-              >
-                  {' '}
-                  {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
-              </div>
+            <div
+                onClick={handleGetMore}
+                className="w-full my-4 py-4 text-center cursor-pointer "
+            >
+                {' '}
+                {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+            </div>
 
-          </div>
+        </div>
   )
 }

themes/example/components/BlogPostCard.js

@@ -0,0 +1,51 @@
+import BLOG from '@/blog.config'
+import CONFIG_EXAMPLE from '../config_example'
+import Link from 'next/link'
+import TwikooCommentCount from '@/components/TwikooCommenCount'
+
+const BlogPostCard = ({ post }) => {
+  const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
+
+  return <article className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
+        <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
+            <h2 className="mb-4">
+                <Link
+                    href={`/${post.slug}`}
+                    className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
+                    {post.title}
+                </Link>
+            </h2>
+
+            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
+                by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {post.date?.start_date || post.createdTime}
+                <TwikooCommentCount post={post} className='pl-1'/>
+                <span className="font-bold mx-1"> | </span>
+                <a href={`/category${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</a>
+                {/* <span className="font-bold mx-1"> | </span> */}
+                {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+            </div>
+
+            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
+                {post.summary}
+            </p>
+            {/* 搜索结果 */}
+            {post.results && (
+                <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                    {post.results.map(r => (
+                        <span key={r}>{r}</span>
+                    ))}
+                </p>
+            )}
+        </div>
+        {/* 图片封面 */}
+        {showPageCover && (
+            <div className="md:w-5/12 w-full overflow-hidden p-1">
+                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                    <div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
+                </Link>
+            </div>
+        )}
+    </article>
+}
+
+export default BlogPostCard

themes/matery/components/BlogPostCard.js

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG_MATERY from '../config_matery'
+import TwikooCommentCount from '@/components/TwikooCommenCount'
 // import Image from 'next/image'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -14,84 +15,87 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover = CONFIG_MATERY.POST_LIST_COVER && post?.page_cover
   const delay = (index % 3) * 300
   return (
-      <div
-          data-aos="zoom-in"
-          data-aos-duration="500"
-          data-aos-delay={delay}
-          data-aos-once="true"
-          data-aos-anchor-placement="top-bottom"
-          className="w-full mb-4 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
+        <div
+            data-aos="zoom-in"
+            data-aos-duration="500"
+            data-aos-delay={delay}
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
+            className="w-full mb-4 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
 
-          {/* 固定高度 ，空白用图片拉升填充 */}
-          <div className="flex flex-col h-80 justify-between">
+            {/* 固定高度 ，空白用图片拉升填充 */}
+            <div className="flex flex-col h-80 justify-between">
 
-              {/* 头部图片 填充卡片 */}
-              {showPageCover && (
-                  <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                      <div
-                      className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
-                          {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img
-                              src={post?.page_cover}
-                              alt={post.title}
-                              className="opacity-50 h-full w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
-                          />
-                          <span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full' > {post.title}</span>
-                      </div>
-                  </Link>
-              )}
+                {/* 头部图片 填充卡片 */}
+                {showPageCover && (
+                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                        <div
+                            className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img
+                                src={post?.page_cover}
+                                alt={post.title}
+                                className="opacity-50 h-full w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
+                            />
+                            <span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full' > {post.title}</span>
+                        </div>
+                    </Link>
+                )}
 
-              {/* 文字描述 */}
-              <div >
-                  {/* 描述 */}
-                  <div className="px-4 flex flex-col w-full  text-gray-700  dark:text-gray-300">
+                {/* 文字描述 */}
+                <div >
+                    {/* 描述 */}
+                    <div className="px-4 flex flex-col w-full  text-gray-700  dark:text-gray-300">
 
-                      {(!showPreview || showSummary) && post.summary && (
-                          <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
-                              className="replace my-2 text-sm font-light leading-7">
-                              {post.summary}
-                          </p>
-                      )}
+                        {(!showPreview || showSummary) && post.summary && (
+                            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
+                                className="replace my-2 text-sm font-light leading-7">
+                                {post.summary}
+                            </p>
+                        )}
 
-                      <div className='text-gray-800 justify-between flex my-2  dark:text-gray-300'>
-                          <Link
-                              href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-                              passHref
-                              className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                        <div className='text-gray-800 justify-between flex my-2  dark:text-gray-300'>
+                            <div>
+                                <Link
+                                    href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                                    passHref
+                                    className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
 
-                              <i className="far fa-clock mr-1" />
-                              {post.date?.start_date || post.lastEditedTime}
+                                    <i className="far fa-clock mr-1" />
+                                    {post.date?.start_date || post.lastEditedTime}
 
-                          </Link>
-                          <Link
-                              href={`/category/${post.category}`}
-                              passHref
-                              className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                                </Link>
+                                <TwikooCommentCount post={post} className='hover:underline cursor-pointer text-sm'/>
+                            </div>
+                            <Link
+                                href={`/category/${post.category}`}
+                                passHref
+                                className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
 
-                              <i className="mr-1 far fa-folder" />
-                              {post.category}
+                                <i className="mr-1 far fa-folder" />
+                                {post.category}
 
-                          </Link>
-                      </div>
-                  </div>
+                            </Link>
+                        </div>
+                    </div>
 
-                  {post?.tagItems && post?.tagItems.length > 0 && (<>
-                      <hr />
-                      <div className="text-gray-400 justify-between flex px-5 py-3">
-                          <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
-                              <div>
-                                  {' '}
-                                  {post.tagItems.map(tag => (
-                                      <TagItemMini key={tag.name} tag={tag} />
-                                  ))}
-                              </div>
-                          </div>
-                      </div>
-                  </>)}
-              </div>
-          </div>
+                    {post?.tagItems && post?.tagItems.length > 0 && (<>
+                        <hr />
+                        <div className="text-gray-400 justify-between flex px-5 py-3">
+                            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                                <div>
+                                    {' '}
+                                    {post.tagItems.map(tag => (
+                                        <TagItemMini key={tag.name} tag={tag} />
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </>)}
+                </div>
+            </div>
 
-      </div>
+        </div>
   )
 }
 

themes/medium/components/BlogPostCard.js

@@ -6,6 +6,7 @@ import React from 'react'
 import CONFIG_MEDIUM from '../config_medium'
 import CategoryItem from './CategoryItem'
 import TagItemMini from './TagItemMini'
+import TwikooCommentCount from '@/components/TwikooCommenCount'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
@@ -43,13 +44,9 @@ const BlogPostCard = ({ post, showSummary }) => {
                     }
                 >
                     <div className="text-sm py-1">{post.date?.start_date}</div>
-                    {CONFIG_MEDIUM.POST_LIST_CATEGORY && (
-                        <CategoryItem category={post.category} />
-                    )}
-                    {CONFIG_MEDIUM.POST_LIST_TAG &&
-                        post?.tagItems?.map(tag => (
-                            <TagItemMini key={tag.name} tag={tag} />
-                        ))}
+                    {CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category} />}
+                    {CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                    <TwikooCommentCount post={post} className='hover:underline'/>
                 </div>
 
                 <div className="flex"></div>

themes/next/components/BlogPostCard.js

@@ -8,6 +8,7 @@ import TagItemMini from './TagItemMini'
 import CONFIG_NEXT from '../config_next'
 import NotionPage from '@/components/NotionPage'
 import NotionIcon from '@/components/NotionIcon'
+import TwikooCommentCount from '@/components/TwikooCommenCount'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
@@ -31,7 +32,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
           <div
             className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
-              } flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}
+              } flex-wrap dark:text-gray-500 text-gray-400 `}
           >
             <div>
               {post.category && (
@@ -39,7 +40,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                   <Link
                     href={`/category/${post.category}`}
                     passHref
-                    className="cursor-pointer font-light text-sm hover:underline transform">
+                    className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm hover:underline transform">
 
                     <i className="mr-1 fas fa-folder" />
                     {post.category}
@@ -48,22 +49,18 @@ const BlogPostCard = ({ post, showSummary }) => {
                   <span className="mx-2">|</span>
                 </>
               )}
-              <Link
-                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-                passHref
-                className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
-
-                {post.date?.start_date}
-
-              </Link>
+                <Link
+                    href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                    passHref
+                    className="hover:text-blue-500 dark:hover:text-blue-400 font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                    {post.date?.start_date}
+                </Link>
             </div>
-            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
-              <div>
-                {' '}
+            <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
+            <div className="hover:text-blue-500 dark:hover:text-blue-400  md:flex-nowrap flex-wrap md:justify-start inline-block">
                 {post.tagItems?.map(tag => (
                   <TagItemMini key={tag.name} tag={tag} />
                 ))}
-              </div>
             </div>
           </div>
 

themes/simple/components/BlogItem.js

@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import CONFIG_SIMPLE from '../config_simple'
+import TwikooCommentCount from '@/components/TwikooCommenCount'
 
 export const BlogItem = props => {
   const { post } = props
@@ -18,6 +19,7 @@ export const BlogItem = props => {
         <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
             <span> <i className="fa-regular fa-user"></i> <a href={CONFIG_SIMPLE.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span>
             <span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span>
+            <span> - <TwikooCommentCount post={post}/></span>
             {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post.category}`} className="hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
             {post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
         </div>