今天我为本站添加了基于 GitHub Issues 的 Gitalk 评论系统。配置过程并不复杂,比较适合 GitHub Pages 站点。
至此,本站初期的建设就告一段落了。
配置
以下内容仅针对 Hux Blog。
首先 申请一个 OAuth Application
Authorization callback URL
填写你博客的地址,如 https://kevinh.wang
。之后你会得到一个 Cilent ID
和 Client Secret
。
然后在 _config.yml
添加以下内容:
1 2 3 4 5 6 7 8
| gitalk: enable: true repo: khwang9883.github.io owner: KHwang9883 admin: KHwang9883 clientID: 'cilentID' clientSecret: 'cilentSecret'
|
然后在需要的页面添加代码,我在 _layouts/post.html
的 Post Container
中添加了一个容器:
1 2 3 4 5
| {% if site.gitalk %}
<div id="gitalk-container"></div>
{% endif %}
|
并添加了一段 JavaScript 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| {% if site.gitalk.enable %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript"> var gitalk = new Gitalk({
// gitalk的主要参数 clientID: '{{ site.gitalk.clientID }}', clientSecret: '{{ site.gitalk.clientSecret }}', repo: '{{ site.gitalk.repo }}', owner: '{{ site.gitalk.owner }}', admin: ['{{ site.gitalk.admin }}'], id: '{{ page.url }}', distractionFreeMode: false // Facebook-like distraction free mode }); gitalk.render('gitalk-container'); </script> {% endif %}
|
如果需要,也可以在 about.html
friends.html
添加这两段代码。
之后授权登录 GitHub,并逐一进入各页面,Gitalk 就配置完成了。