博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
为hexo博客添加基于gitment评论功能
阅读量:6204 次
发布时间:2019-06-21

本文共 2487 字,大约阅读时间需要 8 分钟。

关于gitment

gitment其实就是利用你的代码仓库的Issues,来实现评论。每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论。如果你是用github的博客的话 用起来将会十分的方便。

注册github应用

首先需要在这注册一个OAuth Application, 。在注册的过程中,你需要输入以下的东西:

Application name 随意就好
Homepage URL 你的博客地址,例如https://detectivehlh.github.io/
Application description 随意就好
Authorization callback URL 也是博客地址,例如https://detectivehlh.github.io/
输入完成之后,点击注册就OK了。成功之后就会拿到Client IDClient Secret,然后先进行一下步,暂时还不会用到这个。

修改主题配置文件

下一步就是要修改你的博客所使用的主题的配置文件。定位到# Comments,添加如下代码。

gitment:  enable: true  mint: true  count: true  lazy: false  cleanly: false  language:  github_user: detectiveHLH  github_repo: detectiveHLH.github.io  client_id: xxx  client_secret: xxx  proxy_gateway:  redirect_protocol:复制代码

将上面代码的github_user和github_repo改成你自己的就可以了。

为gitment添加样式和layout

打开你所使用的主题的目录。打开layout/_partial/comments.ejs,在原文件后加入如下代码。

<% if(theme.gitment.enable) { %>
<% } %>复制代码

将上面代码中的owner、repo、oauth中的信息换成你自己的就可以了,client_id和client_secret 就是第一步申请github应用得到的。我查了网上很多教程,都是需要点击按钮才能显示评论,我 做了一点改动,引用之后可以直接的显示评论。然后打开source/css/_partial/_gitment.styl,如果没有就新建文件。添加如下代码。

.gitment_title:hover {  color: #fff;  background: #0a9caf;  background-image: initial;  background-position-x: initial;  background-position-y: initial;  background-size: initial;  background-repeat-x: initial;  background-repeat-y: initial;  background-attachment: initial;  background-origin: initial;  background-clip: initial;  background-color: rgb(10, 156, 175);}.gitment_title {  border: 1px solid #0a9caf;  border-top-color: rgb(10, 156, 175);  border-top-style: solid;  border-top-width: 1px;  border-right-color: rgb(10, 156, 175);  border-right-style: solid;  border-right-width: 1px;  border-bottom-color: rgb(10, 156, 175);  border-bottom-style: solid;  border-bottom-width: 1px;  border-left-color: rgb(10, 156, 175);  border-left-style: solid;  border-left-width: 1px;  border-image-source: initial;  border-image-slice: initial;  border-image-width: initial;  border-image-outset: initial;  border-image-repeat: initial;  border-radius: 4px;  border-top-left-radius: 4px;  border-top-right-radius: 4px;  border-bottom-right-radius: 4px;  border-bottom-left-radius: 4px;}.gitment_title {  display: inline-block;  padding: 0 15px;  padding-top: 0px;  padding-right: 15px;  padding-bottom: 0px;  padding-left: 15px;  color: #0a9caf;  cursor: pointer;  font-size: 14px;}复制代码

然后打开source/css/style.styl,在原有文件后面添加如下代码,引入gitment相关的样式。

@import "partial/_gitment.styl"复制代码

结束

到此为止,更新你的博客。就可以看到评论了。

个人博客传送门

github传送门

转载地址:http://drhca.baihongyu.com/

你可能感兴趣的文章
还在用PS磨皮去皱?看看如何用神经网络高度还原你的年轻容貌!
查看>>
大端模式与小端模式、网络字节顺序与主机字节顺序
查看>>
微信支付申请90%的商户都卡在这儿了,申请微信支付,商户功能设置详细说明...
查看>>
高仿Instagram 页面效果android特效
查看>>
我的友情链接
查看>>
Juniper 基于路由的×××
查看>>
HDU - 2018 - 母牛的故事(dp)
查看>>
如何查找JSP页面中的错误
查看>>
2016 年总结
查看>>
将String转化成Stream,将Stream转换成String
查看>>
java路径Java开发中获得非Web项目的当前项目路径
查看>>
Google API设计指南-资源名称
查看>>
最全React技术栈技术资料汇总(收藏)
查看>>
【工具使用系列】关于 MATLAB 遗传算法与直接搜索工具箱,你需要知道的事
查看>>
Kali-linux Arpspoof工具
查看>>
PDF文档页面如何重新排版?
查看>>
基于http协议使用protobuf进行前后端交互
查看>>
UML设计一个电影票务销售系统(四)
查看>>
如何给VEEAM 7 分配角色权限
查看>>
AlphaGo Zero用它来调参?【高斯过程】到底有何过人之处?
查看>>