为 Hexo 的 Next 主题添加 Gitalk 评论

image

Gitalk 是一个基于 Github Issue 的评论插件,使用 Github 帐号登录,界面干净整洁,最喜欢的一点是支持 MarkDown 语法,在个人博客里添加了之后就可以很简便的进行评论和回复了。


主要特性:

  • 使用 Github 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
  • 支持个人或组织
  • 无干扰模式(设置 distractionFreeModetrue 开启)
  • 快捷键提交评论 (cmd | ctrl + enter
  • 支持 MarkDown 语法

界面效果:

image

安装

我这边使用的 Next 主题,版本是 5.1.3

1. 创建 Github 仓库

需要在自己的 Github 账号下创建一个仓库来存放评论,创建的仓库只要 public 就行,其余没要求。

2. 创建 Github Application

需要创建一个 Github Application 用来授权登录,如果没有 点击这里申请Authorization callback URL 填写你主页地址,比如我的就是 https://jonzzs.cn,其他都随意填。

3. 为 Next 主题添加 Gitalk 支持

  • 首先创建 Gitalkswig 文件,放在 themes/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>
      <div id="gitalk-container"></div>
      <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.clientID }}',
          clientSecret: '{{ theme.gitalk.clientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.owner }}',
          admin: ['{{ theme.gitalk.admin }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
      </script>
    {% endif %}
    
  • 在主题文件 themes/next/layout/_third-party/comments/index.swig 中引入刚刚添加的文件。

    {% include 'gitalk.swig' %}
    
  • themes/next/layout/_partials/comments.swig 文件末找到最后的 {% endif %} 语句,替换为如下代码。

    {% elseif theme.gitalk.enable %}
      <div id="gitalk-container"></div>
    {% endif %}
    
  • themes/next/_config.yml 文件中添加 Gitalk 的配置。

    gitalk:
      enable: true # 是否启用
      owner: Jonzzs # 用户名
      repo: BlogComment # 存放评论的仓库名
      clientID: 96fe4c8974d2415f9fc0 # Github Application 的 clientID
      clientSecret: ece2551d6a09bfe9f9421ac6e85f1472daf6122c # Github Application 的 clientSecret
      admin: Jonzzs # 用户名
      distractionFreeMode: false # 评论时遮照效果的开关
    
  • 最后执行 hexo clean && hexo g && hexo d 重新发布博客即可。


我的传送门: 博客简书微博GitHub

推荐阅读更多精彩内容

  • 看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: ...
    Moorez阅读 57,189评论 118 284
  • 写在前面 本文为个人前一篇文章hexo搭建个人博客--基础篇的后续篇,前文主要介绍了如何搭建一个个人网站以及绑定域...
    Alvabill阅读 32,873评论 10 34
  • 1. 设置主题风格 打开 themes/next/_config.yml 文件,搜索 scheme 关键字,将你...
    迟道阅读 20,505评论 10 48
  • 写在前面 本文主要是NexT主题配置以及页面的样式优化,参考了许多大佬的文章以及配置文件。 本文参考的文章都会直接...
    格物_志阅读 1,749评论 0 7
  • 日常bb 前一篇文章:2019-3.3_发烧停更本来向发烧停更的,打算;还是不能休息,有罪恶感。贴上之前我hexo...
    晓小小小晓阅读 2,010评论 1 14
  • 又到了落英缤纷的暮春时候, 迷濛的烟霭笼罩着远山轮廓。 不知何处的牧笛在风中吹响, 悲鸣的杜鹃声让人丧魂失魄。 凝...
    我爱吃任何鱼阅读 149评论 0 4
  • 姓名:张平原 公司:阿里米丁节能科技(苏州)有限公司 日精进打卡第8天 知~学习 《六项精进》5遍共40遍 《大学...
    阿里米丁阅读 125评论 0 0
  • 啊!我脸被Lemon 挠了。 我看看。呃,就破了一层皮,而且比我的短多了。 what?这也能攀比! 哈哈哈,谁让你...
    彭咸阅读 88评论 0 0
  • 又是一年绿转黄, 淅沥秋雨绵悠长, 枯叶败落随风起, 茫然无助泣凄凉。 ...
    sequoia阅读 153评论 0 0
  • 现在简书钻排名零名 检查察看,小圈圈原地打转 闹心、闹肝、闹肺肺…
    雨点儿滴哒阅读 164评论 0 5