为网站添加gitalk评论模块

由于 Disqus 对于国内网路的支持十分糟糕，所以我选择了 Gitalk

首先来看看 Gitalk 的界面：

Gitalk原理

Gitalk 是一个利用 GitHub API，基于 Github issue 和 Preact 开发的评论插件。在 Gitalk 的评论框进行评论时，其实就是在 GitHub 仓库对应的 issue 上提问题。

必要的准备

使用 Gitalk 前，需要去 GitHub 注册一个 Github OAuth application：

填写参数：

点击 Register application 注册，成功后，记录下你的 Client ID 和 Client Secret：

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

使用

1、在适合的位置添加一个容器：

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

2、用下面的 Javascript 代码来生成 Gitalk 插件：

<script>
    var gitalk = new Gitalk({
      clientID: '',	
      clientSecret: '',	
      repo: '',	
      owner: '',	
      admin: [''],	
      id: location.pathname,	
      distractionFreeMode: false})

    gitalk.render('gitalk-container')
</script>

3、配置参数（必选）

• Client ID（你的 GitHub Client ID）
• ClientSecret（你的 GitHub ClientSecret）
• repo（存储评论的 GitHub 仓库名）
• owner（你的 GitHub 用户名）
• admin（你的 GitHub 用户名）

4、其他配置参数（可选）

• id（默认就行，不用修改）
• distractionFreeMode（评论框的全屏遮罩效果，不用修改，Default：false）
• perPage（每次加载评论的条数，最多100，Default：10）
• flipMoveOptions（评论列表的动画，参考）
• pagerDirection（评论排序方式，last为按评论创建时间倒叙，first为按创建时间正序）

当然，还有其他很多参数，有兴趣的话可以点这里

End

配置好参数，快去你的网站添加评论吧。