一款超好用的第三方评论插件--Gittalk

使用GITALK的背景：

1. 最近在做一个基于Java的个人博客系统，已经基本完工了，突然发现怎么没有评论的操作，如果再从头开始从数据库开始写的话，花费的代价有点大，于是乎我就在网上寻找一款适合我的第三方评论插件，第一次我找到了“畅言”，结果很令人失望，因为我的网站没有备案，所以无法使用“畅言”。于是Gitalk就映入了我的眼帘。

2. Gitalk 最初推出来，应该是想配合在 github 上建博客，方便添加评论功能的。随着其他评论插件的没落，Gitalk 就火起来了。Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。它除了支持 Hexo 外，还支持 java，php 等语言开发的博客。
详情请参考：官网
)
)

使用方法：

1.首先需要到GitHub上去新建一个仓库用于存放评论的内容：

创建仓库

　2.在设置中打开isue功能：

设置

默认是打开的

Issues

3.需要注册一个Github Application具体步骤如下：

博客评论

注意两个URL就是你网站的域名。应用名称随便写，描述随便写。

(2)完成之后便到了如下页面：

image.png

其中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的账号登录评论模块后刷新页面，就可以正常使用了。

四，我博客的实例展示：

随便点击一篇文章进入，底部就会出现评论模块：