BYQiu 2017.12.19 18:09

前言

由于 Disqus 对于国内网路的支持十分糟糕，很多人反映 Disqus 评论插件一直加载不出来。而我一直是处于翻墙状态的~（话说你们做程序员的都不翻墙用Google的吗😅，哈哈，吐嘈下）

针对这个问题，我添加了Gitalk 评论插件。在此，非常感谢 @FeDemo 的推荐 。

正文

Gitalk 评论插件 首先来看看 Gitalk 的界面和功能

gitalk 使用 Github 帐号登录，界面干净整洁，最喜欢的一点是支持 MarkDown语法。

原理

Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件，在 Gitalk 之前还有一个 gitment 插件也是基于这个原理开发的,不过 gitment 已经很久没人维护了。

可以看到在 gitalk 的评论框进行评论时，其实就是在对应的 issue 上提问题。

集成 Gitalk

到这里，你应该对 Gitalk 有个大致的了解了，现在，开始集成 gitalk 插件吧。

将这段代码插入到你的网站：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- Gitalk 评论 start  -->

<!-- Link Gitalk 的支持文件  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
    <script type="text/javascript">
    var gitalk = new Gitalk({

    // gitalk的主要参数
        clientID: `Github Application clientID`,
        clientSecret: `Github Application clientSecret`,
        repo: `存储你评论 issue 的 Github 仓库名`,
        owner: 'Github 用户名',
        admin: ['Github 用户名'],
        id: '页面的唯一标识，gitalk会根据这个标识自动创建的issue的标签',
    
    });
    gitalk.render('gitalk-container');
</script>

<!-- Gitalk end -->

我们需要关心的就是配置下面几个参数：

1
2
3
4
5
6

clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名）
owner: 'Github 用户名',
admin: ['Github 用户名'], //这个仓库的管理员，可以有多个，用数组表示，一般写自己,
id: 'window.location.pathname', //页面的唯一标识，gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识

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

比如我就增加了这个全屏遮罩的参数。

1

distractionFreeMode: true,

创建 Github Application

Gitalk 需要一个Github Application，点击这里申请。

// TODO 添加图片

获取 Client ID 和 Client Secret 填入你的我们 Gitalk 参数中

当你参数都设置好，将代码推送到 Github 仓库后，没什么问题的话，当你点击进入你的博客页面后就会出现评论框了。

当你用 github 帐号登录（管理员），并且第一次加载该会比较慢，因为第一次加载会自动在你 repo 的仓库下创建对应 issue。

比如说这样：

当然，你也可以手动创建issue作为 gitalk评论容器。只要有 Gitalk 标签 和 id 对应标签就可以。比我我自己创建的 About issue 。

注意事项

id的设置

这个id是用来唯一区分页面的，也就是你不同的文章肯定有不同的评论数据，Gitalk要通过这个id来区分是哪个页面，然后在你的github仓库创建相应的issue来存放当页评论数据，id默认值是window.location.pathname

但是默认的只适用于采用history模式的路由，但对于vue-router这种默认采用hash模式的就不行了。

举个例子

//在history模式下，路由URL如下格式 www.rychou.xyz/article/69

window.location.pathname;// 值是 /article/69

//在hash模式下，路由变成这样了 www.rychou.xyz/#/article/69

window.location.pathname; // 值是 / 此时，在hash模式下id就不具有唯一性了。

建议使用window.location.hash，此时的值是#/aticle/69,具有唯一性。

当然你也可以设置vue-router为history模式，但是这会有一个刷新页面出现404的BUG，解决办法参考官方文档

参考文献