在 hexo 博客结束更新之前使用的是来必力，感觉还行，但总归不踏实。后面发现有 gitment，用 github 的 issue 作为评论载体，感觉靠谱许多。但是他的 UI 感觉太 low 了，后来发现https://github.com/gitalk/gitalk 这个和 gitment 有异曲同工之妙的这个插件。接下来我将为大家介绍一下这个插件

原理

　　Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件，在 Gitalk 之前还有一个gitment 插件也是基于这个原理开发的,不过 gitment 已经很久没人维护了。详情 Demo 可见：https://gitalk.github.io/

　　gittalk 评论

　　issue 详情

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

 集成 Gitalk

注册 Application

　　在 GitHub 上注册新应用，链接为：https://github.com/settings/applications/new

　　注册

1
2
3
4
5

参数说明：
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如 https://gclm.github.io
Application description # 描述，随意
Authorization callback URL：# 网站URL，https://gclm.github.io 如果你打算使用自定义域名，这个填写自己的域名

　　点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

　　应用详情

配置 gitalk

1. 新建 ~/blog/theme/next/layout/_third-party/comments/gitalk.swig文件，并添加内容：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   {% if page.comments && theme.gitalk.enable %} <link rel="stylesheet" href="/lib/gitalk/gitalk.css"> <script src="/lib/gitalk/gitalk.min.js"></script> <script src="/lib/gitalk/md5.js"></script> <script type="text/javascript"> const gitalk = new Gitalk({ clientID: '{{ theme.gitalk.ClientID }}', clientSecret: '{{ theme.gitalk.ClientSecret }}', repo: '{{ theme.gitalk.repo }}', owner: '{{ theme.gitalk.githubID }}', admin: ['{{ theme.gitalk.adminUser }}'], id: md5(window.location.pathname), distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}' }) gitalk.render('gitalk-container') </script> {% endif %}

2. 修改/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

   1 2	{% elseif theme.gitalk.enable %} <div id="gitalk-container"></div>

3. 修改layout/_third-party/comments/index.swig，在最后一行添加内容：

   1	{% include 'gitalk.swig' %}

4. 新建/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

   1 2 3 4

   .gt-header a, .gt-comments a, .gt-popup a border-bottom: none; .gt-container .gt-popup .gt-action.is--active:before top: 0.7em;

5. 修改/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

   1	@import "gitalk";

6. 在主题配置文件next/_config.yml中添加如下内容:

   1 2 3 4 5 6 7 8

   gitalk: enable: true githubID: GitHub账号 # 例： gclm repo: 仓库名称 # 例：gclm.github.io ClientID: ClientID ClientSecret: ClientSecret adminUser: GitHub账号 [[指定可初始化评论账户]] distractionFreeMode: true

7. 在next/source/lib下新建 gitalk 文件夹,里面放置 gitalk.css 和 gitalk.min.js 文件

   1 2	/lib/gitalk/gitalk.css /lib/gitalk/gitalk.min.js

效果显示

Gitalk 常见问题总结

• 页面提示 ERROR NOT FOUND

  解决： 可能是仓库未创建或者仓库名填写错误。

• 每篇文章都需要初始化

  解决： next 主题版本过低，建议更新到 5.1.1 及以上版本.

• 在上面说到的路径找不到对应文件时，建议使用 find 命令查找，因为 next 主题的目录结构可能会变化。

• 在本地查看时，建议打开浏览器的调试模式，可以查看控制台是否有错

• 提示 Error: Cannot read property ‘avatarUrl’ of null

  解决：因为评论中的 github 用户已经被注销了，需要到你的评论仓库删除该用户的评论。 ：