在 Astro Fuwari 主题中集成 Twikoo 评论系统

本文主要记录在 Astro Fuwari 主题中集成 Twikoo 评论系统时遇到的一系列问题及其解决方案。关于 Twikoo 后端的云函数部署和 MongoDB 数据库配置，可直接参照官方文档，本文不再赘述。

问题一：深色模式下的显示问题#

在参照《Astro 添加 Twikoo 评论 | 老麦笔记》一文的指引添加基础代码后，发现在深色模式下，评论区的文字颜色与背景色融为一体，导致内容无法阅读。

深色模式下评论区内容无法看清

解决方案#

通过查阅 fuwai_zyplj 项目的实现，发现需要在 Twikoo 的挂载点 div 外部再包裹一个 div，并应用主题的基础卡片样式 card-base。这样能确保评论区正确继承主题的样式，从而解决深色模式的适配问题。

1
<div class="card-base px-6 py-6 relative w-full text-90">
2
    <div id="tcomment"></div>
3
</div>

修复深色模式显示问题后的效果

问题二：评论区在页面加载和刷新时消失#

另一个问题是，在首次进入文章页或刷新页面时，评论区偶尔会无法显示。

解决方案#

这个问题与 Astro 的页面生命周期事件有关。在 Comment.astro 组件的脚本中，如果存在 document.addEventListener('astro:page-load', () => { ... }) 这样的事件监听器，可能会导致 Twikoo 在客户端路由切换时被重复或错误地初始化。

移除 astro:page-load 事件监听器，直接执行加载函数，可以解决此问题。

问题三：点击评论区按钮导致页面跳转到顶部#

在解决了显示问题后，又遇到了一个新的交互问题：点击评论区的“点赞”或“回复”等按钮时，页面会强制滚动到顶部。

在查阅资料后，于《解决 Twikoo 在 Fuwari 主题下的页面乱滚问题 | RiseForever》一文中找到了根本原因：

这个问题出现的原因，是官方的 Twikoo JavaScript 文件中使用了带 href="#" 的 <a> 标签。SSR（Astro）在前端脚本未完成水合（hydration）前，点击这种链接会触发默认导航行为，导致页面跳到顶部。

解决方案#

最彻底的解决方案是修改 Twikoo 的源码，将导致问题的 href="#" 替换掉，然后重新构建出自己的 twikoo.min.js 文件。

具体流程如下：

Fork 源码：访问 Twikoo 的 GitHub 仓库并 Fork 一份到自己的账户下。
修改代码：克隆你 Fork 的仓库到本地。在源码中全局搜索 href="#"，主要修改以下两个文件：
- /src/client/view/components/TkAction.vue
- /src/client/view/components/TkComment.vue
将所有 href="#" 替换为 href="javascript:void(0)"。这样做可以在保留链接原有样式和功能的同时，禁用其默认的页面跳转行为。
构建项目：在项目根目录运行以下命令来安装依赖并构建：
Terminal window
```
1
yarn install
2
yarn build
```
构建完成后，在项目的 ./dist/ 文件夹下即可找到新鲜出炉的 twikoo.min.js 文件。
替换文件：在你的 Fuwari 项目中，创建 public/js/ 文件夹，并将刚刚构建好的 twikoo.min.js 文件放入其中。
更新引用：修改 src/components/Comment.astro 组件，将脚本的 src 地址从 CDN 改为本地路径。

最终代码#

经过以上一系列的调整，最终得到稳定可用的组件代码。

文件路径：src/components/Comment.astro

1
<div class="card-base px-6 py-6 relative w-full text-90">
2
    <div id="tcomment"></div>
3
</div>
4

5
<script>
6
    function loadTwikoo() {
7
      const commentsContainer = document.getElementById('tcomment');
8
      if (commentsContainer) {
9
        const script = document.createElement('script');
10
        // 更新为本地脚本路径
11
        script.src = '/js/twikoo.min.js';
12
        script.async = true;
13
        script.onload = () => {
14
          const initScript = document.createElement('script');
15
          initScript.innerHTML = `
16
            twikoo.init({
17
                envId: 'https://YOUR_TWIKOO_ENV_ID',
18
                el: '#tcomment',
19
            });
20
        `;
21
          document.body.appendChild(initScript);
22
        };
23
        document.body.appendChild(script);
24
      }
25
    }
26
    loadTwikoo();
27
</script>

在文章页中引入：src/pages/posts/[...slug].astro

1
---
2
// 引入 Comment 组件
3
import Comment from "@components/Comment.astro";
4

5
---
6
<!-- ... 其他页面布局和内容 ... -->
7

8
        <div id="post-container" class="card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ">
9

10
            <!-- 正文内容 -->
11
            <Markdown class="mb-6 markdown-content onload-animation">
12
                <Content />
13
            </Markdown>
14

15
            <!-- 版权声明 -->
16
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
17

18
            <!-- 评论组件 -->
19
            <Comment />
20

21
        </div>
22

23
<!-- ... 页面底部的导航链接等内容 ... -->

至此，Twikoo 评论系统已完美集成到 Fuwari 主题中，所有已知问题均得到解决。