虽然gitment可以实现评论功能,但是适配方面做的并不好,这里借用GitHub上的gitalk项目用来优化个人博客的评论功能
下面记录自己从gitment到gitalk的替换过程:

1.在layout/_partial/post目录下新增gitalk.ejs文件

代码如下:

<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript"> if(<%=theme.gitalk.enable%>){
var gitalk = new Gitalk({
clientID: '<%=theme.gitalk.ClientID%>',
clientSecret: '<%=theme.gitalk.ClientSecret%>',
repo: '<%=theme.gitalk.repo%>',
owner: '<%=theme.gitalk.githubID%>',
admin: ['<%=theme.gitalk.adminUser%>'],
id: '<%= page.date %>',
distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>

2.修改source-src/css/目录下comment.scss文件

代码如下:

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
padding: 0 30px !important;
min-height: 20px;
} #SOHUCS {
#SOHU_MAIN .module-cmt-list .block-cont-gw {
border-bottom: 1px dashed #c8c8c8 !important;
}
}

3.在layout/_partial目录下的article.ejs文件内新增gitalk相关的配置代码:

代码如下:

<% if(theme.gitalk.enable){ %>
<%- partial('post/gitalk', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>

4.在yilia主题配置文件(_config.yml)中新增gitalk相关的配置:

代码如下:

gitalk:
enable: true #是否开启
githubID: liu1340308350 #你的Github用户名
repo: liu1340308350.github.io #Github仓库名称
ClientID: d59609200a63b0ee33de #创建的Application ClientID
ClientSecret: d5eb433efa8075a46a3c6ec2744212acdb1ab01e #创建的Application ClientSecret
adminUser: liu1340308350 # 评论初始化账户(GitHub ID)
distractionFreeMode: true # 是否开启分心自由模式 也就是免打扰

记得把gitment的配置注释掉

5.提交更新

hexo d -g

故障:

提交之后gitalk的评论页面出现在主页,最后反复提交2次之后,主页的gitalk评论页面消失,这里十分迷惑,求解?
我的博客,欢迎博友查看

Hexo主题yilia增加gitalk评论插件的更多相关文章

  1. hexo博客添加gitalk评论系统

      经过了一天的折腾,我终于为自己的博客添加上了评论系统.坦率的讲,为什么网上那么多方案我还要自己写一篇博客,那就是因为他们说的都有bug,所以我要自己总结一下.   我选用的是gitalk评论系统, ...

  2. 为博客添加 Gitalk 评论插件

    背景 Disqus需要翻墙才能正常使用 畅言有广告 2种评论系统都很难统一管理 优化 使用Gitalk评论插件 , gitalk 使用 Github 帐号登录,界面干净整洁,支持 MarkDown语法 ...

  3. 在个人博客中优雅的使用Gitalk评论插件

    在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在 ...

  4. 如何通过Gitalk评论插件,5分钟为你的博客快速集成评论功能

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  5. GitHub-Hexo-Blog 集成Gitalk评论插件

    在本文)末尾可查看先查看效果: 1. 新建New OAuth App 在github中,Settings / Develpoer settings OAuth Apps / New OAuth App ...

  6. blog 社会化评论插件 多说for china, disqus for global range

    1.disqus https://disqus.com/ https://publishers.disqus.com/engage https://disqus.com/admin/create/ h ...

  7. 号外号外!解决github+hexo+yilia评论插件的问题!!!

    先走一波效果图!    本人网站--http://www.wenzheng.club/ ps:效果还是不错的,支持QQ微信登录,支持表情,甚至gif动图评论! 插件采用韩国服务器的来必力评论插件--h ...

  8. github+hexo搭建自己的博客网站(二)更换主题yilia

    开始更换主题,hexo默认的主题是landscape,可以更换为其他的主题yilia主题 详细的可以查看hexo博客的演示:saucxs.github.io 可以查看在github上生成的静态文件:h ...

  9. 为 hexo NexT 添加 Gitment 评论插件

    Gitment 是作者imsun实现的一款基于 GitHub Issues 的评论系统. 支持在前端直接引入, 不需要任何后端代码. 可以在页面进行登录, 查看, 评论, 点赞等操作. 同时有完整的 ...

随机推荐

  1. mongoDB 文档概念

    mongoDB 文档概念 什么是文档 文档是 mongodb 基本的数据组织单元,类似于mysql 中的记录 文档由多个键值对组成,每个键值对表达一个数据项 属于 bson 数据 ps:  bson ...

  2. AWS设置允许root登陆

    Refer to the following to set root login: sudo -s (to become root) vi /root/.ssh/authorized_keys Del ...

  3. BM算法学习笔记

    一种nb算法,可以求出数列的递推式. 具体过程是这样的. 我们先假设它有一个递推式,然后按位去算他的值. ;j<now.size();++j)(delta[i]+=1ll*now[j]*f[i- ...

  4. Gym - 101350A Sherlock Bones(思维)

    The great dog detective Sherlock Bones is on the verge of a new discovery. But for this problem, he ...

  5. JS的基础知识回顾

    前言:JS应用在浏览器端,基于浏览器事件执行,功能十分强大,不容错过

  6. 第十五节:深入理解async和await的作用及各种适用场景和用法

    一. 同步VS异步 1.   同步 VS 异步 VS 多线程 同步方法:调用时需要等待返回结果,才可以继续往下执行业务 异步方法:调用时无须等待返回结果,可以继续往下执行业务 开启新线程:在主线程之外 ...

  7. [译]Ocelot - Headers Transformation

    原文 Add to Request 为上游请求添加请求头,只需如下一样将下面的配置添加到一个ReRoute里: "UpstreamHeaderTransform": { " ...

  8. webapp中绝对定位/固定定位与虚拟键盘冲突的问题

    $('body,html').height(document.body.clientHeight); 进入页面的时候就把高度固定住,这样虚拟键盘打开页面高度不会变化,你的布局也不会乱. 测试有效. 当 ...

  9. jQuery1.9及以上版本检测IE版本号

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

  10. burp Suite 模块Authz 使用方法

    这个模块是朋友告诉我的,然后进行了研究使用方法. 以下为个人理解,如有错误感谢各位纠正. 0x00 安装Authz Extender > BApp Store > Authz > i ...