gitalk 评论系统 安装

Posted on In

申请GitHub应用

1. 注册一个新应用

https://github.com/settings/applications/new 有三项内容必须填写

Application name：这个随意填写
Homepage URL：你的网站的URL地址，包含http部分。
Authorization callback URL：你的网站的URL地址，包含http部分，和上面的 Homepage URL 一致就行

2. Homepage URL与Authorization callback URL的填写

  1. 如果你的网站是host在github上的，是通过github分配给你的网址进行访问的，直接填写github分配给你的网站就可以，类似 yourgithub.github.io
  2. 如果你有自己的域名，但网站内容是host在github上的，是通过cname的方式访问的，那么这两项都填你的域名
  3. 如果你有自己的域名，也有自己的站点，那么这两项都填你的域名

在调试阶段，可以把这两项设置为你的本地地址，这样方便测试，而不用一次又一次的部署网站，等测试好之后再统一部署。

3. 生成Client信息

点击 “register application”完成注册，系统会生成Client ID和Client secrets(需要手动点一下旁边的按钮)

配置Gitalk

通过Next主题进行配置

如果你的网点是用Hexo驱动，且主题是Next，这个主题已经为我们配置了gitalk，只需配置即可

gitalk:
  enable: true
  github_id: 你的Github登录账号
  repo: gitalk 你的 Github仓库的名称
  client_id: 上面刚刚申请的 Client ID
  client_secret: 上面刚刚申请的 Client Secret
  admin_user: 你的Github登录账号
  distraction_free_mode: false
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
  language:

使用官网配置

官网地址：https://github.com/gitalk/gitalk

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',      // The repository of store comments,
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

参数说明

注：官网配置的参数和Hexo主题Next的参数是通用的

  • repo: 要求填写你的Github仓库的名称，这个仓库可以是你的github上的任意一个，但必须是公开的。评论内容会以 issue的形式保存到仓库的issues中，所以建议为评论单独新建一个仓库
  • admin: 指定了可以初始化文章评论的github用户，一般只填写你自己就可以了
  • id: 文章的URL路径，不包括域名，这个路径要求必须是唯一的，且不能超过50个字符(如果超过了，可以使用md5等工具对路径进行摘要缩短长度即可)。每一扁文章的评论和这个路径相关联，所以即使域名不同，只要文章的URL一样，就会显示相关联的评论。在Next主题中是自动配置的Hexo主题Next的参数定义在layout/_third-party/comments/gitalk.njk中
  • distractionFreeMode：是否是聚精会神模式，即评论框在写评论的时候，周围是否变成黑

遇到的坑

1. Error: Not Found：一般是仓库名称没有正确设置，请依据上面的参数说明部分进行设置

2. Related Issues not found：未找到相关的issue进行评论，出现这种情况是因为文章评论还未初始化，只需要点击下面的按钮，登录 GitHub 账户即可

3. 评论区一直加载不上：配置中的proxy地址不正确或已经失效。官网默认地址是https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token。如果你使用的是Next主题，请确保也是这个地址

4. 评论时是黑色的：设置distractionFreeMode为false