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

港控/mmm° 2021-09-29 10:12 566阅读 0赞

#### 使用GITALK的背景： ####

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

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

#### 使用方法： ####

1.首先需要到GitHub上去新建一个仓库用于存放评论的内容：  
![创建仓库][webp]  
　2.在设置中打开isue功能：  
![设置][webp 1]

默认是打开的  
![Issues][]  
3.需要注册一个Github Application具体步骤如下：  
![博客评论][webp 2]

#### 注意两个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。 [为什么要这样?][Link 1]
 *  **flipMoveOptions** `Object`
    
    Default:
    
        {
            staggerDelayBy: 150,
            appearAnimation: 'accordionVertical',
            enterAnimation: 'accordionVertical',
            leaveAnimation: 'accordionVertical',
          }
    
    评论列表的动画。 [参考][Link 2]
 *  **enableHotKey** `Boolean`
    
    Default: `true`.
    
    启用快捷键(cmd|ctrl + enter) 提交评论.

#### 注意：第一次进入时评论模块加载不出来，需要注册Github Application的账号登录评论模块后刷新页面，就可以正常使用了。 ####

#### 四，我博客的实例展示： ####

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

![效果][webp 3]

转载于:https://www.cnblogs.com/smfx1314/p/10976409.html

[webp]: /images/20210725/4d08ba85478a470296e1f7141f4762c8.png
[webp 1]: /images/20210725/3d5bf5a0ac0b4de18d0f63361f5bcee1.png
[Issues]: /images/20210725/68d8eb9df17e401cadd8e8b80f43563c.png
[webp 2]: /images/20210725/b34697cae3f6446fa14151414be306e2.png
[image.png]: /images/20210725/d877f4000ae743788220b209320d54ec.png
[Link 1]: https://github.com/isaacs/github/issues/330
[Link 2]: https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md
[webp 3]: /images/20210725/cda84638ebe1492d9b13a77a008897d0.png