超 Nice 的评论组件 —— Gitalk

最新推荐文章于 2024-09-05 16:38:26 发布

原创最新推荐文章于 2024-09-05 16:38:26 发布 · 2.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#github

Git 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于GithubIssue和Preact开发的评论组件Gitalk，它界面简洁，支持Markdown语法，适用于多种语言开发的博客系统。文章详细讲解了Gitalk的特性、安装方式及使用方法。

专属目录

超 Nice 的评论组件

超 Nice 的评论组件

引言

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

在这里插入图片描述

Gitalk

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

它的界面更是干净整洁，还完美支持 MarkDown 语法。并且除了支持 Hexo 外，还支持 java，php 等语言开发的博客。简直是超 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 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

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

效果

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

在这里插入图片描述

总结

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

在这里插入图片描述

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

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

在这里插入图片描述