为hexo博客添加基于gitment评论功能

关于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: truemint: truecount: truelazy: falsecleanly: falselanguage:github_user: detectiveHLHgithub_repo: detectiveHLH.github.ioclient_id: xxxclient_secret: xxxproxy_gateway:redirect_protocol:

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

为gitment添加样式和layout

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

<% if(theme.gitment.enable) { %>
<div id="gitment_title" class="gitment_title"></div>
<div id="container" style="display:none"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>const myTheme = {render(state, instance) {const container = document.createElement('div');container.lang = "en-US";container.className = 'gitment-container gitment-root-container';container.appendChild(instance.renderHeader(state, instance));container.appendChild(instance.renderEditor(state, instance));container.appendChild(instance.renderComments(state, instance));container.appendChild(instance.renderFooter(state, instance));return container;}}function showGitment() {$("#gitment_title").attr("style", "display:none");$("#container").attr("style", "").addClass("gitment_container");var gitment = new Gitment({id: decodeURI(window.location.pathname),theme: myTheme,owner: 'detectiveHLH',repo: 'detectiveHLH.github.io',oauth: {client_id: 'xxx',client_secret: 'xxx'}});gitment.render('container');}showGitment();
</script>
<% } %>

将上面代码中的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"

结束

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

个人博客传送门 detectiveHLH
github传送门 detectiveHLH

转载于:https://www.cnblogs.com/detectiveHLH/p/9359419.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[转]我是如何走进黑客世界的?

*本文原创作者&#xff1a;MyselfExplorer&#xff1b;翻译编辑&#xff1a;楼兰&#xff0c;本文属FreeBuf原创奖励计划&#xff0c;未经许可禁止转载 我想给你一把打开这扇门的钥匙&#xff0c;而你要做的便是静静的聆听接下来的故事。挖掘 0day 一般需要掌握fuzzing&#xf…

使用Servlet 3.0,Redis / Jedis和CDI的简单CRUD –第1部分

在这篇文章中&#xff0c;我们将构建一个简单的用户界面。 数据将存储在Redis中。 为了与Redis交互&#xff0c;我们将使用Jedis库。 CDI用于Depedency Injection&#xff0c;而Servlet 3.0用于视图。 让我们从Redis / Jedis部分开始。 您可以在这些 帖子中找到有关Redis和Jed…

Socket.io 深入理解

最近在做项目优化工作时&#xff0c;用到了Socket.io , Socket.io 文档比较少&#xff0c; 结合官网介绍以及自己在项目开发中的摸索&#xff0c;总结如下内容&#xff1b; Socket.io将Websocket和轮询 &#xff08;Polling&#xff09;机制以及其它的实时通信方式封装成了通用…

python填表_小Python填表得到d

我正在尝试使用Scrapy从网站自动下载数据。在我要做的是&#xff1a;使用我的凭据登录网站通过在“RIC”行中写入代码并选择感兴趣的时段来选择我想要的数据单击“获取数据”后&#xff0c;将生成.csv文件&#xff0c;我可以从“下载/”url下载该文件&#xff0c;其中我的所有文…

如何使用异步Servlet来提高性能

这篇文章将描述一种性能优化技术&#xff0c;适用于与现代Web应用程序相关的常见问题。 如今的应用程序不再只是被动地等待浏览器发起请求&#xff0c;而是希望自己开始通信。 一个典型的示例可能涉及聊天应用程序&#xff0c;拍卖行等–共同点是以下事实&#xff1a;大多数时间…

我理解中的“大前端”/“大无线”

本文内容较长&#xff0c;大概需要15分钟时间阅读。 内容包含五部分&#xff1a;前言&#xff0c;NodeJS职能变化&#xff0c;ReactNative的大规模应用&#xff0c;专门的架构组职能&#xff0c;总结。主要是介绍我所在团队最近的一些变化和思考。 更多信息可以加入我的小密圈关…

STM32之Systick(系统时钟滴答定时器)

systick定时器有两个可选的时钟源&#xff0c;一个是外部时钟源&#xff08;STCLK&#xff0c;等于HCLK/8&#xff09;&#xff0c;另一个是内核时钟&#xff08;FCLK&#xff0c;等于HCLK&#xff09;。假若你选择内核时钟&#xff0c;并将HCLK频率设置为72MHz的话&#xff0c…

Dirichlet分布

