Hexo自建博客之接入评论系统

今晚下班，不用回家带娃娃，赶紧抽时间码下hexo的评论接入，话说期间遇到的坑也不少，典型的几个问题下边会重点提一下，话不多说，直接码。。

一、评论系统选型

多说——>2017年已经关闭了服务
畅言——>应该是响应国家言论自由的方针，需要备案，没错需要备案，你没看错
友言——>无奈也已经关闭了
gitment–> 是由基于github issues的系统评论，需要有github账号，考虑到看技术博客的同行，应该都有github吧.
Hypercomments—->大体喵了几眼，看着比较麻烦，没有深入去了解
综上，我选择了gitment，对我来说已经足够可用了，点赞，评论都支持的。

二、gitment简介

基于github issues，实际上是为每一篇博客文章都关联一个issue，所有相关的评论都是对这个issue的评论。
每写好一篇博客文章，都需要进行初始化
需要有github账号，考虑到受众，其实还是可以接收的。
接入工作量小
界面清爽，不是华而不实的那种

三、接入流程

1.创建repo用于存储评论

获取repo地址：git@github.com:xxx/xxx.git

2.授权 OAuth Application

注册成功后，你会得到 clientId、Client Secret接下来会使用到

3.配置MIHO相关gitment

gitment:
owner: Sunltyy #你的 GitHub ID
repo: 'my-blog-comments' #存储评论的 repo
client_id: '第2步获取到的clientId' #client ID
client_secret: '第2步获取到的secret' #client secret

4.发布

`1`	`hexo g -d`

5.登录初始化评论

需要登录你第一步创建的repo的owner用户,然后点击Initialize Comments即可

7.收工

遇到的坑点

gitment评论接入虽然不麻烦，但是还是遇到了不少坑点，几个比较影响效率的地方整理，发给后来人。

登录后Object ProgressEvent

登录后，跳出这个报错，实际上gitment的作者已经停掉了自己的服务器，可以找到gitemnt.ejs里的

找到 gitment.ejs里的这段引用。
<link rel="stylesheet" href="//imsun.github.io/gitment/style/default.css">
<script src="//imsun.github.io/gitment/dist/gitment.browser.js"></script>
替换为：
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://jjeejj.github.io/js/gitment.js"></script>

亲测试可用，如果你想自己搭建，可以这里https://github.com/imsun/gitment/issues/170

初始化评论Invalid Error

gitment创建github issue的时候，标签长度不能大于50个字符。但查看browser.js，我们可以看到lable是如何取值的

因此，我们需要初始化id，不能使用默认的当前页面的url，修改gitment.ejs,添加id初始化为当前页的标题即可

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

<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://jjeejj.github.io/js/gitment.js"></script>
<div id="comments">
<script>
var gitment = new Gitment({
id :'<%=page.title%>',
owner: 'Sunltyy',
repo: 'my-blog-comments',
oauth: {
client_id: '你申请的Id',
client_secret: '你申请的密钥',
},
})
gitment.render('comments')
</script>
</div>

希望，这篇文章能帮助到你【- -】

Hexo自建博客之接入评论系统相关推荐

如何给自己的博客网站加入评论系统
前言在这一篇博文中,咱们介绍了如何快速的搭建个人的博客网站,但是这个博客网站是基于Github Pages的纯静态网站,自身是不带任何的可交互的元素的,自然也就没有评论系统.但是,对于一个好的博客网 ...
2019年末，来一发基于Hexo自建博客生态指南！
必读前言本文篇幅较长,涉及的面较广,通篇阅读大概需要半个小时左右.建议时间紧迫的大佬们可以先收藏文章,之后闲时再细细阅读,个人预览DEMO,有关文中具体涉及到的工具大家可以关注公众号<云爬虫技 ...
Gitment给基于hexo的yilia主题的博客搭建免费评论系统
我的拔牙经历我的博客用的是搜狐的畅言,功能确实非常强大,但是很多功能我用不上,也不会用,有两个问题:1)评论需要登录,有门槛:2)页面底部有广告.严重影响视觉体验. 点击站长去广告吧,跳到了付费页面 ...
为 Hexo 博客添加 valine 评论系统
注册 LeanCloud 由于 valine 评论系统是放在 LeanCloud 上的,因此需要先打开 https://www.leancloud.cn/ 网址注册一个 LeanCloud 账号. 注 ...
个人博客多说评论系统的使用
多说使用转载于:https://www.cnblogs.com/hjy9420/p/4956156.html
Django开发个人博客网站——16、给博客添加上评论功能
博客中的评论系统其实是个很复杂的东西,但是网上已经有现成的轮子了,比如django-contrib-comments,可以直接拿过来用.但是我这里博客主要是给自己看的,并不想有太复杂的互动内容,因此, ...
使用Hexo搭建个人博客-保姆级教程
使用Hexo搭建个人博客-保姆级教材首先我们看一下最终效果,按照以下步骤最后就可以完成和我一样的博客 https://chen-mingxuan.gitee.io/blog-test/ PS:CSD ...
Hexo 搭建个人博客基础配置及实操
初步搭建本地Hexo博客安装安装前提搭建环境:Windows 10 Node.js (Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本) Git 验证成功安 ...
Linux下使用 github+hexo 搭建个人博客01-hexo搭建
为什么要搭建自己的博客系统? 原因有好几个吧,归类如下: 1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第 ...