Gitment评论功能接入踩坑教程

2018-02-25

1、前言

之前接入的评论功能，都因为各种原因被放弃了，今天从新计划接入评论功能，所以就有了今天这篇文章。

2、评论模块简介

多说 - 最多用户使用的评论，但遗憾2017年6月将暂定服务；不建议新用户使用，但为旧用户保留，也感谢多说一路的陪伴；
网易云跟帖 - 网易提供的评论组件，功能比较简单，性能优秀；管理后台在查询上还不算特别智能，但足够普通用户使用；
畅言 - 搜狐提供的评论组件，功能丰富，体验优异；但必须进行域名备案。只要域名备过案就可以通过审核，简单问题复杂化。
Disqus - 国外使用较多的评论组件。万里长城永不倒，一枝红杏出墙来，你懂的。

以上评论模块应该大家都知道，多说和网易云跟帖没有了，畅言要备案，对于只是挂靠在GitHub的博客非常的不友好，放弃！Disqus，我们都希望自己的博客可以不分国界！所以Disqus也只能放弃！

综上所述，将是我们要重点介绍的Gitment ！！！

3、Gitment评论模块

Gitment is a comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation.

Gitment 基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

想了解具体示例，可以点击查看官方Demo Page：Gitment Demo

具体的接入我就不在这里说了，本文末有参考链接大家可以去了解学习，主要是说一下其中的坑点。

4、Gitment坑点小结

4.1、owner: ‘Your GitHub ID’

owner: '你的 GitHub ID',
可以是你的GitHub用户名，也可以是github id，建议直接用GitHub用户名就可以。

4.2、repo: ‘The repo to store comments

repo: '存储评论的 github repo'
这个是你要存储评论内容的仓库名，可以与博客下的仓库，也可以新建一个仓库专门存储评论内容的。

4.3、Error: Not Found问题

owner或者repo配置错误了，注意名字和仓库名字的大小写。

4.4、Error: Comments Not Initialized

在注册OAuth Application这个步骤中，给Authorization callback URL指定的地址错了
还没有在该页面的Gitment评论区登陆GitHub账号

如果还是不行，可以参考另一个情况 Error: Comments Not Initialized · Issue #95 · imsun/gitment

4.5、Error：validation failed

issue的标签label有长度限制！labels的最大长度限制是50个字符。

id: '页面 ID', // 可选。默认为 location.href

这个id的作用，就是针对一个文章有唯一的标识来判断这篇本章。

在issues里面，可以发现是根据网页标题来新建issues的，然后每个issues有两个labels（标签），一个是gitment，另一个就是id。

所以明白了原理后，就是因为id太长，导致初始化失败，现在就是要让id保证在50个字符内。

对应配置的id为：

1	id: '<%= page.title %>'

如果用网页标题也不能保证在50个字符！

最后，我用文章的时间，这样长度是保证在50个字符内，完美解决！

1	id: '<%= page.date %>'

注意事项：

用文章时间，避免了文章每次更新标题或路径时，会重新创建一个issue评论的问题，也解决了label长度问题。
关于Gitment的id在那里修改的问题，大家需要根据自己使用的主题，找到id配置的位置进行修改。（ps 可以在主题的github仓库中搜索gitment来定位）

4.6、gitment的汉化

只需到模板里将原来定义CSS和JS的那两行改成：

1 2	<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css"> <script src="https://billts.site/js/gitment.js"></script>

即可。来源：https://github.com/imsun/gitment/issues/104

4.7、所有文章一键初始化评论

配置正确的文章，第一次显示，提示还没有初始化：
![0225-Error Comments Not Initialized.png](https://github.com/iHTCboy/iGallery/raw/master/BlogImages/2018/02/0225-Error Comments Not Initialized.png)

文章作者需要登陆GitHub授权后，会显示初始化按钮(注意，不要多点按钮，否则issues出现多条一样的)：
![0225-Initialize Comments.png](https://github.com/iHTCboy/iGallery/raw/master/BlogImages/2018/02/0225-Initialize Comments.png)

点击初始化按钮后，如果正常就会出现：
![0225-No Comment Yet.png](https://github.com/iHTCboy/iGallery/raw/master/BlogImages/2018/02/0225-No Comment Yet.png)

关于自动初始化所有文章的功能，到本文编写时，还没有一个完善的解决方法，就是用脚本来执行自动化，有需要的可以详细了解：https://github.com/imsun/gitment/issues/5

4.8、请保持克制，切勿滥用。

作者提醒使用本项目的用户，请保持克制，切勿滥用。详见 Gitment：使用 GitHub Issues 搭建评论系统

4.9、订阅issue

issue订阅，有新评论时就可以通过邮件提醒，这个功能是把双刃剑，因为有些垃圾订阅邮件骚扰，大家看着用吧。

5、总结

Gitment目前来说，已经解决了一个博客简单的评论功能，点赞 / 有完整的 Markdown / GFM 和代码高亮支持!

通过Gitment至少可以证明一点，生产力的发展有无限可能，环境的限制，会有的各种奇异的想法，或者奇异的东西出现，Gitment就是一个完美的证明，充分解决了一个简单博客的评论功能。另一方面，与国内的生活要求，希望大家能够遵守规则，让GitHub和Gitment在我们生活中快乐成长！

2018.10.07 更新

gitment功能全部都报[object ProgressEvent] 错误

解决方法：

把 https://imsun.github.io/gitment/dist/gitment.browser.js 内这个 https://gh-oauth.imsun.net 验证api换成 https://auth.baixiaotu.cc

例如主题 yilia改为：

打开主题目录：themes/yilia/layout/_partial/post/gitment.ejs
将<script src="//imsun.github.io/gitment/dist/gitment.browser.js"></script> 改为 <script src="//ihtcboy.com/script/gitment.browser.js"></script> 就可以啦

原因参考这里: https://github.com/imsun/gitment/issues/170

6、参考引用

> 注：本文首发于 [iHTCboy's blog](http://iHTCboy.com)，如若转载，请注来源

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true