本文最后更新于:几秒前

本文将详细介绍(图文)如何在hexo博客的fluid主题下添加gitalk系统。

gitalk是基于github issue的评论系统,详细的介绍可见这里

github端的准备

主要流程:

  1. 注册GitHub账号
  2. 创建Github仓库,用于保存博客评论
  3. 添加OAuth App,为网站添加第三方(这里是GitHub)登录认证功能

第1、2步都十分简单,不太清楚的朋友可以自行查阅资料。下面主要详细介绍添加OAuth App的过程:

首先点击个人头像,进入Settings选项卡

image-20200720011753172

选择OAuth Apps,点击New OAuth App

image-20200720012013813

然后按照下方提示填写内容,新建一个OAuth App

image-20200720012524757

上述都完成后,可以在OAuth Apps选项卡看到你创建好的app

image-20200720012629552

点击进入app后记录下Client ID和Client Secret,这两个字符串在下一部分修改主题的配置文件时会使用到

image-20200720013717628

hexo端的准备

对于fluid主题,只需要修改一下主题的配置文件_config.yml即可。

修改有关评论的所有项(注释部分介绍了含义):

comments:  # 评论
    enable: true  # 开启评论
    type: gitalk  # 指定使用的评论模块,我们使用的是gitalk系统,所以填gitalk

# Gitalk
# You can get yout ClientID and ClientSecret from https://github.com/settings/applications/new
# More info available at https://github.com/gitalk/gitalk#options
gitalk:
  clientID: xxx  # GitHub Application Client ID,从OAuth APP中复制过来
  clientSecret: xxx  # GitHub Application Client Secret,从OAuth APP中复制过来
  repo: comments  # 你保存评论的仓库名(这里是我的仓库,请改成你自己的),请注意,它不是你的仓库完整路径,不包含你的GitHub用户名
  owner: 'luzhengli'  # 你的GitHub用户名,注意外面用单引号包围起来!
  admin: ['luzhengli']  # GitHub repo owner and collaborators, only these guys can initialize github issues, should be like "['admin']" or "['admin1','admin2']" 我这里设置成仅我个人能提交issue(即仅个人能初始化评论区)
  id: location.pathname         # The unique id of the page. Length must less than 50. 这个不用改
  language: zh-CN               # Localization language key, en, zh-CN and zh-TW are currently available. 中文网站也不用改
  labels: "['Gitalk']"          # GitHub issue labels. 一般不用改
  perPage: 15                   # Pagination size, with maximum 100.
  pagerDirection: last          # Comment sorting direction, available values are last and first. 默认即可
  distractionFreeMode: false    # Facebook-like distraction free mode. 默认即可
  createIssueManually: true     # By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the admin users. You can create it manually by setting this option to true. 默认即可

最后,使用hexo的命令更新静态文件,然后重新部署网站,如果前面都没有问题,那么评论系统就已经搭建完毕了。

如果在_config.yml配置文件中设置了admin为自己,那么博客中每个文章页都需要你自己手动初始化评论区(对应于GitHub中提交一个issue),在这一点上,gitalk显得十分麻烦。不过不用担心,下一篇文章将介绍如何自动化初始化gitalk评论。

image-20200720014647865