最近收拾了一下自己的博客系统,添加了一套基于
Github的评论gitalk,效果还不错,之前用的disqus由于其他原因,打不开了;其他评论系统,如
- 多说,多说已经关闭;
- 畅言,,畅言需要ICP备案;
- 网易云跟贴，曾被当作“多说”的替代品，可惜官方通报说也将在2017.08.01关闭了;
- disqus，国外比较火的评论系统，但在国内墙了，故也不考虑。
- gitalk,支持 markdown,类似 issue,依托 github,不太可能被和谐;
考虑到自己的博客是基于github，并且国内几个比较主流的评论系统目前都无法在Github Pages上的个人博客使用， 无意间浏览别人的博客,发现了别人的博客评论,类似Github的issue,细查之下,我发现了gitalk，一款由国内大神imsun开发的基于github issues的评论系统;
博主环境
- Win10
- Jekyll驱动,原主题由Hux提供。
申请一个Github OAuth Application
Github头像下拉菜单 > Settings > 左边Developer settings下的OAuth Application > Register a new application，填写相关信息： 其他可以随意填，回调地址写你的博客地址。
下面贴一张参考的博主的贴图：
在jekyll博客添加gitalk
1.博客源码目录
一般博客源码下载下基本都是以下的目录:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
├── 404.html
├── CNAME
├── Gruntfile.js
├── LICENSE
├── README.md
├── README.zh.md
├── _config.yml
├── _includes
│ ├── about
│ │ ├── en.md
│ │ └── zh.md
│ ├── comments.html
│ ├── dashang.html
│ ├── footer.html
│ ├── head.html
│ ├── mathjax_support.html
│ ├── nav.html
│ └── posts
│ └── 2017-07-12-upgrading-eleme-to-pwa
│ ├── en.md
│ └── zh.md
├── _layouts
│ ├── default.html
│ ├── keynote.html
│ ├── page.html
│ └── post.html
├── _posts
│ ├── 2015-12-12-iOS中�\233��\211\207�\232\204�\234\206�\222设置\ .markdown
│ ├── 2016-01-16-AFNetworking�\212��\224\231415.markdown
2.增加关键代码
你需要在
_layouts下的_post.html,打开这个html,在代码的一开始,加入如下代码:
1
2
3
4
<!--//添加评论系统-->
<link rel="stylesheet" href="/css/gitalk.css">
<script src="/js/gitalk.min.js"></script>
这个脚本有 两个 文件 gitalk.css 与 gitalk.min.js,
这两个文件在哪里呢;
你需要把我的博客源码下载,找到对应的步骤,然后,把这两个文件分别放到对应的文件中,保存即可;
3.添加评论框
还是在那个 post.html文件中,找到下面代码
<!-- 上一篇或者下一篇post按钮 -->
<hr style="visibility: hidden;">
<ul class="pager">
<li class="previous">
<a href="/2021/05/03/%E5%AE%9E%E7%94%A8%E7%9A%84LaTeX%E7%BC%96%E8%BE%91%E6%96%B9%E5%BC%8F/" data-toggle="tooltip" data-placement="top" title="实用的LaTeX编辑方式">
Previous<br>
<span>实用的LaTeX编辑方式</span>
</a>
</li>
<li class="next">
<a href="/2021/08/05/%E4%BC%98%E5%8C%96%E5%AD%A6%E4%B9%A0/" data-toggle="tooltip" data-placement="top" title="凸优化学习">
Next<br>
<span>凸优化学习</span>
</a>
</li>
</ul>
<hr style="visibility: hidden;">
//添加下面这一部分，上面只是为了让你能够找到位置
<!-- Gitalk start -->
<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>
var gitalk = new Gitalk({
id: '2021-08-01 00:00:00 +0000',
clientID: '18a3fb3534893361f414',
clientSecret: 'd92191795fca3199d7a09303378ffd5e20f52a22',
repo: 'fanqibing.github.io',
owner: 'fanqibing',
admin: ['fanqibing'],
labels: ['Gitalk'],
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk end -->
注意 这个gitalk的id：写的是'{{ page.date }}'，上面代码中显示具体时间是因为，page.date自己调用了写文章的时间戳。Gitalk的原理实际上就是将用户评论存储到Github的Issue中，并且调用到博客中显示。同时，为了保证每篇文章的评论互相独立，需要为每篇文章单独建立一个issue。这样一来，就需要对Issue进行编号以作区分，id就是其编号。只要每篇文章的编号不同就可以区分开来，而对编号规则没有严格的限制。因此，可以用时间戳，也可以用文章的路径，标题等。因为Github对Issue的编号有个不大于50字的限制，所以我用时间戳来编号。
一定要放在我说的位置，不然你会发现评论会占满整个底部，非常丑，别问我怎么知道的。
4.添加鉴权代码
这个在 _config.yml中,打开这个文件,在对应的评论模块添加如下代码:
# Disqus settings
# disqus_username: Lucy
# Netease settings
netease_comment: false
// 添加这个就行,上面的只是为了你能方便找到地方
# Gitalk settings
gitalk:
enable: true
owner: **********
repo: **********.github.io
clientID: **********
clientSecret: **********
admin: **********
**********用你第一步获得的具体值替代。
以上就是 在Jekyll中添加Gitalk评论系统,有什么不懂的,可以留言或者issue我;
