在Jekyll博客中添加评论系统

Posted on By Richard

此次添加的评论系统为gitalk, 基于github issue,很适合github上Jekyll博客。

一. 申请一个OAuth Application

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

关键是Authorization callback URL,填写和你博客主页地址相同。

完成后,得到 Client IDClient Secret,后面需要用到。

二. 增加关键代码

下载 gitalk.cssgitalk.min.js 放入相应的位置。

在_layouts下的_post.html中,开始的地方加如下代码:

<link rel="stylesheet" href="../../../../styles/css/gitalk.css">
    <script src="../../../../styles/js/gitalk.min.js"></script>

三. 添加评论框代码

下载comments.html,放入_includes目录中。

在那个 _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-12-27 00:32:24 +0000',
        clientID: '9309266a4518558b7138',
        clientSecret: '3233f9c7e9129249ac3a0e8e04b001cf02220139',
        repo: 'codejsd.github.io',
        owner: 'codejsd',
        admin: ['codejsd'], 
    	labels: ['Gitalk'],
    })
    gitalk.render('gitalk-container')
    </script>
    
    </div>

四. 添加鉴权代码

在 _config.yml中,最后面,在对应的评论模块添加如下代码:

gitalk:
   enable: true
   owner: codejsd
   repo: codejsd.github.io
   clientID: 9309266a4518558b7138
   clientSecret: 3233f9c7e9129249ac3a0e8e04b001cf02220139
   admin: codejsd