Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

1.为什么设置评论功能

    可以帮助大家及时、便利交流,促进开源社区活力~

2.可以采用哪些评论插件

在Hexo中,以本博客网站使用的Volantis主题为例,其目前共支持 14 款评论系统:

  • artalk, giscus, beaudar, utterances, twikoo,
  • valine,waline, discuss, disqus, disqusjs, gitalk,
  • vssue, livere, isso, hashover


    可用通过以下配置,来调用插件
    1
    2
    3
    4
    5
    $ vim blog/_config.volantis.yml
    comments:
    title: <i class='fas fa-comments'></i> 评论
    subtitle:
    service: giscus
      本次作业尝试了valine、waline插件的配置。valine是一种serverless的评论服务提供插件,但是因为不存在中转,所以valine并不安全,可以通过前端直接读取所有人评论,并获得权限,攻击博客。waline是valine的升级版,但是在2022年之后貌似不支持国内访问服务了,需要科学上网工具。因此,本次作业选择giscus进行评论系统构建。

3.什么是giscus?

  • Giscus是一个基于Github Discussion的评论插件,可以为无服务器端的博客运营者提供简易的部署和拓展。根据官网,其存在以下特性:
  • 开源!
  • 无跟踪,无广告,永久免费;
  • 无需数据库。全部数据均储存在 GitHub Discussions 中;
  • 支持自定义主题、多种语言、高度可配置;
  • 自动从 GitHub 拉取新评论与编辑;
  • 可自建服务!
  • 工作原理:
      Giscus在加载时,会使用 GitHub Discussions 搜索 API 根据选定的映射方式(如 URL、pathname等)来查找与当前页面关联的discussion。如果找不到匹配的discussion,giscus bot就会在第一次有人留下评论或回应时自动创建一个discussion。

      在评论时,访客必须按 GitHub OAuth 流程授权 giscus app 代表他发帖。或者访客也可以直接在 GitHub Discussion 里评论。你可以在 GitHub 上管理评论。

4.如何使用giscus?

  大家首先要新建一个开放、可以使用Discussion的仓库,命名可以根据自己需要来,不能同网站仓库一致,因为独立存放评论内容。

  然后,需要开启仓库的Discussion功能,并安装giscus app ,点击连接并且install到对应新建的仓库就可以了。


  最后,我们需要在官网 注册repository,从而得到对应的服务id(哈希码)。先在网页下方,填入已经创建好的代码仓库,并选择对应的映射方式(建议用pathname便于管理评论)。

  在完成上述输入后,我们选择Discussion分类,建议使用Announcements的方式,这样可以保证一个网页,一个评论区。

5.如何在Hexo中配置giscus?

  在完成上述工作后,我们得到了如下图所示的script代码,接下来就可以通过Hexo覆写评论脚本和配置功能了。

  首先,我们要为Hexo安装giscus插件,输入在Hexo文件夹下输入以下命令,完成安装。

  本博客使用的是volantis6.0,其对应的脚本templates移动到了volantis/layout/_plugins/comments/giscus/scripts.ejs中,我们需要用上图代码覆盖scripts.ejs,从而实现评论脚本的注入。

  最后,我们需要在voltantis的_config.yml中进行评论功能的配置,根据脚本提供的id、映射等信息,填充以下内容

  通过Github验证后,所有用户都可以对博客进行评论了~

评论

欢迎评论~