[JavaScript] 给静态博客添加 Gitalk 评论插件

做为一个静态博客， Jekyll 并无自带评论系统，可是有了评论模块可让你们更方便地交流意见，灌灌水之类的，因此我也一直想尝试为本身的博客添加评论插件。

一开始查找评论插件时，发现你们主要在用的是 Disqus ，可是 Disqus 如今在国内没法使用了，不少状况下它都没法正常加载。而原本能够用的多说在 2017 年中止了服务。后来我发现了 Gitment ，可是它也好久没有维护了。最终我找到了一个叫 Gitalk 的评论插件。它的原理和 Gitment 相似，它经过在 GitHub 仓库中的 issues 中添加回答来实现评论的功能。这是它的仓库连接：Gitalk on Github

1. 在前端页面中引入 Gitalk

在使用以前，先要在页面的适当位置插入一个 Gitalk 的 div 容器：

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

在页面文件最前面能够经过连接添加 Gitalk 的 css 文件与 js 支持：

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

若是出现 gitalk 的 css 文件将原来的 markdown 样式覆盖的状况，能够将 css 文件下载到本地，并删去 markdown 的样式，以后引用本地的 css 文件就能够解决问题。

2. 添加 Javascrpt 块

咱们能够经过引用 js 文件或者直接添加 script 标签来设置 Gitalk ，这里我使用直接添加 script 标签的方式：

<script>
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')
</script>

咱们首先须要填写的是 repo ， owner ， admin 这三个参数：

• repo 仓库名称

• owner 仓库全部者

• admin 能够建立 Github issues 的管理者

可是其中， id 这一个也须要咱们修改，由于 id 的默认值为路径，而它不能超过50个字符，否则会出现 Error: Validation Failed. 这个错误。在 Jekyll 的框架下，咱们能够将这个值改成 '{{ page.title }}' ，这样通常来讲就不会超过长度了。

Gitalk 对象还有许多参数，其中较为经常使用的还有如下两个：

• createIssueManually 若是为 true ，则在不存在当前页面的 issue 的状况下能够由管理员手动建立，推荐打开，默认为 false

• title 设置 issue 的标题，若是使用 Jekyll 推荐改成 '{{ page.title }}' ，否则默认为网页标题（可能会很长）

其余的参数能够参考 Gitalk 的文档。

3. 建立一个 GitHub Application

在 Javascript 代码中，还有 clientID 和 clientSecret 这两个属性没有填写。它们就和 GitHub Application 有关了。

首先咱们须要注册一个GitHub Application：

Register a new OAuth application

其中的 Application name 能够随便填， Homepage URL 和 Authorization callback URL 须要填写你博客网页的网址。

生成一个 GitHub Application 以后，网页会显示一个 clientID 和一个 clientSecret ，将其复制到代码中。其中这两个参数只会显示一次，因此必定记得填写完以后要保存代码。

4. 链接你的 GitHub 帐号并新建 issue

以上咱们就完成了代码内容，如今咱们生成静态页面，打开一篇文章，应该就能够在相应的区域看到 Gitalk 的插件了。第一次使用时，咱们须要“初始化issue”，这个时候你须要用你的 Github 帐号登录，而后点击一下初始化按钮（不要点不少次，否则会新建多个issue），等进度完成后，刷新页面，你应该就可以看到评论模块了。

目前来讲咱们只能经过手动添加来给每篇文章建立一个评论，以后能够写一个脚原本完成自动初始化，可是稍有些复杂，因此若是想要了解能够自行搜索。

结语与其余文档

以上就完成了 Gitalk 插件的安装了，这样也能给博客增长些活跃的气氛。不过但愿以后可以出现更加方便的评论插件。（ Gitalk 须要登录 GitHub 才能评论）若是你们有更好的插件也能够留言分享。