为 Hexo 的 Next 主题添加 Gitalk 评论

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


主要特性:

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

界面效果:

安装

我这边使用的 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

如果觉得我的文章对您有用,请随意打赏吧,您的支持将鼓励我继续创作!
0%