zoukankan      html  css  js  c++  java
  • Hexo主题yilia增加gitalk评论插件

    虽然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评论页面消失,这里十分迷惑,求解?
    我的博客,欢迎博友查看

  • 相关阅读:
    【2017-06-20】Linux应用开发工程师C/C++面试问题记录之一:Linux多线程程序的同步问题
    April 14 2017 Week 15 Friday
    April 13 2017 Week 15 Thursday
    April 12 2017 Week 15 Wednesday
    【2017-06-17】QtGui基础控件:QSpinBox及QDoubleSpinBox
    April 11 2017 Week 15 Tuesday
    April 10 2017 Week 15 Monday
    April 9 2017 Week 15 Sunday
    April 8 2017 Week 14 Saturday
    April 7 2017 Week 14 Friday
  • 原文地址:https://www.cnblogs.com/liuurick/p/10713673.html
Copyright © 2011-2022 走看看