超 Nice 的评论组件

超Ren专属
1,091 阅读5分钟

引言

最近在做一个基于 Java 的个人博客系统，现已基本完工，突然发现怎么没有评论这可如何是好，没有评论就如没有灵魂一样，可是如果再从头从数据库开始写的话，花费的代价有点大，于是我就在网上寻找一款适合我的博客的评论插件，第一次找到Disqus，可由于Disqus有墙的原因，迫使我放弃了，之后我又找到了“ 畅言云评 ”，结果很令人失望，因要使用畅言云评的话，网站必须要备案，因我的网站还么完工所以暂且不能使用，加上畅言云评有个不好的地方就是有广告。于是 Gitalk 就映入了我的眼帘。

Gitalk

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论组件。

它的界面更是干净整洁，还完美支持 MarkDown 语法。并且除了支持 Hexo 外，还支持 java，php 等语言开发的博客。简直是超 nice 的一款评论组件。

官方地址

[https://gitalk.github.io/](https://gitalk.github.io/)

官方演示效果

特性

  • 使用 github 帐户进行身份验证

  • 无服务器，所有评论将存储为github问题

  • 个人和组织github项目均可用于存储评论

  • 本地化，支持多种语言[en，zh-CN，zh-TW，es-ES，fr，ru，de]

  • 类似于Facebook的无干扰模式（可以通过distractionFreeMode选件启用）

  • 热键提交评论（cmd | ctrl + Enter）

安装

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'

如何使用

  • 首先，需要选择一个公共 github存储库（已存在或创建一个新的）用于存储评论。

    我这里来新创建一个仓库专门用于存放评论的内容。登陆 github 后，在右上角，头像或标识旁边 的 ➕，单击然后选择 “ New repository ”。

  • 进入创建仓库界面，填写仓库名称描述等，完成创建。

  • 创建完成后，点击 Settings 打开 Issues 功能，默认是打开的

  • 接下来仓库配置完成，我们需要 一个Github Application， 如果没有，请创建一个GitHub 应用程序，复制以下链接可直接注册一个新的应用程序。

    https://github.com/settings/applications/new

  • 复制链接🔗 打开创建应用程序页面，填写信息，两个 URL 就是你网站的域名。应用名称与描述可自起。 可参考下图

  • 应用程序创建成功后跳转到了以下页面，图中 Client ID 和 Client Secret是我们需要的东西

操作完上述步骤后，接下来你就会体验到 Gitalk 的方便之处

方式一

只需要将如下代码引入你想添加评论的 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>


/* 使用下面的 Javascript 代码生成 gitalk 插件 */
const gitalk = new Gitalk({
  clientID: 'd23ea291380e8a7f6d06', //GitHub Application Client ID

  clientSecret: 'd7547198d760dee16e15a37da11cd9f5dc00cbac', //GitHub Application Client Secret

  repo: 'myblogtalk', //仓库名称(GitHub repo)
  owner: 'AllanTian', //仓库拥有者(GitHub repo owner)
  admin: ['AllanTian'],
  id: location.href,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

方式二

在 React 中使用

导入 Gitalk

import GitalkComponent from "gitalk/dist/gitalk-component";

使用和以上类似的配置

<GitalkComponent options={{
  clientID: "...",
  // ...
  // options below
}} />

选件

还有一些其他设置，可选择设置

  • clientID String

    必填项。GitHub应用程序客户端ID。

  • clientSecret String

    必填项。GitHub应用程序客户端机密。

  • repo String

    必填项。GitHub存储库。

  • owner String

    必填项。GitHub存储库所有者。可以是个人用户或组织。

  • admin Array

    必填项。GitHub存储库所有者和协作者。（对此存储库具有写访问权的用户）

  • id String

    默认值：location.href。

    页面的唯一ID。长度必须小于50。

  • number Number

    默认值：-1。

    页面的问题ID，如果number未定义属性，则将使用查找问题的位置id。

  • labels Array

    默认值：['Gitalk']。

    GitHub问题标签。

  • title String

    默认值：document.title。

    GitHub问题标题。

  • body String

    默认值：location.href + header.meta[description]。

    GitHub问题正文。

  • language String

    默认值：navigator.language || navigator.userLanguage。

    本地化语言键en，zh-CN和zh-TW目前已经上市。

  • perPage Number

    默认值：10。

    分页大小，最大为100。

  • DistractionFreeMode Boolean

    默认值：false。

    类似于Facebook的无干扰模式。

  • pagerDirection String

    默认值：“last”

    注释排序方向，可用值为last和first。

  • createIssueManually Boolean

    默认值：false。

    默认情况下，当登录的用户属于用户时，Gitalk 自动为您的每个页面创建一个对应的github问题admin。您可以通过将此选项设置为手动创建它true。

  • proxy String

    默认值：cors-anywhere.herokuapp.com/https://git…

    GitHub oauth请求CORS的反向代理

  • flipMoveOptions Object

    默认:

  {
    staggerDelayBy: 150,
    appearAnimation: 'accordionVertical',
    enterAnimation: 'accordionVertical',
    leaveAnimation: 'accordionVertical',
  }

评论列表动画 ，可参考以下链接查看

github.com/joshwcomeau…

  • enableHotKey Boolean

    默认值：true。

    启用热键（cmd | ctrl + Enter）提交评论。

注意

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

效果

以下是我的博客实例展示，刚进来会模块加载，登录后即可使用。

总结

这么完美简单的评论组件，千万别犹豫，快快收了回去试试！让你的博客，拥有灵魂！别着急，还有更多的秘密和有趣的代码等着你来探索！

分享嗨起来，美德传起来，点个星标从此探索之路不迷茫！

微信扫描二维码，关注我的原创日更公众号，可以查看更多程序的秘密！

avatar
文章
阅读
粉丝