Hexo添加Gitalk评论插件

安装

Gitalk提供了两种方式：

直接引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<!-- or -->

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

npm安装

1
2
3

npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

相对来说第一种会更简单。

使用

A GitHub Application is needed for authorization, if you don’t have one, Click here to register a new one.

Note: You must specify the website domain url in the Authorization callback URL field.

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

修改主题文件

这里以next主题为例，参考Feature: Add Gitalk Support

不同的主题目录和模板引擎不同，可以自己修改, 修改next主题配置文件_config.yml，添加字段：

# Gitalk
# more info please open https://github.com/gitalk/gitalk
gitalk:
  enable: false
  clientID:
  clientSecret:
  repo:
  owner:
  admin: # support multiple admins split with comma, e.g. foo,bar
  pagerDirection: first

找到next/layout/_third-party/comments文件夹，新建gitalk.swig文件，代码如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.gitalk.enable %}
    {% if page.comments %}
      <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
      <script type="text/javascript">
        const gitalk = new Gitalk({
          clientID: '{{theme.gitalk.clientID}}',
          clientSecret: '{{theme.gitalk.clientSecret}}',
          repo: '{{theme.gitalk.repo}}',
          owner: '{{theme.gitalk.owner}}',
          admin: '{{theme.gitalk.admin}}'.split(','),
          pagerDirection: '{{theme.gitalk.pagerDirection}}',
          // facebook-like distraction free mode
          distractionFreeMode: false
        })
        gitalk.render('gitalk-container')
      </script>
    {% endif %}
  {% endif %}
{% endif %}

同目录下在index.swig文件末尾添加：

1	{% include 'gitalk.swig' %}

下步搞起，next/layout/_partials文件夹下，找到comments.swig文件，添加代码：

1
2
3

{% elseif theme.gitalk.enable %}
      <div id="gitalk-container"></div>
      <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

因为github限制了issue的提交title长度不能超过50，可能会遇到Error: Validation Failed 按照这里的方案，使用MD5的方式降低长度即可

安装

使用

修改主题文件

参考文档