Hexo Next主题中集成gitalk评论系统

gitalk:一个基于 Github Issue 和 Preact 开发的评论插件

Register Application

在GitHub上注册新应用,链接:https://github.com/settings/applications/new

TIM截图20181231223353.png

参数说明:
Application name: # 应用名称,随意
Homepage URL: # 网站URL,如https://xt998.github.io
Application description # 描述,随意
Authorization callback URL:# 网站URL,https://xt998.github.io

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

gitalk.swig

新建/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 %}
comments.swig

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

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

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

{% include 'gitalk.swig' %}
gitalk.styl

新建/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;
third-party.styl

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

@import "gitalk";
_config.yml

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

gitalk:
  enable: true
  githubID: github帐号  # 例:xt998   
  repo: 仓库名称   # 例:xt998.github.io
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 #指定可初始化评论账户
  distractionFreeMode: true

以上就是NexT中添加gitalk评论的配置,博客上传到GitHub上后,打开页面后进入某篇文章内容下,就可以评论啦

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值