集成了giscus插件,小猪的blog可以评论了

2023-05-18

开始之前感叹一下互联网的记忆，有句话叫互联网是有记忆的，在网络上留下的内容会被后人所记载，被后人所阅读。

而实际上有多少人的博客活不过两年。

有多少开源软件活不过两年。

也许当时炙手可热的技术过了一段时间之后就无人问津了。

其中我使用的hexo博客的主题yalia就是其中的一员。

当时刚出来时使用的人是相当多，但随着时间的推移，热度下降，直到今天，打开主题的主页都已经打不开了。

而当时发布的版本中并没有提供对giscus插件的默认支持，怎么办？

自己根据文档慢慢来。

首先参考文章：

hexo-butterfly主题-giscus评论系统设置 - 知乎 (zhihu.com)

这篇文章大概能满足我的需求，但是最核心的问题是文章中使用的主题是butterfly，而我使用的可是当时感觉最牛的yilia啊。

翻看主题的设置文件里，并没有giscus相关的设置选项。

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

这不就我上面说的情况么。

仔细研究了下决定自己动手。

总结下整体步骤：

创建新仓库
安装giscus
配置仓库discuss部分
进入giscus配置
启用giscus

其中前四步主要是在GitHub上进行设置，跟hexo以及主题没有太大关系，所以直接参考上面的链接即可，有差异的主要在第5步：

打开主题文件夹下的目录部分，找到article.ejs文件。

themes
--layout
----_partial
------article.ejs

可以看到这个文件主要定义了文章的模板。

我们把对应的giscus的引入文件放到指定的位置即可。

下面的问题就是放到哪里了。

找到<div class='clearfix'></div>然后插入。

<div class="clearfix"></div>
      <!-- giscus 配置开始 -->
      <% if (!index){ %>
      <script src="https://giscus.app/client.js"
      data-repo="smallerpig/smallerpig.github.io" <!-- 替换此处 -->
      data-repo-id="xxxxxx" <!-- 替换此处 -->
      data-category="Announcements"
      data-category-id="xxxxxx" <!-- 替换此处 -->
      data-mapping="url"
      data-strict="0"
      data-reactions-enabled="1"
      data-emit-metadata="0"
      data-input-position="bottom"
      data-theme="preferred_color_scheme"
      data-lang="zh-CN"
      data-loading="lazy"
      crossorigin="anonymous"
      async>
      </script>
      <% } %>
      <!-- giscus 配置结束 -->
</div>

把data-repo-id 和data-category-id换成自己的。

这里我使用了内置变量index，仅在非首页/目录页的情况下进行展示。不然在目录页也出现评论框，感觉很奇怪。

至此已经完成了所有的配置，可以重新发布hexo博客试试。