Jekyll博客中添加Gitalk评论系统

Huxley 收录于 Blog 和 Jekyll

2021-08-28 约 1200 字预计阅读 3 分钟 - 次阅读 - 条评论

Gitalk评论系统的效果图如下：

Gitalk每篇文章的评论对应于Github上的一个Issues，配置完Gitalk后，进入博客对应的Github仓库的Issues，就可以管理评论数据了，下面来配置Gitalk评论系统。

创建Github OAuth Apps

进入Github主页，点击右上角个人头像，【Settings】-【Developer settings】-【OAuth Apps】-【New OAuth App】，可看到如下界面：

Application name: 应用的名字，自定义
Homepage URL: 填写自己博客的URL，如https://star927.github.io
Application description: 应用描述，选填项
Authorization callback URL: 与Homepage URL一样即可

如果Github Pages已经绑定了个人域名，则Homepage URL和Authorization callback URL需要填写自己的域名，如https://huxinme.top

在Jekyll中配置Gitalk

需要修改文件如下：

1
2
3
4
5
6


.
├── _config.yml
├── _includes
│   └── head.html
└── _layouts
    └── post.html

_config.yml

在_config.yml文件中添加以下代码：

1
2
3
4
5
6
7
8


gitalk:
  enable: true # 总开关，控制gitalk功能是否开启
  clientId: 申请的OAuth App的Client ID 
  clientSecret: 申请的OAuth App的Client ID
  repo: 博客对应的仓库名称
  owner: 自己的Github用户名
  admin: 自己的Github用户名
  distractionFreeMode: true # 若设置为true，则当在评论框输入时，周围区域会变暗

repo是自己博客对应的仓库的名称，如star927.github.io，而不是该仓库的URL

head.html

找到自己博客<head>标签所在的文件，如_includes/head.html，在</head>标签前添加以下代码。

1
2
3


{% raw %}{% if page.layout == 'post' and site.gitalk.enable %}{% endraw %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
{% raw %}{% endif %}{% endraw %}

post.html

在_layouts/post.html文件的适当位置添加以下代码，这样每篇博客最后都会有Gitalk评论区。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<div id="gitalk-container"></div>
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
    const gitalk  = new Gitalk ({
        id: window.location.pathname,
        clientID: '{% raw %}{{ site.gitalk.clientId }}{% endraw %}',
        clientSecret: '{% raw %}{{ site.gitalk.clientSecret }}{% endraw %}',
        repo: '{% raw %}{{ site.gitalk.repo }}{% endraw %}',
        owner: '{% raw %}{{ site.gitalk.owner }}{% endraw %}',
        admin: ['{% raw %}{{ site.gitalk.admin }}{% endraw %}'],
        distractionFreeMode: '{% raw %}{{ site.gitalk.distractionFreeMode }}{% endraw %}'
    });
    gitalk.render('gitalk-container');
</script> 

上述步骤完成后，在评论区如果出现问题 Error: Not Found.（如下图），请仔细检查代码是否有误。

初始化Gitalk

正确完成上述步骤后，在评论区可看到以下内容，点击使用Github登录即可。

必须将上述代码的修改提交到Github上，通过https://your-user-name.github.io或者自己已绑定的域名访问自己的博客，再点击使用Github登录，而不是在本地服务器http://127.0.0.1:4000/点击使用Github登录。

登录自己的Github账号后，就可以看到Gitalk评论区了。