文章整理首發(fā)個(gè)人博客 -> Mac 一步一步教你在Jekyll博客添加評(píng)論系統(tǒng)

最近收拾了一下自己的博客系統(tǒng),添加了一套基于Github的評(píng)論gitalk,效果還不錯(cuò),之前用的disqus由于其他原因,打不開了;其他評(píng)論系統(tǒng),如

• 多說,已經(jīng)關(guān)閉;
• 暢言,需要ICP備案;
• 網(wǎng)易云跟貼，曾被當(dāng)作“多說”的替代品，可惜官方通報(bào)說也將在2017.08.01關(guān)閉了;
• disqus，國(guó)外比較火的評(píng)論系統(tǒng)，但在國(guó)內(nèi)墻了，必須完全代理VPN,才可以正常訪問,故也不考慮,如果你想國(guó)內(nèi)也正常訪問disqus,有一個(gè)開源庫(kù),作者利用PHP轉(zhuǎn)發(fā)了國(guó)內(nèi)的請(qǐng)求,部署有點(diǎn)難度,需要的話,留言即可;
• gitalk,支持 markdown,類似 issue,依托 github,不太可能被和諧;

考慮到自己的博客是基于github，并且國(guó)內(nèi)幾個(gè)比較主流的評(píng)論系統(tǒng)目前都無法在Github Pages上的個(gè)人博客使用， 無意間瀏覽別人的博客,發(fā)現(xiàn)了別人的博客評(píng)論,類似Github的issue,細(xì)查之下,我發(fā)現(xiàn)了gitalk，一款由國(guó)內(nèi)大神imsun開發(fā)的基于github issues的評(píng)論系統(tǒng);

最終成果

Gitalk

博主環(huán)境

• MacOS High Serria
• Jekyll驅(qū)動(dòng),原主題由Hux提供,我在此基礎(chǔ)上修改后的主題在這兒,你可以點(diǎn)擊clone或者fork

申請(qǐng)一個(gè)Github OAuth Application

Github頭像下拉菜單 > Settings > 左邊Developer settings下的OAuth Application > Register a new application，填寫相關(guān)信息：

注意:我下面的截圖是因?yàn)槲乙呀?jīng)有注冊(cè)好的GitHubAPP,因此可能跟你的不一樣,大概流程是一樣的;

Git創(chuàng)建APP

感謝這個(gè)作者文章,說明,博客網(wǎng)站的回調(diào)地址,一定要填寫博客的域名,切記切記;

在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設(shè)置\ .markdown
│   ├── 2016-01-16-AFNetworking?\212??\224\231415.markdown

2.增加關(guān)鍵代碼

你需要在 _layouts 下的_post.html,打開這個(gè)html,最好用 sublime Text或者X-code打開,在代碼的一開始,加入如下代碼:

<!--//添加評(píng)論系統(tǒng)-->
<link rel="stylesheet" href="../../../../css/gitalk.css">
    <script src="../../../../js/gitalk.min.js"></script>

這個(gè)腳本有 兩個(gè) 文件 gitalk.css 與 gitalk.min.js,

這兩個(gè)文件在哪里呢;

你需要把我的博客源碼下載下載,找到對(duì)應(yīng)的步驟,然后,把這兩個(gè)文件分別放到對(duì)應(yīng)的文件中,保存即可;

當(dāng)然了,你也可以用這個(gè)default.css

3.添加評(píng)論框

還是在那個(gè) _post.html文件中,找到 關(guān)鍵字 評(píng)論框 在下面添加 gitalk 代碼,如下

                {% if site.disqus_username %}
                <!-- disqus 評(píng)論框 start -->
                <div class="comment">
                    <div id="disqus_thread" class="disqus-thread"></div>
                </div>
                <!-- disqus 評(píng)論框 end -->
                {% endif %}

                {% if site.netease_comment %}
                <!-- 網(wǎng)易云跟帖 評(píng)論框 start -->
                <div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
                <!-- 網(wǎng)易云跟帖 評(píng)論框 end -->
                {% endif %}
                
                <!--   gitalk       -->
                {% if site.gitalk %}
                <div class="comment">
                    {% include comments.html %}
                </div>
                {% endif %}

4.添加鑒權(quán)代碼

這個(gè)在 _config.yml中,打開這個(gè)文件,在對(duì)應(yīng)的評(píng)論模塊添加如下代碼:

# Disqus settings

# disqus_username: Lucy

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

這些參數(shù)怎么來的,是第一步,通過github,申請(qǐng)的,同時(shí),也是我們?cè)u(píng)論的用戶鑒權(quán);

以上就是 在Jekyll中添加Gitalk評(píng)論系統(tǒng),有什么不懂的,可以留言或者issue我;