Hexo博客接入gitalk评论系统

栏目: CSS · 发布时间: 1年前

来源: blog.poetries.top

本文转载自:http://blog.poetries.top/2018/11/20/hexo-comment/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

https://github.com/settings/applications/new

Hexo博客接入gitalk评论系统

点击注册后,页面跳转如下,其中 Client IDClient Secret 在后面的配置中需要用到,到时复制粘贴即可

二、fexo配置主题

这里以我个人博客的主题来配置

themes/fexo/layout/_partial/component/ 新建一个 gitalk.ejs

<% if (page.comments && theme.gitalk.enable){ %>
  <div id="gitalk-container"></div>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script type="text/javascript">
      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: location.pathname,
        distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
      })
      gitalk.render('gitalk-container')           
     </script>
<% } %>

themes/fexo/layout/_partial/component/comments.ejs 中加入

<div class="fexo-comments <%= className %>">
  <%- partial('disqus') %>
  <%- partial('duoshuo') %>
  <%- partial('gitalk') %> <!-- 加入上面新建的 -->
</div>

themes/fexo/layout/_partial/article.ejs 中的article文章后面加入

<!-- 使用gitalk作为评论系统 -->
<%- partial('gitalk') %>

/static/css/style.css 中加入

/**gitalk css**/
.gt-header a, .gt-comments a, .gt-popup a{
  border-bottom: none;
}
.gt-container .gt-popup .gt-action.is--active:before{
  top: 0.7em;
}

在主题配置文件 _config.yml 加入

# 评论配置
gitalk:
  enable: true
  githubID: poetries
  repo: poetries.github.io   # 例:poetries.github.io
  owner: poetries
  ClientID: ''
  ClientSecret: ''
  adminUser: poetries #指定可初始化评论账户
  distractionFreeMode: true

然后回到文章页面,刷新页面后授权初始化就看到了

三、next主题配置

新建 /layout/_third-party/comments/gitalk.swig 文件,并添加内容

  {% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script type="text/javascript">
        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: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

修改 /layout/_partials/comments.swig ,添加内容如下,与前面的 elseif 同一级别上

{% elseif theme.gitalk.enable %}
 <div id="gitalk-container"></div>

修改 layout/_third-party/comments/index.swig ,在最后一行添加内容:

{% include 'gitalk.swig' %}

新建 /source/css/_common/components/third-party/gitalk.styl 文件,添加内容:

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改 /source/css/_common/components/third-party/third-party.styl ,在最后一行上添加内容,引入样式

@import "gitalk";

在主题配置文件 next/_config.yml 中添加如下内容

# 评论配置
gitalk:
  enable: true
  githubID: poetries
  repo: poetries.github.io   # 例:poetries.github.io
  owner: poetries
  ClientID: ''
  ClientSecret: ''
  adminUser: poetries #指定可初始化评论账户
  distractionFreeMode: true

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

财富博客

财富博客

Robert Scoble、Shel Israel / 李宛蓉 / 重庆出版社 / 2008 / 38.00元

《财富博客》作者斯考伯(美国最多人阅读的企业博客作者)和谢尔•以色列(资深技术顾问)相信,博客已经开始改变企业的面貌。他们阐释说明了员工博客如何改变外界对微软的观感,敢说敢做的NBA球队老板如何运用博客和球迷连接,小企业和大公司又如何能从博客获益……另外,还有万一使用不当,博客又会招致怎样的灾难。斯考伯和以色列直言不讳,这是卓越博客的基本要件,因此他们在说完博客的好处之后,也以同样诚实的心态讨论博......一起来看看 《财富博客》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码