1.预备知识 Beta分布函数是一种定义在实数区间[0,1]的特殊函数&#xff0c;它是二项式分布的共轭分布&#xff1b;与Beta分布相同&#xff0c;Dirichlet分布也是定义在实数区间[0,1]的概率度量函数&#xff0c;Dirichlet分布是多项式分布的共轭分布&#xff0c;Dirichlet分布的…

python编程制作接金币游戏_pygame学习笔记(6):完成一个简单的游戏

学了这么长时间的Pygame&#xff0c;一直想写个游戏实战一下。看起来很简单的游戏&#xff0c;写其来怎么这么难。最初想写个俄罗斯方块&#xff0c;想了很长时间如何实现&#xff0c;想来想去&#xff0c;也没写出来&#xff0c;于是干脆下载别人的代码来读。后来&#xff0c;…

Spring:使基于Java的配置更加优雅

大家好&#xff0c;我很久没有写新文章了。 积累了很多资料&#xff0c;需要在不久的将来在我的博客中发布。 但是现在我想谈谈Spring MVC应用程序配置。 确切地说&#xff0c;我想谈谈基于Java的Spring配置。 尽管在3.0版本中引入了基于Spring Java的配置&#xff0c;但是许多…

用观察者模式编写一个可被其他对象拓展复用自定义事件系统

观察者模式 定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都将得到通知 什么是观察者模式&#xff1f; 发布—订阅模式又叫观察者模式&#xff0c;它定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态…

布局定位

布局与定位 摆放元素 1&#xff0c;使用流 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始&#xff0c;从上到下沿着元素流逐个显示所遇到的各个元素。 每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并…

T - Memory and Trident CodeForces - 712B( 注意:* ++ = 的优先级

题意&#xff1a;有四种命令&#xff1a;U代表上移一个单位&#xff0c;D代表下移一个单位&#xff0c;R代表右移一个单位&#xff0c;L代表左移一个单位。 现在给出一串命令&#xff0c;问怎样修改命令中的任意一条命令&#xff0c;使得命令结束后重新返回原点&#xff0c;并且…

python语言精通_Python语言基础从入门到精通

1、python关键字False await else import passNone break except in raiseTrue class finally is returnand continue for lambda tryas def from nonlocal whileassert del global not withasync elif if or yield2、命令行参数williamdeMBP-2:~ william$ python -c "imp…

休眠事实:了解刷新操作顺序很重要

Hibernate将开发人员的思维方式从思考SQL转变为思考对象状态转换。 根据Hibernate Docs&#xff0c;实体可能处于以下状态之一&#xff1a; new / transient&#xff1a;实体不与持久性上下文关联&#xff0c;因为它是数据库不知道的新创建的对象。 持久性&#xff1a;实体与…

[HNOI2012]排队

题目描述 某中学有 n 名男同学&#xff0c;m 名女同学和两名老师要排队参加体检。他们排成一条直线&#xff0c;并且任意两名女同学不能相邻&#xff0c;两名老师也不能相邻&#xff0c;那么一共有多少种排法呢&#xff1f;&#xff08;注意&#xff1a;任意两个人都是不同的&a…

声速的测量的实验原理和应用_声速的测定实验报告心得体会

测量声速的实验报告1。提出问题如何测出声音的速度?2。猜想与假设如果在一定距离内听到声音要多少时间?3。实验步骤步骤应该就是实施实验&#xff0c;第三是实验器材的话&#xff0c;就是要秒表。4。实施实验在一个山谷中&#xff0c;站在距离峭壁680M的地方大叫一声&#xf…

FreeNAS:创建 CIFS 共享(权限)

第一部分&#xff1a;新建账户与指定数据集权限 简单起见&#xff0c;本教程主要介绍带基本身份验证的 CIFS 共享&#xff0c;即只有输入正确的用户名和密码才可以访问共享目录。关于创建匿名共享、多用户权限管理以及域控制器相关内容&#xff0c;我们会另外发布教程专门介绍。…

使用序列化查找对象中的脏字段

假设您正在开发一个将对象自动保存到数据库中的框架。 您需要检测两次保存之间所做的更改&#xff0c;以便仅保存修改过的字段。 如何检测脏场。 最简单的方法是遍历原始数据和当前数据&#xff0c;并分别比较每个字段。 代码如下&#xff1a; public static void getDirtyFie…

js操作table中tr的顺序,实现上移下移一行的效果

总体思路是在table外部加个div&#xff0c;修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex&#xff0c;在table中删除掉&#xff0c;然后循环table的rows&#xff0c;到了目标行再直接加进去&#xff0c;最后把整体的html赋值给div完成效果…