Bug的出现及现象描述

我在建设我的博客小站的时候，顺手添加了博客的双评论功能(Waline和Giscus)

然后在我测试双评论切换的时候，我发现了一个奇特的现象

我的每个页面的最底部(在Butterfly的footer下方)都会出现Giscus的评论区(除非设置了hexo的博客文章comments属性为false)

之前群里有朋友认为是css文件的原因，但是Giscus的部署只需要从网页上引入client.js就可以了

当然，要使用<script>元素把js文件嵌入到Butterfly主题的_config.yml的inject部分当中去

发现问题

我尝试了一下将Giscus帮我生成的HTML代码嵌入到我的markdown博客底部中去

然后发现在博客的底部，评论区的上方，出现了Giscus的评论区

至此可以得出结论：

Giscus的评论区是锁定在页面底部的，Butterfly的inject功能之一是将用户定义的HTML标签嵌入</html>标签之前，而且是全局设置，所以会全局启用Giscus的评论区

解决问题

我需要的是去除主页的Giscus评论区，对于其他的page和post页面，我可以通过在markdown当中修改comments属性来调整，所以无需担心

也就是说我需要动态加载Giscus提供的client.js文件

这里我想到了用检测url的方式来判断主页

我将其封装成了一个giscus.js文件，然后引用这个文件

这个文件的作用是能够动态设置是否插入<script>标签

我设置为只有在检测到主页url时不插入标签，js源代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if(window.location.href != "https://edwardssss.github.io/")
{
    var GiscusScript = document.createElement("script");
    GiscusScript.setAttribute("type", "text/javascript");
    GiscusScript.setAttribute("src","https://giscus.app/client.js");
    GiscusScript.setAttribute("data-repo","xxxxxxxx/xxxxxx");
    GiscusScript.setAttribute("data-repo-id","xxxxxxxx");
    GiscusScript.setAttribute("data-category","xxxxxxxx");
    GiscusScript.setAttribute("data-category-id","xxxxxxxx");
    GiscusScript.setAttribute("data-mapping","xxxxxxxx");
    GiscusScript.setAttribute("data-strict","1");
    GiscusScript.setAttribute("data-reactions-enabled","1");
    GiscusScript.setAttribute("data-emit-metadata","1");
    GiscusScript.setAttribute("data-input-position","top");
    GiscusScript.setAttribute("data-theme","light_protanopia");
    GiscusScript.setAttribute("data-lang","zh-CN");
    GiscusScript.setAttribute("crossorigin","anonymous");
    GiscusScript.setAttribute("async","async");
}

其中的所有设置都可以让Giscus主页帮你生成，只需要直接粘贴上去就可以了

方式简单粗暴，但是屡试不爽

不过相较于这种解决办法，我还是希望Butterfly官方能够给出带有exclude的inject选项

全局启用虽然方便，但是有时候也会招致不必要的麻烦

现在是2023/1/29 2:25

晚安，世界

因为Giscus的请求似乎会使博客post网页加载变慢500ms-1000ms，所以我暂时取消了双评论功能以改进网页的浏览体验，以上