一款超好用的第三方评论插件--Gittalk
使用GITALK的背景:
1. 最近在做一个基于Java的个人博客系统,已经基本完工了,突然发现怎么没有评论的操作,如果再从头开始从数据库开始写的话,花费的代价有点大,于是乎我就在网上寻找一款适合我的第三方评论插件,第一次我找到了“畅言”,结果很令人失望,因为我的网站没有备案,所以无法使用“畅言”。于是Gitalk就映入了我的眼帘。
2. Gitalk 最初推出来,应该是想配合在 github 上建博客,方便添加评论功能的。随着其他评论插件的没落,Gitalk 就火起来了。Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。它除了支持 Hexo 外,还支持 java,php 等语言开发的博客。
详情请参考:官网
使用方法:
1.首先需要到GitHub上去新建一个仓库用于存放评论的内容:
2.在设置中打开isue功能:
默认是打开的
3.需要注册一个Github Application具体步骤如下:
注意两个URL就是你网站的域名。应用名称随便写,描述随便写。
(2)完成之后便到了如下页面:
其中Client ID 和 Client Secret是我们需要的东西。
4.如上步骤完成之后,接下来你就会体验到Gitralk 的方便之处:
只需要将如下代码引入你想添加评论的 html 或者 jsp 页面中就可以使用了
<-- 引入 -->
<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>
<-- 添加一个容器-->
<div id="gitalk-container"></div>
<-- 生成 gitalk 插件-->
var gitalk = new Gitalk({
clientID: '56f73fbc5e79a466ea62', //Client ID
clientSecret: '26d8eb4f3b0de9ce02382103ffc32ba34c4671f4', //Client Secret
repo: 'blogtalk',//仓库名称
owner: 'smfx1314',//仓库拥有者
admin: ['smfx1314'],
id: location.href, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
设置
clientID
String
必须. GitHub Application Client ID.
clientSecret
String
必须. GitHub Application Client Secret.
repo
String
必须. GitHub repository.
owner
String
必须. GitHub repository 所有者,可以是个人或者组织。
admin
Array
必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
id
String
Default:
location.href
.页面的唯一标识。长度必须小于50。
number
Number
Default:
-1
.页面的 issue ID 标识,若未定义
number
属性则会使用id
进行定位。labels
Array
Default:
['Gitalk']
.GitHub issue 的标签。
title
String
Default:
document.title
.GitHub issue 的标题。
body
String
Default:
location.href + header.meta[description]
.GitHub issue 的内容。
language
String
Default:
navigator.language || navigator.userLanguage
.设置语言,支持 [en, zh-CN, zh-TW]。
perPage
Number
Default:
10
.每次加载的数据大小,最多 100。
distractionFreeMode
Boolean
Default: false。
类似Facebook评论框的全屏遮罩效果.
pagerDirection
String
Default: 'last'
评论排序方式,
last
为按评论创建时间倒叙,first
为按创建时间正序。createIssueManually
Boolean
Default:
false
.如果当前页面没有相应的 isssue 且登录的用户属于 admin,则会自动创建 issue。如果设置为
true
,则显示一个初始化页面,创建 issue 需要点击init
按钮。proxy
String
Default:
https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token
.GitHub oauth 请求到反向代理,为了支持 CORS。 为什么要这样?
flipMoveOptions
Object
Default:
{
staggerDelayBy: 150,
appearAnimation: 'accordionVertical',
enterAnimation: 'accordionVertical',
leaveAnimation: 'accordionVertical',
}
评论列表的动画。 参考
enableHotKey
Boolean
Default:
true
.启用快捷键(cmd|ctrl + enter) 提交评论.
注意:第一次进入时评论模块加载不出来,需要注册Github Application的账号登录评论模块后刷新页面,就可以正常使用了。
四,我博客的实例展示:
随便点击一篇文章进入,底部就会出现评论模块:
一款超好用的第三方评论插件--Gittalk的更多相关文章
- 一款超好用的第三方评论插件--Gitalk
一,使用Gitalk的背景: 1.最近在做一个基于Java的个人博客系统,已经基本完工了,突然发现怎么没有评论的操作,如果再从头开始从数据库开始写的话,花费的代价有点大,于是乎我就在网上寻找一款适合我 ...
- 四款超棒的jQuery数字化签名插件
在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! ...
- 一款超炫的jquery图片播放插件[Cloud Carousel]
今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...
- Orchard运用 - 整合Disqus评论插件
评论对于博客系统那是必须具备的一个功能,Orchard本身也默认实现了评论模块,你可以集成到其他内容,比如博客随笔,不过觉得有点寒碜,样式有点呆板.幸运的是,你可以简单集成第三方评论插件,比如Disq ...
- 几款很厉害的jQuery数字化签名插件(转)
在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! ...
- 【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑
目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB.由于网站会有文章发布,因此需要有评论功能.评论功能也可以自己开发,但由于现在社会化评论插件很多, ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
- 程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
- 你见过吗?9款超炫的复选框(Checkbox)效果
复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...
随机推荐
- fiddler手机抓包1
1.手机抓包配置教程:https://www.jianshu.com/p/724097741bdf 2.
- LaTeX 一些用法实例(并列图片、并列表格、算法代码示例、页眉太长、下划线,等)
横向并列两个图片 \begin{figure} \begin{minipage}{0.49\linewidth} \centering \includegraphics[width=6.5cm]{Si ...
- Python连接ORACLE操作
一.准备工作 1.安装cx_Oracle ttps://pypi.python.org/pypi下查找cx_Oracle并下载 执行安装命令 pip install cx_Oracle-6.0rc1- ...
- python学习-20 集合
集合set 1.由不同元素组成的集合,集合是一组无序排列的,集合中的元素必须是不可变的 -定义集合 第一种: jh = {1,2,3,4} print(type(jh),jh) 运行结果: <c ...
- Python 第一式
@Codewars Python练习 question ** Dashatize it ** Given a number, return a string with dash'-'marks bef ...
- matplotlib笔记2
颜色和样式 八种内建默认颜色缩写b:blue g:green r:red c:cyan m:magenta y:yellow k:black w:white其它颜色表示方法可以参照百度给的值https ...
- Composer安装yii2-imagine 压缩,剪切,旋转,水印
安装:composer require --prefer-dist yiisoft/yii2-imagine 查看是否安装成功, 安装了两个目录分别是 vendor/imagine vendor/yi ...
- Hibernate的入门Curd用法
今天分享的是hibernate关系映射框架的入门用法 一:Hibernate简介 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建 ...
- javaSE面试题总结
目 录 第一章 初识Java 1 1. Java跨平台原理(字节码文件.虚拟机) 1 2. Java的安全性 1 3. Java三大版本 2 4. Java开发运行过程 2 5. Java开发环境 ...
- win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总
win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总 2019-09-20 15:06:03 wyx100 阅读数 38更多 分类专栏: M ...