Giscus：我博客的新评论引擎

2022-04-28 Blog PV:

引言

由于原先使用的时候韩国公司开发的来必力评论系统。怎么说呢，以前在个人开发的 Web 项目使用该评论系统，当访问量较大评论数量较多的时候，就会出现广告，而且会有一些 Bug ，使用不是很理想。其实许久前就想换掉来必力，碍于不断抉择评论系统的 ui ，所以就一直拖到现在。正巧今天看到 Giscus ，感觉挺符合我的审美，所以打算换它。

正文

准备工作

先根据官方文档满足以下要求

一个公开的仓库，可以是你的 *.github.io 仓库或者新建一个公开仓库都行，否则访客将无法查看 discussion 。
安装 giscus app ，否则访客将无法评论和回应。
Discussions 功能已在你的仓库中启用。

修改代码

以我使用的主题 Hexo-theme-hiker 为例，其他主题可以根据下面给出的思路参考然后自行修改。

首先在官网上生成对应的 js scripts

在路径 themes 〉theme_name 〉layout 〉_partial 下面找到 comment.ejs article.ejs 两个文件（文件的具体内容我也贴出来了）

修改 comment.ejs 文件（文件最后面增加一个 else if ）

if (theme.giscus.enable) {%>
  <div id="comment">
    <!-- giscus start -->
    <script src="https://giscus.app/client.js"
      data-repo="<%- theme.giscus.repo %>"
      data-repo-id="<%- theme.giscus.repo_id %>"
      data-category="<%- theme.giscus.category %>"
      data-category-id="<%- theme.giscus.category_id %>"
      data-mapping="<%- theme.giscus.mapping %>"
      data-reactions-enabled="<%- theme.giscus.reactions_enabled %>"
      data-emit-metadata="<%- theme.giscus.emit_metadata %>"
      data-input-position="<%- theme.giscus.input_position %>"
      data-theme="<%- theme.giscus.theme %>"
      data-lang="<%- theme.giscus.lang %>"
      data-loading="<%- theme.giscus.loading %>"
      crossorigin="<%- theme.giscus.crossorigin %>"
      async>
    </script>
    <!-- giscus end -->
  </div>
<% }

修改 article.ejs 文件（第 36 行）修改这部分代码的原因是我使用的主题判断了评论引擎的类型具体视自身情况修改。

1	if (!index && post.comments && (theme.gentie_productKey \|\| theme.duoshuo_shortname \|\| theme.disqus_shortname \|\| theme.uyan_uid \|\| theme.wumii \|\| theme.livere_shortname))

修改为

1	if (!index && post.comments && (theme.gentie_productKey \|\| theme.duoshuo_shortname \|\| theme.disqus_shortname \|\| theme.uyan_uid \|\| theme.wumii \|\| theme.livere_shortname \|\| theme.giscus))

在主题的 _config.yml 下面对应的评论配置文件附近增加新的评论引擎参数

giscus:
  enable: true
  repo:  # Github repository name
  repo_id:  # Github repository id
  category:  # Github discussion category
  category_id:  # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: og:title
  # Available values: 0 | 1 
  reactions_enabled: 1
  # Available values: 0 | 1 
  emit_metadata: 1
  # Available values: top | bottom
  input_position: bottom
  # Available values: light | dark | dark_high_contrast | transparent_dark | preferred-color-scheme
  theme: light
  # Available values: en | zh-CN
  lang: en
  # Available values: lazy
  loading: lazy
  # Available value: anonymous
  crossorigin: anonymous

后记

新的评论系统，真不错，下面我贴出几个我在更换评论引擎时参考的资料供大家参考。