博客配置gitalk评论系统遇到的坑

基于 GitHub Pages 和 jekyll 搭建了个人技术博客，跟着网上的教程搭建下来还是比较顺利的，但是评论系统一直不能正常使用。这两天终于有时间把 gitalk 评论系统配置成功能用了，遇到不少坑，记录下来。

首先，我的 个人博客 评论功能应该还是正常使用的，有问题请评论告诉我。

在博客模板上看到下面的配置（具体可以通过 gitalk 官网了解）：

var gitalk = new Gitalk({
    id: '{{ page.url }}',
    clientID: '{{ site.gitalk.clientID }}',
    clientSecret: '{{ site.gitalk.clientSecret }}',
    repo: '{{ site.gitalk.repo }}',
    owner: '{{ site.gitalk.owner }}',
    admin: ['{{ site.gitalk.owner }}'],
    labels: ['gitment'],
    perPage: 50,
})

需要关注的配置有：

• id：文章唯一id，后面会重点说明
• repo：保存评论的GitHub仓库名称（注意是名称）
• owner：一般填自己的GitHub用户名
• admin：[‘自己的GitHub用户名’]，注意这是个数组，一般也是填自己就可以
• labels：文章标签，后面会重点说明

第一个坑 Error: Not Found.

很有可能会遇到这个问题： Error: Not Found. （大哥倒是说清楚找不到啥东西啊）

其实这是找不到保存评论的 GitHub 仓库，就是上面 repo 配置的仓库。

排查问题：

1. 检查一下有没有创建这个仓库，并且Settings 的 Issues 需要勾选，也可以直接用博客的仓库，但是最好另外新建一个；

2. repo 要填的是仓库名称，不是地址，直接用博客仓库 jairustse.github.io 可能会以为是地址，其实这是仓库名。（这里是通过 owner 配置的用户名和 repo 配置的仓库名找到对应仓库的，好像说，你去找 Github 用户 JairusTse 的 gitalk 仓库）

第二个坑 未找到相关的 Issues 进行评论

repo 仓库配置正确，运气好的话就会遇到第二个坑。

点登录不行，网上找的方法也没用，让我一筹莫展。还好找到了官方提供的 Demo，起码证明 gitalk 插件是能正常使用的。通过查看这个网页的源码，找到了配置（还找不到问题所在的朋友可以一一替换成下面的配置，找到是哪个配置有问题）。

<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
<script type="text/javascript">
  var gitalk = new Gitalk({
    clientID: 'e46f6dec7c07145c652c',
    clientSecret: 'd1a0b627f9b76d21bd3080d1777d0aa0ad55dd83',
    accessToken: '6a2f4d91a1f188a2089e70c2a7b63628f3e9e664',
    repo: 'gitalk',
    owner: 'gitalk',
    admin: ['booxood', 'mamboer'],
    id: 'Demo',
    distractionFreeMode: true
  });
  gitalk.render('gitalk-container');

刷新页面会发起这个请求，返回评论数据：
https://api.github.com/repos/gitalk/gitalk/issues?labels=Gitalk,demo&t=1620540721425

我自己的页面请求，加上labels=Gitalk,demo参数，没有数据返回：
https://api.github.com/repos/JairusTse/gitalk/issues?labels=Gitalk,demo

不带参数，有数据返回：
https://api.github.com/repos/JairusTse/gitalk/issues

关键就在于这个 labels 参数的值。那么这个 labels 是什么呢？其实是评论仓库里面 Issues 的标签（所有文章的评论都放在一个仓库，所以要为每篇文章创建唯一的标签，通过标签返回对应的评论）。

上面配置中的 id 就是每篇文章的唯一标签。官方 Demo 写死了 id: 'Demo'，所以一直是 labels=Gitalk,demo。博客模板是用文章URL作为标签的。但是标签长度不能超过50个字符，可以自己注意限制长度或者参考这位同学的做法： 处理Gitalk中由于文章URL过长导致的Validation Failed(422)

仓库和标签配置正确，应该就可以正常使用，愉快的写博客了。

下面是我自己的配置，仅供参考：

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
    id: '{{ page.url }}',
    clientID: '{{ site.gitalk.clientID }}',
    clientSecret: '{{ site.gitalk.clientSecret }}',
    repo: 'gitalk',
    owner: 'JairusTse',
    admin: ['JairusTse'],
    labels: ['Gitalk'],
    perPage: 50
})
gitalk.render('gitalk-container')
</script>