超 Nice 的评论组件 —— Gitalk

超 Nice 的评论组件

引言

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

在这里插入图片描述

Gitalk

Gitalk 是一个基于 Github IssuePreact 开发的评论组件

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

官方地址

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 IDClient 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

    默认值:https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token。

    GitHub oauth请求CORS的反向代理

  • flipMoveOptions Object

    默认:

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

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

https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md
  • enableHotKey Boolean

    默认值:true。

    启用热键(cmd | ctrl + Enter)提交评论。

注意

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

效果

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

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

在这里插入图片描述

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

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

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

超Ren专属

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值