之前一直用的是来必力的评论系统,还不错,但是个人不太喜欢来必力的界面,感觉加载速度有点慢(个人感觉)。所以换成GitTalk的评论系统,话不多说,我们来上硬货。

注册申请

在GitHub上注册新应用,链接:https://github.com/settings/applications/new

blog_gittalk_001

参数说明:

Application name: 应用名称,随意
Homepage URL: 网站URL,对应自己博客地址
Application description :描述,随意
Authorization callback URL:# 网站URL,博客地址就好


点击注册,页面会出现其中Client ID和Client Secret在后面的配置中需要用到,到时复制粘贴即可:

blog_gittalk_002

这个Client ID和Client Secret只是作为演示在这里给大家看一下,我已经删除了。

在博客网页中添加Gitalk代码

在我的博客中,创建一个gitalk.html文件,放在_includes中即可。

<!-- Link Gitalk 的支持文件  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script> 
<script type="text/javascript" src="/assets/js/md5.min.js"></script>
<div id="gitalk-container"></div>     
<script type="text/javascript">
    var gitalk = new Gitalk({

    // gitalk的主要参数
        clientID: '复制刚才生成的clientID',
        clientSecret: '复制刚才生成的clientSecret',
        repo: '自己博客的地址',
        owner: 'GitHub的用户名',
        admin: ['Github的用户名'],
        id: md5(location.pathname),
        
    });
    gitalk.render('gitalk-container');
</script> 
<!-- Gitalk end -->

然后在你需要显示评论的地方添加即可。 如:要在每篇文章下面显示,直接在post.html最下面添加

{& include gitalk.html &}  //把&改成%

在这里我们就完成了Gitalk的配置

配置过程出现的错误

1、在配置好Gitalk后页面会出现

blog_gittalk_003

Gitalk在使用时要为每篇博文都进行一次初始化,就是需要管理员(你创建Gitalk的GitHub账号)登录一下。PS:我的GitHub账号一直处于登录状态,发布文章后,我在预览的过程就实现了初始化,感觉影响不大。

如果你实在忍不了,可以看一下大佬实现的自动初始化

2、评论初始化404

出现这种错误是因为:

issue的标签label有长度限制!labels的最大长度限制是50个字符

在生成label的时候 id:window.location.pathname

可能会根据编码不同而导致实际id超出50个字符,就会报错404

不过,我已经进行md5加密处理过了id: md5(location.pathname)。优秀!

3、如果还有问题

请进入问题汇总