博客集成评论功能—Gitalk

一、什么是 Gitalk

Gitalk 的官方网站地址是: gitalk.github.io

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

扫码加微信前端二、三群（一群已满）：BAT大厂资深大牛定期推送面经与源码分析，各平台大牛优秀文章推荐，更有内推跳槽咨询、视频资源共享、学习资料文章pdf面经网盘资源等等福利。加入我们一起进步。

为了解决知乎活码识别问题，下方的二维码做了持久化处理。扫描二维码添加客服小柠即可加入我们。

群内分享每日一题：题目传送门

前端电子书大全：电子书

二、Gitalk 特性

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

三、为什么要使用 Gitalk

国内也有很多易于集成的评论插件，如多说、友言等。国外，用的比较多的是 Disqus 。
Disqus, 由于服务器架设在国外，访问速度首先是个问题，第二个就是注册比较麻烦，界面全英文，对一些小白想要快速集成评论功能的，也是相当不友好的；另外，Dispus 仅支持国外一些社交账号登录，如 Fackbook, Google, Twritter 等
阮一峰的es6集成的就是disqus，可以去看下风格

在来说说国内的多说、友言，集成很方便，由于在国内，访问速度也是棒棒哒。而它们支持国内各种社交账号登录，如 QQ，微博等。也正是因为留言的门槛低了，导致了一些素质较低的键盘侠随意登录评论…你懂得

笔者选择了 Gitalk, 它限制了只有 GitHub 用户才能登录评论！

四、Gitalk 安装

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' 

五、为你的个站集成 Gitalk

首先，添加一个 div 容器：

 <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,      // 请确保你的 location 连接小于 50 个字符，否则，插件会生成失败   
     distractionFreeMode: false // 专注模式 
})  

    gitalk.render('gitalk-container')

使用react的组件：

import GitalkComponent from 'gitalk/dist/gitalk-component'

<GitalkComponent
 options={{
 clientID: '223232323adawdawd',
 clientSecret: 'ddadawdadaddawdawdawdawdwadawd',
 repo: 'dailyProject',
 owner: 'Mrrabbitan',
 admin: ['Mrrabbitan'],
 id: location.pathname, // Ensure uniqueness and length less than 50
 distractionFreeMode: false, // Facebook-like distraction free mode
        }}
 ></GitalkComponent>

你需要先申请 GitHub Application，没有的话，通过这个网址去申请：github.com/settings/ap…,

页面如下：

点击注册：

填写好 clientID 与 clientSecret， 你还需要单独新建一个仓库，或者一个你已经创建好的仓库名称到 repo 项中。owner 和 admin 填写你的个人 ID 即可。

六、你可能会碰到的坑

6.1 未找到相关的issue评论，请联系xxx初始化创建

出现这总情况是因为博主未给文章评论初始化，博主只需要登录 GitHub 账户即可。如果你登录后，返回了首页，说明你的配置可能有问题，再检查一下 gitalk 个项参数是否正确。

6.2 Error: Not Found.

未能正确找到仓库 repo，检查一下你的仓库是否配置正确。

6.3 Error: Validation Failed.

发生这种情况，是因为 GitHub 对 Issue 的 label 存在限制，不能超过 50 个字符。

PS: label 标签就是文章页面的链接地址，如果地址过长，会导致加载 Gitalk 插件失败。

解决版本是，对 localtion.pathname 做了一个截取，只取 50 个字符：

 // 截取字符串 
var title = location.pathname.substr(0, 50); 
var gitalk = new Gitalk({     
clientID: '6b60cd9017d766',     
clientSecret: 'aaef1f960ce2a6c0bec583e1e1393b8',     
repo: 'weiwosuoai.github.io',     
owner: 'weiwosuoai',     
admin: ['weiwosuoai'],     
id: title,     
distractionFreeMode: false }) 

还有另外一些解决方案，如 MD5 等。可参考链接：github.com/gitalk/gita…

七、最终效果

好了，到这里，坑基本上都踩完了，让我们来看看最终的效果咋样！

预览地址：

国内 http://kufc0x.coding-pages.com/

国外 https://anzpnavy.github.io/