在个人博客中优雅的使用Gitalk评论插件

在上一篇博客《程序员如何从0到1搭建自己的技术博客》中,我们了解了如何快速的从0到1搭建一个个人博客。

其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk。

如果想要在博客中正确的使用该插件,还是需要修改下_config.yml里关于Gitalk的配置的。

也许你会好奇Gitalk是什么?有什么用途?

我们打开下Gitalk的官网https://gitalk.github.io/,就能看到答案。

Gitalk其实就是一个评论插件,访问网站的用户可以使用GitHub账号登录后进行文章评论,博主也可以进行回复,增进交流。

那么接下来我们详细讲解下,如何在博客中使用Gitalk插件。

1.申请OAuth Application

申请地址:https://github.com/settings/applications/new

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

在详情页,可以看到刚刚申请的clientID与clientSecret:

2.修改_config.yml关于Gitalk的配置

为方便对比展示,我这里截取下我的修改记录:

3.开启GitHub仓库的Issues功能

只有打开该配置,每次打开新发布的博客(新页面),都会生成一个新的Issues,该页面所有的评论都会汇总在该Issues下:

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.效果预览

6.参考链接

GitHub评论Gitalk插件

原文地址:https://www.cnblogs.com/zwwhnly/p/10634019.html

时间: 2024-11-05 12:20:19

在个人博客中优雅的使用Gitalk评论插件的相关文章

决定去掉博客中附加的多说评论

1. 自己对用户评论的需求太过乐观 2. 需要多去一个管理入口,增加管理成本 相关代码 var $arth_obj = $('#cb_post_title_url');if  ( $arth_obj.length > 0){    var ds_url = $arth_obj.attr('href');    var ds_title = $arth_obj.text();        var ds_art_id = ds_url.match(/\d{2,10}/g).join('');  

博客中gitalk最新评论的获取 github api使用

博客中,对于网友的评论以及每篇文章的评论数还是很重要的.但是基于静态的页面想要存储动态的评论数据是比较难的,一般博客主题中都内置了评论插件,但是博客主题中对于最新评论的支持显示还是很少的,至少目前我是没怎么发现.博客 Powered by Hexo & Icarus,采用Gitalk评论,再次感谢此三位作者的辛勤码代码,才有了以下的内容.基于此背景基础上,聊聊最新评论的实现. 博客的使用, Hexo & Icarus,采用Gitalk评论 的使用自行百度了. 使用场景 最新评论列表 最热文

关于如何在博客中编辑公式的资料

参考例外一篇关于在线公式编辑的文章:http://www.cnblogs.com/haore147/p/3629895.html 好吧,直接试一下才知道: 1. 打开网址:http://latex.codecogs.com/ 2. 输入LaTex代码: f(x)=\frac{1}{\sqrt{2\pi }\sigma } e^{-\frac{(x-\mu )^2}{2\sigma ^2}} 结果如下图: 3.1 切换到源码模式(方法一) 输入:<img src="http://latex.

在hexo静态博客中利用d3-cloud来展现标签云

效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:https://github.com/jasondavies/d3-cloud demo地址:https://www.jasondavies.com/wordcloud/ hexo生成的是静态博客,所以最后在网上看到的都是静态的内容,也就是说,我们的看到的标签云也是静态的已经生成好的内容,并不会随着刷新

关于csdn博客中案例效果的动态演示

在以前一篇博文中,网友评论说要是案例效果是动态演示的就好了,我觉得说的很是有道理,因为一个简单的截图不能很好的展示案例效果,要是有一张gif图能动态的播放案例效果就再好不过了.在这里提供一个小软件,用来制作gif图片的.读者可以参考另一篇博文:http://blog.csdn.net/tangcheng_ok/article/details/8246792.这一篇博文也是介绍如何制作gif动态演示图片的.在这里我想做的就是提醒一下大家:在写博文的过程中,如果是上传gif图片,一定要选择无水印,否

查询博客中相同文章类别总共有多少文章

查询博客中相同文章类别总共有多少文章 T_Content 博客表 T_ContentType 博客类别表 string sql = "select  (select  count(*) from T_Content where FTypeId=T.FID) as num from T_ContentType AS T" 查询博客中相同文章类别总共有多少文章

关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目

关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目,请大家鉴定,不足之处,敬请指教! 第1到3题解答如下: public enum QuestionType { Text = 0, MultipleChoice = 1 } public interface IQuestion { string Title { get; set; } QuestionType Category { get; } } public abstract class Que

在CSDN博客中插入视频

经过笔者测试,如果想要在CSDN博客中插入视频,在HTML编辑器中写的上传视频的代码(以iframe为例)提交后在文章中是找不到的,不知道为什么没有了,视频也不会显示:在Markdown编辑器中写的上传视频的代码(以iframe为例)提交后在文章中可以找到,同时也会显示视频.

怎样将word中的图片插入到CSDN博客中

目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写博客需要在第三方博客平台注册帐号,且需要第三方博客平台提供API接口.目前的有的博客平台均已关闭博客接口,所以无法使用Word来发布博客. 2.发布到博客或公众号平台的图片无法转载.由于所有博客平台,公众号平台(如微信)开启了图片防盗链功能,作者发布到这些平台上的图片则无法转载到其它的网站中,这限制