如何通过Gitalk评论插件,5分钟为你的博客快速集成评论功能
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 《Java 核心知识整理&面试.pdf》资源链接!!
个人网站: https://www.exception.site/essay/how-to-install-gitalk-on-your-blog
小哈之前有给大家分享如何给自己的个站快速集成聊天室功能,新关注的小伙伴可参考:《黑科技!仅需 3 行代码,就能将 Gitter 集成到个人网站中,实现一个 IM 即时通讯聊天室功能?》
集成完了聊天室,是不是感觉还少了什么?今天给大家分享一下,如何通过 Gitalk 快速集成评论功能。
目录
一、什么是 Gitalk
二、Gitalk 特性
三、为什么要使用 Gitalk
四、Gitalk 安装
五、为你的个站集成 Gitalk
六、你可能会碰到的坑
七、最终效果
一、什么是 Gitalk
Gitalk 的官方网站地址是: https://gitalk.github.io
小哈截图的时候,Star 数已经达到 2000+ 了,那它到底是个什么玩意呢?来自官方的解释:
Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
二、Gitalk 特性
- 使用 GitHub 登录
- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
- 支持个人或组织
- 无干扰模式(设置 distractionFreeMode 为 true 开启)
- 快捷键提交评论 (cmd|ctrl + enter)
三、为什么要使用 Gitalk
其实国内也有很多易于集成的评论插件,如多说、友言等。国外呢,用的比较多的就是 Dispus 了。这其中小哈使用过的有多说和 Dispus。
先说说 Dispus, 由于服务器架设在国外,访问速度首先是个问题,第二个就是注册了,界面全英文,对一些小白想要快速集成评论功能的,也是相当不友好的;另外,Dispus 仅支持国外一些社交账号登录,如 Fackbook, Google, Twritter 等,我想你的个人博客一定还是国内用户访问多些,选它的话,需要思量一下了。
当然,追求逼格,当我没说,哈哈!
在来说说国内的多说、友言,集成很方便,由于在国内,访问速度也是棒棒哒。而它们支持国内各种社交账号登录,如 QQ,微博等。也正是因为留言的门槛低了,导致了一些素质较低的键盘侠随意登录评论,你可能花了很长时间写的一篇博文,他们评论两个字:傻X ! 就给你怼的怀疑人生!
所以小哈选择了 Gitalk, 它限制了只有 GitHub 用户才能登录评论,还世界一片清净,哈哈!
四、Gitalk 安装
Gitalk 安装有两种方式:
- 直接引入
<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>
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
- npm 安装
npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
五、为你的个站集成 Gitalk
首先,添加一个 div
容器:
<div id="gitalk-container"></div>
添加下面的 javascript 代码来生成 Gitalk 插件:
var gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // 请确保你的 location 连接小于 50 个字符,否则,插件会生成失败
distractionFreeMode: false // 专注模式
})
gitalk.render('gitalk-container')
看完上面这段 javascripte 代码,你肯定很疑惑,clientID、clientSecret 是个啥?
别急!你需要先申请 GitHub Application,没有的话,通过这个网址去申请:https://github.com/settings/applications/new, 跳转页面如下:
点击注册:
填写好 clientID
与 clientSecret
, 你还需要单独新建一个仓库,或者一个你已经创建好的仓库名称到 repo
项中。owner
和 admin
填写你的个人 ID 即可。
最终,下哈的填写的参数如下,小伙伴们根据自己个人情况填写自己的:
var gitalk = new Gitalk({
clientID: '6b60cd90107d766',
clientSecret: 'aaef1f960ce2a61393b8f173b672b',
repo: 'weiwosuoai.github.io',
owner: 'weiwosuoai',
admin: ['weiwosuoai'],
id: location.pathname,
distractionFreeMode: false
})
六、你可能会碰到的坑
6.1 未找到相关的issue评论,请联系xxx初始化创建
出现这总情况是因为博主未给文章评论初始化,博主只需要登录 GitHub 账户即可。如果你登录后,返回了首页,说明你的配置可能有问题,再检查一下 gitalk 个项参数是否正确。
6.2 Error: Not Found.
未能正确找到仓库 repo,检查一下你的仓库是否配置正确。
6.3 Error: Validation Failed.
发生这种情况,是因为 GitHub 对 Issue 的 label 存在限制,不能超过 50 个字符。
PS: label 标签就是文章页面的链接地址,如果地址过长,会导致加载 Gitalk 插件失败。
小哈的解决版本是,对 localtion.pathname 做了一个截取,只取 50 个字符:
// 截取字符串
var title = location.pathname.substr(0, 50);
var gitalk = new Gitalk({
clientID: '6b60cd9017d766',
clientSecret: 'aaef1f960ce2a6c0bec583e1e1393b8',
repo: 'weiwosuoai.github.io',
owner: 'weiwosuoai',
admin: ['weiwosuoai'],
id: title,
distractionFreeMode: false
})
还有另外一些解决方案,如 MD5 等。可参考链接:https://github.com/gitalk/gitalk/issues/102
七、最终效果
好了,到这里,坑基本上都踩完了,让我们来看看最终的效果咋样!
怎么样,还不错哟,赶快集成到你的个人博客当中去吧。
免费分享 | 面试&学习福利资源
最近在网上发现一个不错的 PDF 资源《Java 核心知识&面试.pdf》分享给大家,不光是面试,学习,你都值得拥有!!!
获取方式: 关注公众号: 小哈学Java, 后台回复资源,既可免费无套路获取资源链接,下面是目录以及部分截图:
重要的事情说两遍,关注公众号: 小哈学Java, 后台回复资源,既可免费无套路获取资源链接 !!!
如何通过Gitalk评论插件,5分钟为你的博客快速集成评论功能的更多相关文章
- Jekyll博客添加Valine评论
Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...
- python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- 5分钟搭建wordpress个人博客网站——宝塔傻瓜式部署,无坑系列,附赠主题和md插件[2021-12-31]
一.前言 自从买了服务器,小编已经马不停蹄的学了两天服务搭建的知识,问了很多大佬,快速搭建自己的博客网站.有四种方式,我在这里全部分享给大家.自己已经搭建好,欢迎大家过来看一下,给你提供个思路哈! 小 ...
- 讲解开源项目:5分钟搭建私人Java博客系统
本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行 Tale 项目.示例均在 Windows 操作系统下演示 本文作者:HelloGitHub-秦人 HelloGitHub 推出的< ...
- Disqus评论框改造工程-Jekyll等静态博客实现Disqus代理访问
文章最初发表于szhshp的第三边境研究所转载请注明 关于博客评论 六月多说挂了,地球人都知道. 倡言.云跟帖.来必力都很烂,地球人都知道. 转Disqus的都是人才. Disqus使用中遇到的问题 ...
- Hexo 博客快速整合gitalk组件,给静态博客添加动态评论功能!
什么是 hexo-plugin-gitalk
- 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...
- 震惊,hexo个人博客居然有这么方便的评论系统
论文搞得一头火,瞎倒腾了一下,没想到几分钟给自己的博客换了个评论系统. 之前用的gitalk,需要依赖github,死活没有成功,而且评论者还需要登录github才可以评论,不好用,刚才偶然间发现va ...
- 一步步搭建自己的博客 .NET版(2、评论功能)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- NYOJ 1067 Compress String(区间dp)
Compress String 时间限制:2000 ms | 内存限制:65535 KB 难度:3 描写叙述 One day,a beautiful girl ask LYH to help he ...
- 死去活来的OC NSArray 中文排序 及输出
目的 1.NSArray 能够支持中文排序 2.NSLog 能够直接输出 NSArray 内的中文(事实上 java 直接打印数组也不能显示内容哈) 又是死去活来的搞了1个小时,分类实现.废话少说,上 ...
- linux led子系统(二)
对于led子系统中,有那么多得trigger,下面就来简单了解下. 1.default-on static void defon_trig_activate(struct led_classdev * ...
- 基础才是重中之重~用好configSections让配置信息更规范
对于小型项目来说,配置信息可以通过appSettings进行配置,而如果配置信息太多,appSettings显得有些乱,而且在开发人员调用时,也不够友好,节点名称很容易写错,这时,我们有几种解决方案 ...
- MapReduce简述、工作流程及新旧API对照
什么是MapReduce? 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查而且数出有多少张是黑桃. MapReduce方法则是: 1. 给在座的全部玩家中分配这摞牌. 2. 让每一个玩家数自己手 ...
- 2016/05/27 php上传文件常见问题总结
php上传文件常见问题总结 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-02-03我要评论 这篇文章主要介绍了php上传文件常见问题总结,基本上经常碰到的问题的处理都列了 ...
- app上架的问题
1..p12证书文件(钥匙串导出)开发证书和描述文件的 2.app打包好重Xcode上传到iTunes中的时候最好做校验: 3.程序跑真机出现的问题 解决方法:debug 模式改成release模式 ...
- 更多的使用自定义元素(CustomElement)。
更多的使用自定义元素(CustomElement).
- 如何使用CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- 通俗易懂EJB
摘自:http://blog.csdn.net/jojo52013145/article/details/5783677 1. 我们不禁要问,什么是"服务集群"?什么是" ...