971 字

5 分钟

博客篇：文章列表添加评论数显示

2025-10-28

杂七杂八

博客

博客篇：文章列表添加评论数显示#

前言#

目前博客文章列表只会显示字数和阅读时间，不会显示评论数,不过博客接入了twikoo评论系统，我翻了翻官方文档，发现有提供获取评论数的API接口。如图：

那么事情就变得简单起来了，只需要调用这个接口，然后把返回的数据渲染到对于的文章列表上即可。

说说缺点#

不过依赖于外部插件，对于Astro框架的静态博客不是很友好，会拖慢网站加载速度，虽然可以忽约不计，但是多少有点影响。

目前博客集成第三方主要就是twikoo、友链朋友圈、lsky图床，对于友链朋友圈和图床我都是单开一个页面，实际对博客的影响非常小，即使服务崩溃也不会影响网站正常运行。

为了尽可能的达到对这些第三方集成完美控制，我都有在config.ts做开关配置，可以配置是否开启这些功能或页面。

主要代码#

PostCard 页面#

src->components->PostCard.astro

在阅读时长旁边添加评论数显示元素。

1
import { commentConfig } from "src/config";
2

3
<!-- word count, read time and comment count  -->
4
<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
5
    <div>
6
        {remarkPluginFrontmatter.words} {" " + i18n(remarkPluginFrontmatter.words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
7
    </div>
8
    <div>|</div>
9
    <div>
10
        {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
11
    </div>
12
    {commentConfig.enable && (
13
        <>
14
            <div>|</div>
15
            <span class="comment-count" data-path={url}>
16
                <span>0</span>
17
                <span>{i18n(I18nKey.commentsCount)}</span>
18
            </span>
19
        </>
20
    )}
21
</div>

twikoo-loader#

public->lib->twikoo-loader.js

新建一份twikoo-loader.js文件，请求API和渲染操作都在这个文件中完成。

1
(function () {
2
  if (window.__twikooLoaderInitialized) return;
3
  window.__twikooLoaderInitialized = true;
4

5
  let twikooLoadTimer;
6

7
  // 加载评论数量
8
  const loadTwikooCommentCount = () => {
9
    if (!window.twikoo) return;
10

11
    const commentEls = document.querySelectorAll(".comment-count[data-path]");
12
    if (commentEls.length === 0) return;
13

14
    const paths = Array.from(commentEls)
15
      .map((el) => el.dataset.path)
16
      .map((path) => path.split("/").map(encodeURIComponent).join("/"));
17

18
    // 从全局配置获取Twikoo参数
19
    const twikooConfig = window.commentConfig?.twikoo || {};
20

21
    window.twikoo
22
      .getCommentsCount({
23
        envId: twikooConfig.envId || "选填",
24
        region: twikooConfig.region || "选填",
25
        urls: paths,
26
        includeReply: true,
27
      })
28
      .then((res) => {
29
        res.forEach((item) => {
30
          const el = document.querySelector(
31
            `.comment-count[data-path="${decodeURIComponent(item.url)}"] span:nth-child(1)`,
32
          );
33
          if (el) el.textContent = `${item.count}`;
34
        });
35
      })
36
      .catch(console.error);
37
  };
38

39
  // 确保 Twikoo 加载
40
  const ensureTwikooLoaded = () => {
41
    clearTimeout(twikooLoadTimer);
42
    twikooLoadTimer = setTimeout(() => {
43
      if (window.twikooLoaded) {
44
        loadTwikooCommentCount();
45
      } else if (!window.twikooLoading) {
46
        window.twikooLoading = true;
47
        const script = document.createElement("script");
48
        script.src =
49
          "https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js"; // 国内默认CDN
50
        script.onload = () => {
51
          window.twikooLoaded = true;
52
          loadTwikooCommentCount();
53
        };
54
        document.head.appendChild(script);
55
      }
56
    }, 200);
57
  };
58

59
  // 绑定事件（只绑定一次）
60
  const bindEvents = () => {
61
    const safeReload = () => ensureTwikooLoaded();
62
    document.addEventListener("astro:page-load", safeReload);
63
    document.addEventListener("swup:page:view", safeReload);
64
  };
65

66
  // 初始化
67
  ensureTwikooLoaded();
68
  bindEvents();
69
})();

这个js文件主要完成的操作就是根据官方文档所描述的配置getCommentsCount方法，发送请求，然后将返回的数据渲染到页面上。需要注意的是script.src的值需要自己调整，我这里是使用的官方推荐的国内cdn。

通过-cdn-引入：前端部署 | Twikoo 文档

Config#

src->Config.ts

在配置文件中添加评论组件的相关配置，这个之前在集成twikoo就添加过了astrofuwai配置教程。

主要注意envId的配置就行了，我是私有部署的，所以我这里填的是我部署的评论系统后端的ip|域名地址。

修改enable为false就能关闭评论，包括评论数展示。

1
export const commentConfig = {
2
  enable: true,
3
  provider: "twikoo",
4
  twikoo: {
5
    envId: "https://api.pljzy.top", // 部署的项目地址
6
    region: "",
7
    lang: "zh-CN",
8
  },
9
};

Layout 页面#

最后在Layout页面导入并使用twikoo-loader.js。

1
import { commentConfig } from "src/config";
2

3

4
{commentConfig.enable && (
5
  <>
6
    <script is:inline define:vars={{ commentConfig }}>
7
    window.commentConfig = commentConfig;
8
      // 动态加载 Twikoo Loader（保证执行顺序）
9
      const script = document.createElement('script');
10
      script.src = '/scripts/twikoo-loader.js';
11
      script.defer = true; // 延迟到 HTML 解析后执行
12
      document.head.appendChild(script);
13
    </script>
14
  </>
15
)}

实现效果#

总结#

对于文章添加评论数显示，主要代码逻辑在twikoo-loader.js中完成，然后只需在母版页中导入并使用即可。

为了可以控制评论组件和评论数是否显示，可以直接修改Config.ts中的enable属性。