Hexo博客 --- 添加Gitalk评论

1.前言

目前 3-hexo 已经集成了评论系统有 gitalkgitmentdisqus来必力utteranc。本来以为按照 3-hexo 作者的设置文档很简单,没想到中间还是遇到一些问题,然后就将这些问题做了以下记录。

2.Gitalk

2.1 Gitalk简介

Gitalk 是一款基于 Github IssuePreact 开发的评论插件,使用 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 IDClient 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 IDClient 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 URLAuthorization 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开始用户只能手动先访问这个网站获取临时的访问权限,然后才能使用

Gitalkissues 中查到有两种解决方法:更新版本到1.7.2或者修改配置增加 proxy。修改配置增加 proxy方式如下(本博主题为 3-hexo):

  1. 打开 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
    
  2. 打开 themes/3-hexo/layout/_partial/comments/gitalk.ejs 文件,增加 proxy: '<%=theme.gitalk.proxy %>',,完整代码为:

    重新部署Hexo之后,Gitalk评论就能使用了。
本文作者:Rui
发布时间:2021-03-07, 23:16:11
原始链接:https://wrf8.github.io/posts/2465856778.html
版权声明:转载请保留原文链接及作者。

×

喜欢就点赞,疼爱就打赏