Butterfly主题下Giscus评论区的显示问题的解决办法
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 | if(window.location.href != "https://edwardssss.github.io/") |
其中的所有设置都可以让Giscus主页帮你生成,只需要直接粘贴上去就可以了
方式简单粗暴,但是屡试不爽
不过相较于这种解决办法,我还是希望Butterfly官方能够给出带有exclude的inject选项
全局启用虽然方便,但是有时候也会招致不必要的麻烦
现在是2023/1/29 2:25
晚安,世界
因为Giscus的请求似乎会使博客post网页加载变慢500ms-1000ms,所以我暂时取消了双评论功能以改进网页的浏览体验,以上