接入gitment为hexo添加评论功能

Posted zmj97

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了接入gitment为hexo添加评论功能相关的知识,希望对你有一定的参考价值。


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添加评论功能的主要内容,如果未能解决你的问题,请参考以下文章

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

Gitment评论插件的使用

hexo next主题集成gitment评论系统

hexo next主题集成gitment评论系统

Hexo 评论系统

github上Hexo Theme Yilia 主题配置gitment 出现gitment Error: Validation Failed错误