为 Hexo 的 Next 主题添加 Gitalk 评论

image

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

---

主要特性：

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

• 首先创建 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 。