在個人部落格中優雅的使用Gitalk評論外掛

周偉偉的技術部落格發表於2019-03-31

在上一篇部落格《程式設計師如何從0到1搭建自己的技術部落格》中,我們瞭解瞭如何快速的從0到1搭建一個個人部落格。

其實細心的你會發現,該部落格用到了一個評論外掛,這個外掛就是Gitalk。

如果想要在部落格中正確的使用該外掛,還是需要修改下_config.yml裡關於Gitalk的配置的。

也許你會好奇Gitalk是什麼?有什麼用途?

我們開啟下Gitalk的官網gitalk.github.io/,就能看到答案。

在個人部落格中優雅的使用Gitalk評論外掛

Gitalk其實就是一個評論外掛,訪問網站的使用者可以使用GitHub賬號登入後進行文章評論,博主也可以進行回覆,增進交流。

那麼接下來我們詳細講解下,如何在部落格中使用Gitalk外掛。

1.申請OAuth Application

申請地址:github.com/settings/ap…

在個人部落格中優雅的使用Gitalk評論外掛

申請完成後,可以在GitHub-->Settings-->Developer settings看到:

在個人部落格中優雅的使用Gitalk評論外掛

在詳情頁,可以看到剛剛申請的clientID與clientSecret:

在個人部落格中優雅的使用Gitalk評論外掛

2.修改_config.yml關於Gitalk的配置

為方便對比展示,我這裡擷取下我的修改記錄:

在個人部落格中優雅的使用Gitalk評論外掛

在個人部落格中優雅的使用Gitalk評論外掛

在個人部落格中優雅的使用Gitalk評論外掛

3.開啟GitHub倉庫的Issues功能

在個人部落格中優雅的使用Gitalk評論外掛

只有開啟該配置,每次開啟新發布的部落格(新頁面),都會生成一個新的Issues,該頁面所有的評論都會彙總在該Issues下:

在個人部落格中優雅的使用Gitalk評論外掛

4.最終生成的程式碼

<link rel="stylesheet" href="http://www.zwwhnly.com/assets/css/gitalk.css">
<script src="http://www.zwwhnly.com/assets/js/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script>
    var gitalk = new Gitalk({
        id: '/spring/2019/03/06/javaconfig-bean.html',	// 自動生成每個頁面的地址,注意不要重複
        clientID: 'clientID',
        clientSecret: 'clientSecret',
        repo: 'zwwhnly.github.io',	// GitHub倉庫名
        owner: 'zwwhnly',	// GitHub使用者名稱
        admin: ['zwwhnly'],	// GitHub使用者名稱
        perPage: 50
    })
    gitalk.render('gitalk-container');
</script>
複製程式碼

如果是其他的網站,直接新增以上程式碼(稍作修改)就可以開始使用Gitalk。

5.效果預覽

在個人部落格中優雅的使用Gitalk評論外掛

6.參考連結

GitHub評論Gitalk外掛

相關文章