Hexo博客接入gitalk评论系统

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

内容简介:点击注册后,页面跳转如下,其中

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

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

查看所有标签

猜你喜欢:

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

Programming in Haskell

Programming in Haskell

Graham Hutton / Cambridge University Press / 2007-1-18 / GBP 34.99

Haskell is one of the leading languages for teaching functional programming, enabling students to write simpler and cleaner code, and to learn how to structure and reason about programs. This introduc......一起来看看 《Programming in Haskell》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

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

多种字符组合密码