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

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

代码如下:

  1. <div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>
  2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  3. <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
  4. <script type="text/javascript">
  5. if(<%=theme.gitalk.enable%>){
  6. var gitalk = new Gitalk({
  7. clientID: '<%=theme.gitalk.ClientID%>',
  8. clientSecret: '<%=theme.gitalk.ClientSecret%>',
  9. repo: '<%=theme.gitalk.repo%>',
  10. owner: '<%=theme.gitalk.githubID%>',
  11. admin: ['<%=theme.gitalk.adminUser%>'],
  12. id: '<%= page.date %>',
  13. distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
  14. })
  15. gitalk.render('gitalk-container')
  16. }
  17. </script>

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

代码如下:

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

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

代码如下:

  1. <% if(theme.gitalk.enable){ %>
  2. <%- partial('post/gitalk', {
  3. key: post.slug,
  4. title: post.title,
  5. url: config.url+url_for(post.path)
  6. }) %>
  7. <% } %>

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

代码如下:

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

记得把gitment的配置注释掉

5.提交更新

  1. 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. 【XSY2921】yja 拉格朗日乘法

    题目描述 在平面上找 \(n\) 个点,要求这 \(n\) 个点离原点的距离分别是 \(r_1,r_2,\ldots,r_n\),最大化这 \(n\) 个点构成的土包的面积.这些点的顺序任意. \(n ...

  2. (二叉树 递归) leetcode 105. Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  3. Python Pandas 简单使用之 API熟悉

    1.read_csv li_index = ['round_id', 'index', 'c-sequen' ] dataset = pd.read_csv(file, low_memory=Fals ...

  4. windows linux 文件编码转换

    查看文件编码在Linux中查看文件编码可以通过以下几种方式:1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vi ...

  5. CMDB资产管理系统开发【day25】:表结构设计1

    资产表 # _*_coding:utf-8_*_ __author__ = 'jieli' from assets.myauth import UserProfile from django.db i ...

  6. JavaScript 函数递归

    递归函数 递归函数是在一个函数通过名字调用自身的情况下构成的 项目中例如树状结构渲染,对象深复制,等很多方面都会使用到递归函数 function factorial(num){ if (num < ...

  7. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

  8. Linux动态库生成与使用指南

    相关阅读: Linux静态库生成指南 Linux下动态库文件的文件名形如 libxxx.so,其中so是 Shared Object 的缩写,即可以共享的目标文件. 在链接动态库生成可执行文件时,并不 ...

  9. BZOJ #3625 CF #438E 小朋友和二叉树

    清真多项式题 BZOJ #3625 codeforces #438E 题意 每个点的权值可以在集合$ S$中任取 求点权和恰好为$[1..n]$的不同的二叉树数量 数据范围全是$ 10^5$ $ So ...

  10. token的设置与获取

    以用户登录为例: application-resources.yml: #用户session在redis中保存的key REDIS_STU_SESSION_KEY: REDIS_USER_SESSIO ...