胖蒜网

VMay 13, 2019

Gitalk:一个基于 Github Issue 和 Preact 开发的评论插件

第三方评论插件已经死得差不多了,从一开始多说到后来的网易云跟帖,最后剩下了畅言。
最近畅言为了活下去,也推出了广告,让用户体验更差了,本来用户体验就不咋地。

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

特性

使用 GitHub 登录
支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
支持个人或组织
无干扰模式(设置 distractionFreeMode 为 true 开启)
快捷键提交评论 (cmd|ctrl + enter)

Readme 在线示例

安装

直接引入

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

使用

添加一个容器:

<div id="gitalk-container"></div>

用下面的 Javascript 代码来生成 gitalk 插件:

var gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

需要 GitHub Application,如果没有 点击这里申请,Authorization callback URL 填写当前使用插件页面的域名。
new OAuth application
然后就会生成clientID和clientSecret,在博客的引用插件下方填写配置。

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

相应地方要调整,接下来还有最后一步,创建repo,比如我上面的Application name是vfaxian_com,那么就创建一个名称为vfaxian_com的repo。
new repository
最后的效果如下,还是不错的。
效果

参考地址:
https://gitalk.github.io/
https://github.com/gitalk/gitalk#install

您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://pangsuan.com/p/Gitalk.html
966

发表评论

终身 · VIP会员全站通免费下载
1,终身会员全站任意主题、插件资源免费下载;
2,终身会员专属客服一对一服务;
3,终身会员与VIP会员不一样;
4,VIP会员有效期内购买有优惠;
5,普通会员登录后购买,账户将会关联订单;
6,未登录购买,也可以通过订单号查找到付费内容。