Pjax+Twikoo评论区创建并解决问题

为什么要使用twikoo作为我的评论区？我的理由

免费、简单
多域名 网站不只部署在同一个服务器，有些是会限域名的
twikoo

添加Twikoo

Stack配置文件内置有twikoo评论区，在hugo.yaml改一下配置就能启动，主要是配置twikoo的envId
在网站用上twikoo云函数和前端都需要部署，官方都有详细的介绍，可以去twikoo去部署好获取envId,需要注意的是如果是用MongoDB Atlas这个当数据库的话，连接字符串记得改里面的<username>:<password>为创建的用户名:密码，当时我就直接复制去部署了，发现没改后去后台服务器改了没效果，最后删了重新部署才行
云函数部署好会得到envId，Hugo-Stack主题有写好的配置，直接把它复制进hugo.yaml文件里启动就可以了，现在Twikoo就能用了

Twikoo评论区域

Pjax导致Twikoo出现的问题

假如你的网页没有用Pjax无刷新加载技术的话，应该是没有这个问题的，下面的就可以不用看了
假如你Pjax无刷新加载技术遇到的问题有很多的话，可以去看下莱特雷-letere的博客，本站出现很多问题也是根据这个帖子来修改的，只是我现在用的是Twikoo，他用的是giscus，我用他的方法改并没有效果

用Twikoo遇到的问题

装好之后，在主页进入帖子评论区显示但不会显示之前的评论，点击去往其他页面，刚才帖子评论区的评论，出现在新的页面上，实际上这个页面并没有这个评论
首先，需要知道的是应当是路径问题，只需要把对的路径获取出来刷新一遍就可以了
在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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script>
// -------- 去掉PJAX 脚本给 URL 加上的时间戳  ?t=xxxx --------
    function removeTParam() {
        if (window.location.search.includes("?t=")) {
            history.replaceState({}, "", window.location.pathname);
        }
    }
    // 首次加载时立即去掉
    removeTParam();

    function initTwikoo() {
        const el = document.getElementById('tcomment');
        if (!el) return;
        // 清空旧实例，防止重复渲染
        el.innerHTML = '';

        // 初始化 Twikoo
        setTimeout(() => {
            twikoo.init({
                envId: '{{ .Site.Params.comments.twikoo.envId }}',
                el: '#tcomment',
                path: decodeURIComponent(window.location.pathname), // 使用唯一页面路径
            });
        }, 50);
    }
    // 首次页面加载
    document.addEventListener("DOMContentLoaded",
        () => {
            //其他...
            initTwikoo();
        });


    document.addEventListener('pjax:send', () => {
        //其他...
        removeTParam();
    });

    document.addEventListener('pjax:complete', () => {
        //其他...
        removeTParam();
        window.Stack.init();
        initTwikoo();
    });
</script>

有没有发现多上这个removeTParam()，用这个pjax会在网址加上当前时间戳?t=xxxx的，不知道有没有影响，就先去掉了
最后发现还是一样的问题，没有变化，然后去调试发现initTwikoo()根本就没用上,if (!el) return;在这就收工了

最后修改

最后去查看了一下主题twikoo的源码/layouts/partials/comments/provider/twikoo.html

twikoo在Stack中内置的代码

应该是这个源码一开始就已经初始化，所有的页面都初始化了一个评论区，所以我们只需要把上面这部分源码注销掉就可以使用自己的，解决所有的问题。

感言

其实一开始建这个站是没有这么多功夫要整的，后面又想整一个音乐播放出来，纳就是左下角那个，~~万恶之源~~