Mac 一步一步教你在Jekyll博客添加评论系统

文章原创如需转载，请注明出处”本文首发于一之笔”;

2019年3月更新如下:

将 gitalk 配置的代码,抽离成一个文件 comments;

路径: _includes/comments;

在_post.html文件中,打开,搜索 “评论框”关键字,将 comments 引入即可;


<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
var gitalk = new Gitalk({
id: '2018-09-26 00:32:24 +0000', //这里不要写死,你看到下文中写死的日期,是因为,博客部署的时候,自动引用了文章的发布日期;
clientID: '3e12c08c2ec52afbcb30',
clientSecret: 'c2a74d279e7b42cf782a1d2d1b5a410d27c5ab57',
repo: 'yizibi.github.io',
owner: 'yizibi',
admin: ['yizibi'], 
labels: ['Gitalk'],
})
gitalk.render('gitalk-container')
</script>

一定注意

这个gitalk的id,是唯一的,一般是当前的时间戳,不要写死,也不要写成文章的标题,page.title,如果文章标题过长,会出现以下错误;

Error: Not Found.

所以这个id,以 page.date 为准,这个要注意下;

最近收拾了一下自己的博客系统,添加了一套基于Github的评论gitalk,效果还不错,之前用的disqus由于其他原因,打不开了;其他评论系统,如

多说,多说已经关闭;
畅言,,畅言需要ICP备案;
网易云跟贴，曾被当作“多说”的替代品，可惜官方通报说也将在2017.08.01关闭了;
disqus，国外比较火的评论系统，但在国内墙了，故也不考虑。
gitalk,支持 markdown,类似 issue,依托 github,不太可能被和谐;

考虑到自己的博客是基于github，并且国内几个比较主流的评论系统目前都无法在Github Pages上的个人博客使用，无意间浏览别人的博客,发现了别人的博客评论,类似Github的issue,细查之下,我发现了gitalk，一款由国内大神imsun开发的基于github issues的评论系统;

最终成果

Gitalk

博主环境

MacOS High Serria
Jekyll驱动,原主题由Hux提供,我在此基础上修改后的主题在这儿,你可以点击clone或者fork

申请一个Github OAuth Application

Github头像下拉菜单 > Settings > 左边Developer settings下的OAuth Application > Register a new application，填写相关信息：

注意:我下面的截图是因为我已经有注册好的GitHubAPP,因此可能跟你的不一样,大概流程是一样的;

Git创建APP

感谢这个作者文章,说明,博客网站的回调地址,一定要填写博客的域名,切记切记;

在jekyll博客添加gitalk

1.博客源码目录

一般博客源码下载下基本都是以下的目录:

├── 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,最好用 sublime Text或者X-code打开,在代码的一开始,加入如下代码:

<!--//添加评论系统-->
<link rel="stylesheet" href="../../../../css/gitalk.css">
<script src="../../../../js/gitalk.min.js"></script>

这个脚本有两个文件 gitalk.css 与 gitalk.min.js,

这两个文件在哪里呢;

你需要把我的博客源码下载下载,找到对应的步骤,然后,把这两个文件分别放到对应的文件中,保存即可;

当然了,你也可以用这个default.css

3.添加评论框

还是在那个 _post.html文件中,找到关键字评论框在下面添加 gitalk 代码,如下






<!--   gitalk       -->

<div class="comment">
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
var gitalk = new Gitalk({
    id: '2018-09-26 00:32:24 +0000',
    clientID: '3e12c08c2ec52afbcb30',
    clientSecret: 'c2a74d279e7b42cf782a1d2d1b5a410d27c5ab57',
    repo: 'yizibi.github.io',
    owner: 'yizibi',
    admin: ['yizibi'], 
	labels: ['Gitalk'],
})
gitalk.render('gitalk-container')
</script> 

</div>

4.添加鉴权代码

这个在 _config.yml中,打开这个文件,在对应的评论模块添加如下代码:

# Disqus settings

# disqus_username: Lucy

# Netease settings
netease_comment: false
// 添加这个就行,上面的只是为了你能方便找到地方
gitalk:
enable: true
owner: ***zibi
repo: *****.github.io
clientID: ****c08c2ec52afbcb30
clientSecret: *******79e7b42cf782a1d2d1b5a410d27c5ab57
admin: **zibi

这些参数怎么来的,是第一步,通过github,申请的,同时,也是我们评论的用户鉴权;

以上就是在Jekyll中添加Gitalk评论系统,有什么不懂的,可以留言或者issue我;

☛兄dei，请我喝杯茶☚

你的博客有评论系统吗?