Gitalk 的使用

由于我比较笨还英文不好,所以按照 Gitalk 提供的文档给 Hexo 添加评论功能,简直就是不能行!各种报错后,翻看 Issues、Google、百度… 用了一天时间终于 Gitalk 可用了。
这里我分享一下我的添加过程与报错问题的解决方法,供参考借鉴!

添加过程

申请 GitHub Application

如果有的话在 Github 中 settings / Developer settings 选择一个 OAuth App,如果没有 点击这里申请,我是第一次使用,自然需要从申请开始。

注册需要填写的表单

说明一下:

  • Application name: 没有限制的 APP 名称,比如:Hexo-application
  • Homepage URL: 网站的主页,我理解就是根目录,比如:https://zhwangart.github.io
  • Application description: 描述,非必填,我当时没有写。
  • Authorization callback URL: 回调 url 我理解就是网站的域名,比如:https://zhwangart.github.io

然后申请成功后,就看到有了 Client ID 与 Client Secret 的一个页面,页面下边就是申请刚填写的的信息,均可以再次编辑! 只有 Client ID 与 Client Secret 是在配置 Hexo 的时候需要用。

申请成功

看见好多网友做截图时候把 Client ID 与 Client Secret 打码,我有一种木有必要的感觉…

在 Hexo 主题设计中引入 Gitalk

这个看 Gitalk 里面的引入方法就可以了,如果你使用 Ocean 的话,那么忽略这里,因为 Ocean 已经配置好了这些!

1
2
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

创建一个仓库

在 GitHub 中 创建一个仓库用来存放评论,因为 Gitalk 的评论其实是在 GitHub 仓库自动创建 Issue 。

用法

这个一定要仔细,不管是创建一个 comment.ejs 或者 gitalk.ejs 模板文件,还是直接在 post.ejs 模板页中写入,用法都是一样的。因为 Gitalk 是在文章的最底部出现,所以我不选择在 head 中引入 css 与 js ,当然这么做可能不是很规范。

因为主题 Ocean 是用 ejs 写的,所以 ejs 为例,创建一个 gitalk.ejs 代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% if (theme.gitalk.enable) { %>  // 这里判断主题是否开启评论
<div id="gitalk-container"></div> // 盛放 Gitalk 的容器
<%- css('https://unpkg.com/gitalk/dist/gitalk.css') %>
<%- js('https://unpkg.com/gitalk/dist/gitalk.min.js') %>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '<%- theme.gitalk.clientID %>', // 这里一定要注意主题 config.yml 中 clientID 的大小写,否则参数传不过来,对应下边的 "问题一"
clientSecret: '<%- theme.gitalk.clientSecret %>',
repo: '<%- theme.gitalk.repo %>',
owner: '<%- theme.gitalk.owner %>',
admin: ['<%- theme.gitalk.admin %>'],
id: location.pathname, // 保持默认,官方注释(Ensure uniqueness and length less than 50),文章 URL 不能太长 "问题二"
distractionFreeMode: false // 不喜欢评论时候的遮盖层所以选择 false ,而且我觉得这个也没有必要放在 config.yml 中配置
})

gitalk.render('gitalk-container')
</script>
<% } %>

在 article.ejs(模板页名称因主题而异)中 include gitalk.ejs 因为我只需要在 post 中加入评论功能其他页面不需要所以做了 post 判断!

1
2
3
<% if (is_post()) { %>
<%- partial('post/gitalk') %>
<%} %>

然后在主题 config.yml 中添加配置参数,注意 repo 只需要写名称

1
2
3
4
5
6
7
8
# Gitalk
gitalk:
enable: true
clientID: b056dd67656dd67522d6 # 换成你申请 GitHub Application 网页上对应的 Client ID 与 Client Secret 参数
clientSecret: 05c56dd6736f12ac156dd6711956dd67e156dd67 # 同上
repo: gitalk # 换成你创建的仓库,首先确保该仓库已经创建,其次只需要写名称,比如 "gitalk",否则 "问题三"
owner: # 你的 Github ID(Github 用户名)
admin: # 你的 Github ID 就可以,官方注释(Facebook-like distraction free mode)说明还可以添加其他有权限的人

报错与解决方案

问题一

未找到相关的 Issues 进行评论 请联系 @xxxxxx 初始化创建。

未找到相关的 Issues 进行评论

这个问题分为两种情况:

  1. 确实是没有初始化创建,那么点击 “使用 Github 登录” 一次就好了!
  2. 点击 “使用 Github 登录” 跳转到了 404 页面,那么就很有可能是 Client ID 与 Client Secret 的参数没传过来,右键检查页面是否有参数,如果为空的话,检查 ClientID(注意 Client 首字母大小写) 与 ClientSecret 这两个字段是否与 config.yml 中的一致。

问题二

Error: Validation Failed.

Error: Validation Failed.

在 Gitalk 的 Issues 找到原因:文章的 URL 过长,生成 issue 时超过了 Label 的长度限制,这的注释也写的很明确:id: location.pathname, // Ensure uniqueness and length less than 50 。有两种解决方案:

  1. 按照 Ensure uniqueness and length less than 50 要求,精简文章名称,避免使用中文,缩短 URL…
  2. 文章名经 URL 编码后转 MD5 JavaScript-MD5
1
2
3
4
5
6
// 引入 JavaScript-MD5
<%- js('https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js') %>

id: location.pathname, // Ensure uniqueness and length less than 50
// 改为:
id: md5(location.pathname),

问题三

Error: Not Found.

Error: Not Found.

很简单就是 repo 写错了!这里只需要写仓库名称,不要链接!

补充

如果你遇到的问题没有列出?这里也许有你要找的答案~

  1. 与自定义域名相关的 Issue :https://github.com/zhwangart/gitalk/issues/7#issuecomment-517542367

欢迎更多补充…

Ocean 中使用 Valine