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. swift-初探webView与JS交互

    公司接下来的项目需要用swift内嵌h5来实现, 以前没有做过swift项目, 现在慢慢将所学的一点一滴记录一下 一个是怕自己忘了- =, 再就是希望大家看到能帮助我哈哈哈 前几天想要直接用swift ...

  2. 一个操作oracle的c#类 含分页

    有别于以前的一个OracleHelper,这个版各有所长,MARK下. using System; using System.Data; using System.Data.OracleClient; ...

  3. 【BZOJ 2038】小Z的袜子

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2038 [算法] 莫队算法 [代码] #include<bits/stdc++. ...

  4. netty可靠性

    Netty的可靠性 首先,我们要从Netty的主要用途来分析它的可靠性,Netty目前的主流用法有三种: 1) 构建RPC调用的基础通信组件,提供跨节点的远程服务调用能力: 2) NIO通信框架,用于 ...

  5. JAVA好书之《深入理解Java虚拟机》

    最近打算做好现有工作的前提下,扎实一下自己专业的技术知识,并将相关的经典书也记录一下.今天看了一些JVM相关的知识,这里面的经典是<深入理解Java虚拟机>,适合有点基础又想深入理解其中原 ...

  6. 杂项-建模:BIM

    ylbtech-杂项-建模:BIM 建筑信息模型是建筑学.工程学及土木工程的新工具.建筑信息模型或建筑资讯模型一词由Autodesk所创的.它是来形容那些以三维图形为主.物件导向.建筑学有关的电脑辅助 ...

  7. python中set集合的使用

    集合(set):把不同的元素组成一起形成集合,是python基本的数据类型. python 的集合类型和 其他语言类似, 是一个无序不重复元素集 基本功能包括关系测试和消除重复元素.集合对象还支持un ...

  8. 简述RNN Recurrent Neural Networks

    本文结构: 什么是 Recurrent Neural Networks ? Recurrent Neural Networks 的优点和应用? 训练 Recurrent Neural Networks ...

  9. update没带where,寻找问题的思路

    数据库版本:5.6.16 前几天,在测试环境中,不知道为什么突然之间,所有的一个字段值全部变成了12,需要将备份还原后开发重新清理垃圾数据并开始测试. 在开发提供 SQL语句的情况下,能否查到是谁做了 ...

  10. Android 7.0 Gallery图库源码分析4 - SlotView手势监听及页面跳转

    上篇文章讲了初始化View时会实例化一个SlotView并监听其事件,至于它是怎么实现的,用的是Android自带的GestureDetector. GestureDetector是Android自带 ...