81. Github添加Gitalk评论功能

1. 申请 Gitalk 账号

1. 右上角头像

2. setting

3. Developer settings

4. OAuth Apps
   

   1. Application name : 随便取名字
   2. Homepage URL : 你的博客地址
   3. Application description : 随便写吧
   4. Authorization callback URL : 你的博客地址

   [注意]:

   1. 如果你申请了网址,进行映射,那么你的博客地址一定要填你申请的那个,比如我的是:dgimo.top,那么,我的Homepage URL 和 Authorization callback URL 都是 dgimo.top

   2. 如果github博客开启了force https功能，需要将OAuth Apps中的地址改为https。

2. 配置 _config.yml

gitalk:
    # Gitalk
    # enable: true
    gitalk_clientID: 你的ID
    gitalk_Secret: 你的Secret
    gitalk_repo: '你存储评论的仓库地址' // 这里建议就是你的博客地址:如test.github.io
    gitalk_owner: '你的用户名'         // 如:test 
    gitalk_admin: '你的用户名'        // 如 test
    distractionFreeMode: false

3. 配置 head.html

在 head.html 的下末尾添加:

<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>

如下图所示:

4. 添加 gitalk.html

在文件夹 _includes 下面创建 gitalk.html,内容如下:

<div id="gitalk-container"></div>

<script>
const gitalk = new Gitalk({
  clientID: '你的ID',
  clientSecret: '你的Secret',
  repo: '你存储评论的仓库地址', 
  owner: '你的用户名',
  admin: ['你的用户名'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')
</script>

[注意]:和 _config.yml 中的保持一致

5. 初始化你的 Gitalk 即可

参考视频

参考文章