为 Hexo 的 Next 主题添加 Gitalk 评论

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

---

主要特性：

• 使用 Github 登录
• 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
• 支持个人或组织
• 无干扰模式（设置 distractionFreeMode 为 true 开启）
• 快捷键提交评论 （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 支持

• 首先创建 Gitalk 的 swig 文件，放在 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 。