title: 接入gitment为hexo添加评论功能

toc: false

date: 2018-04-16 10:59:56

categories:

  • methods

tags:

  • hexo
  • gitment

注册一个OAuth application

注册链接

其中:

Application name 为应用名,取一个跟自己博客相关的名字即可;

Homepage URL 为博客地址,例如我的为:https://mikqueenge.github.io

Application description 为应用描述,可不填;

Authorization callback URL 为回调URL,可不填;

点击 Register application 祝成功后会得到这个应用的 client IDclient secret,等下配置文件时会用到。

配置文件

主题:landscape

创建git.ejs

themes/landscape/layout/_partial/post文件夹中创建文件git.ejs,写入下面的代码:

<!-- Gitment评论插件通用代码 -->
<div id="git"></div>
<!-- 汉化版 -->
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
<script>
var gitment = new Gitment({
id: '{{ page.date }}', //添加此句解决Error:validation failed的问题
owner: "%%%%%%%",//github用户名,例如MIKQUEENGE
repo: "%%%%%%%",//用户存储评论的github项目名称,例如MIKQUEENGE.github.io
oauth: {
client_id: "%%%%%%%%%%%%",//注册OAuth Application时生产的ClinetID
client_secret:"%%%%%%%%%%",//注册OAuth Application时生成的Client Secret
},
})
gitment.render('git')
</script>
<!-- Gitment代码结束 -->

配置article.ejs

themes/landscape/layout/_partial/article.ejs文件的结尾添加:

<% if (!index){ %>
<% if (post.comments){ %>
<%- partial('post/git') %>
<% } else { %>
<div class="git"></div>
<% } %>
<% } %>

登陆与添加评论

完成上述配置后部署并打开某篇文章,拉到最底部可以看到评论区:

点击登陆后就可以添加评论啦!

遇到问题Error:validation failed

md文件名太长导致id出现问题,使用上述代码是不会出现这个问题的。

如果出现这个问题,解决方案为在gitment配置文件(如上述的git.ejs)中的var gitment = new Gitment({})内添加id: '{{ page.date }}',(不要忘记这个逗号)


参考链接:

Hexo博客yelee主题添加Gitment评论系统

Gitment评论功能接入踩坑教程

接入gitment为hexo添加评论功能的更多相关文章

  1. sharepoint 2010 如何给文档库或自定义列表添加评论功能

    转:http://www.cfanz.cn/?c=article&a=read&id=40924 最近公司在知识库中,有一个需求,就是想要给文档添加评论功能,在sharepoint 2 ...

  2. SharePoint 2007 文档库中的文档添加评论功能

    背景:接到一个项目,要求文档管理,当然文档库就可以了,但是要求文档需要大家去读,读完以后还可以发表评论,这Moss貌似就有点困难了.和同事一起合计,想来想去也没有太好的办法,后来想到传统开发,两个表的 ...

  3. 给hexo添加评论系统

    默认主题 landscape 文件目录,comments为新建的 _config.yml layout -- _partial -- article.ejs |- comments -- disqus ...

  4. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  5. Hexo瞎折腾系列(8) - 添加评论系统

    前言 Hexo的NexT主题本身就集成了一些评论系统,多说啊之类的已经关闭服务的略过不提,目前比较多人用的有畅言.来必力livere.Gitment.Gitalk.Disqus等. 我刚用的评论系统的 ...

  6. 将hexo的评论系统由gitment改为Valine

    title: 将hexo的评论系统由gitment改为Valine toc: false date: 2018-09-13 15:10:56 categories: methods tags: hex ...

  7. 在Jekyll博客添加评论系统:gitment篇

    最近在Github Pages上使用Jekyll搭建了个人博客( jacobpan3g.github.io/cn ), 当需要添加评论系统时,找了一下国内的几个第三方评论系统,如"多说&qu ...

  8. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  9. 一步步搭建自己的博客 .NET版(2、评论功能)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

随机推荐

  1. javascript系列-class12.事件

    1.默认行为          什么是默认行为:默认行为就是浏览器自己触发的事件.比如:a链接的跳转,form提交时的跳转,鼠标右键跳转:   oncontexmenu当点击右键菜单的时候:   re ...

  2. [转]Linux常用命令学习

    转自 https://www.cnblogs.com/gaojun/p/3359355.html 1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文 ...

  3. (转)IOS http请求的get 和 post的请求的区别

    从表面的意思看get 和 post的区别get就是获取数据,post就是发送数据.这个是误区.其实两者都可以的,在IOS向服务器发送请求里面可以带参数. 那么这些误区是怎么出现的呢?先看看一下对htt ...

  4. Tomcat 初探(三)多项目部署

    起因 昨天房东找我说最近物价飞涨,要涨我房租,混不下去了,得要求老板涨工资.一大清早就去找老板,老板看了看我,让我发布先两个网站:一个前台网站 frontend,给用户用:一个后台管理网站 backe ...

  5. SQL Server 从字符串中提取中文、英文、数字

    --[提取中文] IF OBJECT_ID('dbo.fun_getCN') IS NOT NULL DROP FUNCTION dbo.fun_getCN GO create function db ...

  6. 洛谷P3356 火星探险问题(费用流)

    题目描述 火星探险队的登陆舱将在火星表面着陆,登陆舱内有多部障碍物探测车.登陆舱着陆后,探测车将离开登陆舱向先期到达的传送器方向移动.探测车在移动中还必须采集岩石标本.每一块岩石标本由最先遇到它的探测 ...

  7. vue中slot组件的使用

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...

  8. 移动端 AnyProxy HTTPS 配置

    参考:AnyProxy HTTPS相关教程 参考教程中,说明了 Windows 和 Mac 系统的配置,这里补充一下移动端(Android.iOS)的配置 生成RootCA > 下载 rootC ...

  9. Lucene倒排索引结构及关系

  10. table标签 在谷歌和ie浏览器下不同的表现效果

    在项目中有了一个这样的需求: 我需要利用vue的模板语法v-for循环生成tr,这个tr是需要双重循环来确定其个数的, 我的实现: 我在tr外面包了一个template标签, 效果: 谷歌浏览器下实现 ...