前言
因为本人最近在搭建一个本人的博客，须要有个评论性能，又不想本人建数据库，还想用第三方登录，认真斟酌一番后，决定应用 gitalk [0] ，用完之后是真香，所以来给大家安利一波~
大略长这样????
gitalk 特点
✅ GitHub 登录
✅ 无需数据库
✅ 无烦扰模式（设置 distractionFreeMode 为 true 开启）
✅ 反对多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
✅ 快捷键提交评论 （cmd|ctrl + enter）
✅ 反对集体或组织
装置
npm
# npmnpm i --save gitalk# 引入import 'gitalk/dist/gitalk.css'import Gitalk from 'gitalk'or
间接引入
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"><script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>应用
老严就间接用的 间接引入，先创立一个index.html文件
创立一个容器用于寄存 gitalk
<div id="gitalk-container"></div>new 一个 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 len distractionFreeMode: false // Facebook-like distraction})render 一下
gitalk.render('gitalk-container')看下咱们刚刚写完这些之后的成果，大抵就长这样了
创立评论仓库
咱们不必数据库是没错，然而咱们至多须要一个容器来寄存这个评论数据吧！gitalk 须要咱们创立一个用于寄存评论的空仓库，咱们就叫 gitalk-comments [2]
刚刚咱们曾经创立完了一个空仓库
创立 gitalk
咱们曾经做完了咱们的筹备工作。那么接下来，咱们就须要创立属于咱们本人的 gitalk 利用 [1]
！留神：这里的 Homepage URL 与 authorization callback URL 可填写本人的域名，因为老严采纳的是 gh-pages
点击注册之后，咱们会跳转到 具体配置页面
这外面的 clientID 是咱们之前配置中须要的 ID
咱们还须要创立这个 clientSecret 密钥 点击 Generate a new client secret 即可创立
重新配置
var gitalk = new Gitalk({ clientID: '8e2585b74fb088fa5c1b', // clientID clientSecret: '34d45f15101fe1c1746b0ce9455760a1f628d989', // clientSecret repo: 'gitalk-comments', // 评论仓库名 owner: 'crazymryan', admin: ['crazymryan'], // 治理人 id: location.pathname, // 返回以后 URL 的门路局部作为id language:'zh-CN', // 语言 distractionFreeMode: false // 无烦扰模式})批改完之后 ，老严间接提交到了 gh-pages ，如果你是本人的网站，间接上传这个 index.html 文件
成果
关上 https://crazymryan.github.io/gitalk-study/ 这个地址
点击 应用 GitHub 登录 进行绑定受权
受权胜利之后回到页面上
输出点货色评论一下吧！
此时咱们能够在之前创立的空仓库中的 issue 中看到咱们刚刚评论的内容了
全副代码
如果你想看看全副代码能够去 gitalk-study [3] 看看，如果你有趣味想看看老严的博客也能够拜访 blog [4]
这里也贴一下全部代码吧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script> <style> #gitalk-container { max-width: 600px; margin: 0 auto; } </style></head><body> <div id="gitalk-container"></div> <script> var gitalk = new Gitalk({ clientID: '8e2585b74fb088fa5c1b', //clientID clientSecret: '34d45f15101fe1c1746b0ce9455760a1f628d989', //clientSecret repo: 'gitalk-comments', // 评论仓库名 owner: 'crazymryan', admin: ['crazymryan'], //治理人 id: location.pathname, // 返回以后 URL 的门路局部作为id language:'zh-CN', //语言 distractionFreeMode: false // 无烦扰模式 }) gitalk.render('gitalk-container') </script></body></html>注解地址
[0] https://github.com/gitalk/git...
[1] https://github.com/settings/a...
[2] https://github.com/CrazyMrYan...
[3] https://github.com/CrazyMrYan...
[4] https://crazymryan.github.io/...