hexo添加评论系统giscus

发表于

如何给hexo搭建的博客添加评论系统,经过对比之后决定使用giscus。giscus有如下优点，参考官网。

本人使用的hexo的一些信息,使用的主题为next,版本为7.1.2。
查看文件themes/next/package.json获取版本信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
➜ hexo version
hexo: 3.9.0
hexo-cli: 4.2.0
os: Linux 5.15.0-67-generic linux x64
http_parser: 2.9.3
node: 10.19.0
v8: 6.8.275.32-node.55
uv: 1.34.2
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.40.0
napi: 5
openssl: 1.1.1d
icu: 66.1
unicode: 13.0
cldr: 36.1
tz: 2022g

本来是参照https://github.com/next-theme/hexo-next-giscus进行操作的，但是根据上面的方法修改_config.yml部署后并没有生效，所以才有了下面的(5,6,7)步骤。如果修改_config.yml的方式生效则不必执行下面的5,6,7。

1.新建一个github仓库,此仓库必须是公开的。
2.安装giscus app,否则访客将无法评论和回应。
3.在新建的仓库中启用Discussions功能
4.安装hexo-next-giscus
npm install hexo-next-giscus --save
5.在themes/next/layout/_macro/目录下,新建文件discus.swig。内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

如果获取上面的data-repo,data-repo-id,data-category,data-category-id`呢?

打开giscus.app,==> 配置　==> 仓库,输入第一步新建的仓库名称,选择对应的分类，就会自动生成<scrip>...</script>中的内容，直接复制就可以。
6.编辑themes/next/layout/post.swig,带+号的行为新增的。

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
{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}
+ {% import '_macro/discus.swig' as discus_template %}

{% block title %}{{ page.title }} | {{ title }}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}

  <div id="posts" class="posts-expand">
    {{ post_template.render(page) }}
  </div>
+   <div>
+   {{ discus_template.render(true)}}
+  </div>

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(true) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

7.重新部署

1
2
3
hexo clean
hexo generate
hexo deploy

REF:
1.https://github.com/next-theme/hexo-next-giscus
2.https://giscus.app/zh-CN