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

Posted 2021-12-20 smfx1314

使用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/[email protected]/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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的账号登录评论模块后刷新页面，就可以正常使用了。

四，我博客的实例展示：

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