• 为什么使用twikoo
  • 免费、部署简单
  • 无域名限制
  • twikoo查看更多

本文将介绍如何在 Hugo-Stack 主题中引入 Twikoo 评论系统，并解决因使用 Pjax 导致的 Twikoo 评论区显示问题。我们将从 Twikoo 的部署开始，然后分析 Pjax 与 Twikoo 的兼容性问题，最后提供完整的解决方案。

1. 引入Twikoo

1.1 部署

Twikoo 分为云函数和前端两部分，需要同时部署。

云函数部署

Twikoo 支持多种云函数部署方式，具体可以到官网查看教程选择适合你的部署方案：twikoo云函数部署

前端部署

Twikoo 提供了多种网站框架和主题的配置方式：twikoo前端部署

也可以自行在前端代码中通过 CDN 引入：通过 CDN 引入

注意事项

• 如果使用 MongoDB Atlas 作为数据库，连接字符串记得将其中的 <username>:<password> 替换为你创建的实际用户名和密码。

  当时我就直接复制去部署了，发现没改后去后台服务器改了没效果，最后删了重新部署才行。

1.2 在Stack主题中配置

Stack 主题内置了 Twikoo 支持，只需在 hugo.yaml 配置文件中添加云函数部署得到的 envId 即可。

完成上述步骤后，Twikoo 评论系统就成功引入了。

2. Pjax导致Twikoo出现的问题

如果引入 PJAX 后遇到各种问题，可以参考这篇文章：解决引入Pjax带来的各种问题

2.1 问题描述

在使用 PJAX 的过程中，可能会遇到以下两个问题：

1. 第一次点击文章进入时，评论区不显示。
2. 评论显示错乱（某篇文章的评论内容跑到另一篇文章下）。

2.2 产生原因

1. 评论区不显示：通过 PJAX 跳转时，评论区容器存在，但 JS 并没有重新执行初始化，导致评论区域不显示。

   

   从报错信息可以看出，浏览器在执行脚本时，Twikoo 的 JS 可能还没有加载完成。

2. 评论显示错乱：Twikoo 是根据 path 区分不同页面的评论的。PJAX 切换时，如果没有重新正确传递 path，Twikoo 可能仍然使用上一个页面的 path 或缓存的评论数据，导致评论错位。

2.3 解决思路

引入 Twikoo 后，需要在 PJAX 页面切换完成后手动重新初始化 Twikoo，确保评论系统能正确识别当前页面并加载对应的评论。

2.4 具体步骤

2.4.1 初步更改

在 layouts/partials/custom.html 文件中引入以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script src="//cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.all.min.js"></script>
<script>
    function initTwikoo() {
        const el = document.getElementById('tcomment');
        if (!el) return;
        // 清空旧实例，防止重复渲染
        el.innerHTML = '';

        // 初始化 Twikoo
        twikoo.init({
            envId: '{{ .Site.Params.comments.twikoo.envId }}',
            el: '#tcomment',
            path: window.location.pathname,
        });
    }
    
    // 首次页面加载
    document.addEventListener("DOMContentLoaded", () => {
        // 其他初始化代码...
        initTwikoo();
    });

    // PJAX 页面切换完成后
    document.addEventListener('pjax:complete', () => {
        // 其他 PJAX 完成后的代码...
        initTwikoo();
    });
</script>

然而，引入上述代码后发现评论跑偏的问题仍未完全解决。因此，我们需要进一步查找 Stack 主题中 Twikoo 的源码。

2.4.2 最终更改

在主题目录下的 /layouts/partials/comments/provider/twikoo.html 文件中：

我们发现源码会将 path 固定成配置里的值，但 PJAX 切换文章时这个值不会更新，这会影响路径的更新。因此，我们需要将这部分源码注释掉：

完成上述修改后，Twikoo 在使用 PJAX 后出现的问题就得到了解决。

总结

通过以上步骤，我们成功在 Hugo-Stack 主题中引入了 Twikoo 评论系统，并解决了因使用 PJAX 导致的评论显示问题。关键点在于：

1. 正确部署 Twikoo 的云函数和前端部分。
2. 在 PJAX 环境下，确保 Twikoo 在页面切换后能正确重新初始化。
3. 修改主题源码，避免固定路径值影响评论的正确显示。

希望这篇教程能帮助你顺利在 Hugo-Stack 主题中使用 Twikoo 评论系统，并解决与 PJAX 的兼容性问题。如果你有任何问题或建议，欢迎在评论区留言交流。