为你的hexo添加不止一个评论区

一、hexo添加评论区

hexo添加评论区还比较容易地,一共步

我使用的是giscus,原理是使用github库中的discussions部分映射到你的博客中,你在博客的评论会储存到被映射库的discussions中.
相同原理的也有utterances,它是使用github库中的issue部分映射的,但是utterances相对来说使用较为麻烦

1、为你的想要映射的库添加discussions

你可以使用你博客的github.io,也可以新建一个库用于储存评论(如果你愿意的话)
点击这个库的setting

在general中直接往下滑,找到discussion,点击新建,就成功的为你这个库添加了discussion

2、在你的库中下载giscus

点击giscus GitHub App进入,点击下载就ok,显示如下:

如果之后再想加入新的仓库下载giscus进入就再个人-设置-Applications-configure加入新的仓库即可

3、启用 giscus

点击giscus.app进入,

输入你的用户名和仓库名,如果正确会显示
(√,成功！该仓库满足所有条件。)
下面的是映射反应,pathname和URL和title都相差不大,基于每个页面提供一个独特的标题
如果你想要在一个页面里加入多个评论区,需要使用”Discussion 的标题包含特定字符串”
Discussion 分类选择Announcements,最后参考下面的Js修改你的config.butterfly的comment部分

giscus:
  enable: true
  repo: "Morgenro/Morgenro.github.io"
  repo_id: "Your_repo_id"
  category: "Announcements"
  category_id: "Your_category_id"
  light_theme: light
  dark_theme: dark
  js:
  option:

上述的是博客默认的评论区,如果你想要在其他页面添加comments,在md中加入js就好

<div class="giscus-wrapper">
     <script src="https://giscus.app/client.js"
       data-repo="Morgenro/Morgenro.github.io"
       data-repo-id="Your_data-repo-id"
       data-category="Announcements"
       data-category-id="Your_category-id"
       data-mapping="specific" 
       data-term="diary-2023-07-14" 
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
       data-input-position="bottom"
       data-theme="light"
       data-lang="zh-CN"
       crossorigin="anonymous"
       async>
     </script>

到这里就实现了hexo添加评论区

二、为你的博客页面添加多个评论区

当我直接在一个页面加入两个基于字符串的评论区时,发现只会显示最下面的评论区,原因是
Giscus 插件（尤其是 Hexo 中的 giscus 插件）生成的是静态 HTML，只能在构建阶段加载一次脚本；
多个实例无法动态挂载，因为 script 只执行一次，不支持多个容器同时绑定多个 Giscus 实例。
这时候想到使用iframe,在一个网页中嵌入多个 iframe,分别加载不同的页面并在这些页面中各自加载 Giscus。尝试之后发现确实出现了两个评论区的轮廓,但是其中显示giscus.app未连接,原因可能是不支持跨域通信,也罢
于是就干脆只显示一个评论区,在查看下一个评论区时将上面的评论区销毁即可,代码如下

let currentGiscusContainer = null;

function loadGiscus(targetElement, term) {
  // 清空之前的评论容器
  if (currentGiscusContainer) {
    currentGiscusContainer.innerHTML = '';
  }

  // 如果不存在容器则创建一个
  let giscusDiv = targetElement.querySelector('.giscus-container');
  if (!giscusDiv) {
    giscusDiv = document.createElement('div');
    giscusDiv.className = 'giscus-container';
    targetElement.appendChild(giscusDiv);
  }

  currentGiscusContainer = giscusDiv;
  giscusDiv.innerHTML = ''; // 清空旧的内容

  const script = document.createElement('script');
  script.src = 'https://giscus.app/client.js';
  script.setAttribute('data-repo', giscusConfig.repo);
  script.setAttribute('data-repo-id', giscusConfig.repoId);
  script.setAttribute('data-category', giscusConfig.category);
  script.setAttribute('data-category-id', giscusConfig.categoryId);
  script.setAttribute('data-mapping', giscusConfig.mapping);
  script.setAttribute('data-term', term);
  script.setAttribute('data-strict', giscusConfig.strict);
  script.setAttribute('data-reactions-enabled', giscusConfig.reactionsEnabled);
  script.setAttribute('data-emit-metadata', giscusConfig.emitMetadata);
  script.setAttribute('data-input-position', giscusConfig.inputPosition);
  script.setAttribute('data-theme', giscusConfig.theme);
  script.setAttribute('data-lang', giscusConfig.lang);
  script.crossOrigin = 'anonymous';
  script.async = true;

  giscusDiv.appendChild(script);
}

document.addEventListener('DOMContentLoaded', function () {
  const diaryItems = document.querySelectorAll('.diary-item');
  if (diaryItems.length > 0) {
    loadGiscus(diaryItems[0], diaryItems[0].getAttribute('data-term'));
  }

  diaryItems.forEach(item => {
    item.addEventListener('click', () => {
      const term = item.getAttribute('data-term');
      loadGiscus(item, term);
      item.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  });
});

于此就实现了在你需要的网页添加多个评论区
这里是点击触发,你也可以添加<bottom>来实现"展开评论"的按钮

7-18更新

发现日记的评论区有时不会刷新在卡片中，而是刷新在网页的最下方，这是因为如果你在md文档中设置了comments= true，我使用的是loadGiscus函数动态加载，评论区脚本就会被被重复加载。导致评论区刷新位置出现问题。