超详细gitalk无后端评论系统无缝接入教程

  • By 之参

  • 2022-06-30 15:06:04

  • 评论

一开始找的是Gitment结果好了写了一堆并没有什么用,还是停止使用Gitment吧

因为Gitment, 搭建好后无法登录,看评论要修改js,但是修改了还是一样无法使用!

 https://github.com/imsun/gitment/issues/188  


最后还是通过 gitalk 项目来做成评论的,使用方法类似Gitment

 https://github.com/gitalk/gitalk/blob/master/readme-cn.md 


安装

两种方式

  • 直接引入
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>


注册github OAuth 应用程序

注册地址: https://github.com/settings/applications/new 



使用

添加一个容器:

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

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


var gitalk = new Gitalk({
  clientID: 'OAuth 应用程序客户端id',
  clientSecret: 'OAuth 应用程序客户端密钥',
  repo: 'github存储仓库',
  owner: '存储仓库所有者',
  admin: ['所有者和合作者,只有这些人才能初始化文章评论'],
  id: location.pathname,      // 文章id,确保唯一性,长度小于50,注意是字符串
  distractionFreeMode: false  // 是否开启无干扰模式
})
gitalk.render('gitalk-container')

问题

1、GitHub 账号 Id 怎么获取

打开: https://api.github.com/users/你的github用户名


2、client ID 和 client secret 怎么获取

注册github OAuth 应用程序后获取,secret 需要生成一下



之参博客