Hexo添加Gitalk评论插件

发表于 更新于 分类于 本文字数： 2.9k 阅读时长 ≈ 3 分钟

安装

Gitalk提供了两种方式：

  • 直接引入
1
2
3
4
5
6
7
<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.

1
2
3
4
5
6
7
8
9
10
11
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主题配置文件_config.yml，添加字段：

1
2
3
4
5
6
7
8
9
10
# 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文件，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% 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的方式降低长度即可

参考文档

  1. Hexo添加Gitalk评论插件
  2. Next 第三方服务集成
  3. 在hexo next主题上使用gitalk