1.前言
目前 3-hexo 已经集成了评论系统有 gitalk 、gitment、 disqus 、来必力、utteranc。本来以为按照 3-hexo 作者的设置文档很简单,没想到中间还是遇到一些问题,然后就将这些问题做了以下记录。
2.Gitalk
2.1 Gitalk简介
Gitalk 是一款基于
Github Issue和Preact开发的评论插件,使用 Github 帐号登录,界面干净整洁,支持MarkDown语法,在个人博客里添加了之后就可以很简便的进行评论和回复了。
主要特性:
- 使用 Github 登录
- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
- 支持个人或组织
- 无干扰模式(设置 distractionFreeMode 为 true 开启)
- 快捷键提交评论 (cmd | ctrl + enter)
- 支持 MarkDown 语法
界面效果:
2.2 3-hexo添加Gitalk评论
2.2.1 登录Github注册OAuth应用
点击进行注册 ,也可以通过 GitHub -> 【点击头像】 -> 【Settings】 -> 【Developer settings】-> 【OAuth Apps】->【New OAuth App】进行基本配置,如下:
Application name:应用名称,随便填Homepage URL:没有过多要求,可以填自己的博客地址(避免出问题最和Authorization callback URL好统一)Application description:应用描述,描述一下,无要求Authorization callback URL:这个就有要求了,填自己要使用Gitalk的博客地址,不可乱填
注册完后,可得到 Client ID 和 Client Secret。
2.2.2 新建存放评论的仓库
因为 gitalk 是基于 Github 的 Issue 的,所以,你要为他建一个库或用现成的库,可以新建一个,而 repo 就是你要用的库的名称。 比如,为 Gitalk 专门建了一个叫 gitalk 的库,所以在 repo: 处填 gitalk。
2.2.3 配置主题
在主题下 _config.yml 中找到如下配置,启用评论,并使用 gitalk
##########评论设置#############
comment:
on: true
type: gitalk
在主题下 _config.yml 中找到 gitalk 配置,将第1步得到的 Client ID 和 Client Secret 复制到如下位置:
gitalk:
githubID: # 填你的 github 用户名
repo: xxx.github.io # 承载评论的仓库,一般使用 Github Page 仓库
ClientID: # 第1步获得 Client ID
ClientSecret: # 第1步获得 Client Secret
adminUser: # Github 用户名
distractionFreeMode: true
language: zh-CN
perPage: 10
到此为止,所有的配置就完成了,执行部署之后,过一会儿应该能看到效果了,应该能看到效果了。
2.3 问题
2.3.1 未找到相关的lssues进行评论
如果出现以下提示,则使用Github登录即可解决。
2.3.2 登录GitHub之后跳转博客首页
登录GitHub之后跳转到博客首页,主要是因为 Homepage URL 和 Authorization callback URL这两个地址错误引起的,我是因为注册 OAuth应用 的时候填写的博客地址,但是测试时用的 http://localhost:4000/,导致两个地址不匹配。
2.3.3 Request failed with status code 403

遇到这个问题之后,我反复检查配置,发现跟别人讲解的都一样,但是自己的还是不能使用,像极了大多数家长教育自家孩子的那句话:为什么别人家的孩子都可以,就你不行【吐血】。那能怎么办呢,生活还是要继续,问题还是要解决。经过一番网上查找之后,发现遇到这个问题的不止我一个,真的是大有人在啊!
首先有这个报错,肯定是有网络请求,F12 打开开发者工具,查看 Network项发现报错为:
这个请求是由 https://cors-anywhere.herokuapp.com/ + https://github.com/login/oauth/access_token两部分组成,其实真正的请求地址是后面这个地址,是为了请求token,而 CORS Anywhere 是一个NodeJS代理,是一个开源框架,使用之后,可以在需要的时候做跨域请求,CORS Anywhere 为了确保每个人都可以使用该服务,每个周期的请求数都受到限制,但来自某些明确列入白名单的来源的请求除外。
这个网站本来是演示用的,但是由于被滥用,从2021年1月31号开始停止开放,2.1开始用户只能手动先访问这个网站获取临时的访问权限,然后才能使用。
从 Gitalk的 issues 中查到有两种解决方法:更新版本到1.7.2或者修改配置增加 proxy。修改配置增加 proxy方式如下(本博主题为 3-hexo):
- 打开
themes/3-hexo/_config.yml,将gitalk项添加proxy配置:gitalk: githubID: repo: ClientID: ClientSecret: adminUser: distractionFreeMode: true language: zh-CN perPage: 10 proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token - 打开
themes/3-hexo/layout/_partial/comments/gitalk.ejs文件,增加proxy: '<%=theme.gitalk.proxy %>',,完整代码为:
重新部署Hexo之后,Gitalk评论就能使用了。