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. Java-MyBatis:MyBatis 3 入门

    ylbtech-Java-MyBatis:MyBatis 3 入门 1.返回顶部 1. 入门 安装 要使用 MyBatis, 只需将 mybatis-x.x.x.jar 文件置于 classpath ...

  2. ROS-package.xml文件标签解读

    前言:package.xml是一个XML文件名为package.xml中必须包括与任何兼容包的根文件夹.此文件定义有关包的属性,例如包名称,版本号,作者,维护者以及其他catkin包的依赖关系. 标签 ...

  3. 多元一次方程解法 C++

    #include<iostream> #include<math.h> #include<fstream> #include<stdlib.h> usi ...

  4. Exception异常常见属性

    废话少说,直接上代码: try { int n = Convert.ToInt32("@"); } catch(Exception ex) { Console.WriteLine( ...

  5. getattibute 与 getparameter区别

    1.getAttribute是取得jsp中 用setAttribute设定的attribute 2.parameter得到的是string:attribute得到的是object  3.request ...

  6. UVA1584-Circular Sequence(紫书例题3.6)

    Some DNA sequences exist in circular forms as in the following gure, which shows a circular sequence ...

  7. [luogu4259 SCOI2003] 严格N元树 (高精 计数dp)

    题目描述 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d(根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严格2元树有三个, ...

  8. 基于LXC的虚拟网络自动部署

    一.问题: 在搭建以LXC为基础的虚拟网络时,网络参数繁多,配置过程繁琐.面临一个新的网络拓扑结构时,通常要花费大量时间来构建网络.因此,如果能通过配置文件,自动生成相对应的网络拓扑,并生成操作指令. ...

  9. Linux学习01

    Linux学习第一天 1.使用VM安装RHEL7.0 具体参见刘遄老师的<Linux就该怎么学>https://www.linuxprobe.com/chapter-01.html 2.R ...

  10. Vue的数据依赖实现原理简析

    首先让我们从最简单的一个实例Vue入手: const app = new Vue({ // options 传入一个选项obj.这个obj即对于这个vue实例的初始化 }) 通过查阅文档,我们可以知道 ...