hexo 配置gitalk

Posted on

我现在用的博客是静态网页，没有独立的后端服务器来支撑，为了实现评论功能，需要对接第三方的评论插件，经过各种考虑，决定使用gitalk。
这是一个基于GitHub的issues来实现的评论工具。

这个功能使用到了以下插件

➡️GitHub

首先得有一个GitHub账号，然后打开链接↙️
New OAuth application
注册一个OAuth App
具体填写参考如下：

1
2
3
4
Application name //应用名称
Homepage URL //填自己的博客地址就可以了
Application description //应用描述
Authorization callback URL //填写自己要用 gitalk 的博客地址

在这里填写完成之后你就会得到Client ID和Client Secret。

➡️文件修改

在主题目录下建立/layout/_third-party/gitalk.swig文件并添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% 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>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>

   <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.adminUser }}',
          id: md5({{ theme.gitalk.ID }}),
          labels: {{ theme.gitalk.labels }},
          perPage: {{ theme.gitalk.perPage }},
          pagerDirection: '{{ theme.gitalk.pagerDirection }}',
          createIssueManually: {{ theme.gitalk.createIssueManually }},
          distractionFreeMode: {{ theme.gitalk.distractionFreeMode }}
        })
        gitalk.render('gitalk-container')
       </script>
{% endif %}

在主题的/layout/_scripts/commons.swig中添加以下代码

1
{% include '../_third-party/comments/gitalk.swig' %}

接着，在主题的/layout/_partials/comments.swig中找到

1
2
3
4
{% elseif theme.valine.appid and theme.valine.appkey %}
  <div class="comments" id="comments">
  </div>
{% endif %}

并添加以下代码

1
2
3
{% if theme.gitalk.enable %}
      <div id="gitalk-container"></div>
{% endif %}

➡️进行配置

在主题的配置文件中，添加一下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
gitalk:
  enable: true # 是否启动
  ClientID: xxxxxx # 之前的Client ID
  ClientSecret: xxxxxxxxxxxx # 之前的Client Secret
  repo: gitalk # 留言板内容需要存放的仓库名称
  owner: l552121229 # 你 github 的帐号 eg: www.github.com/zhongxia245 ,帐号就是245
  adminUser: ['l552121229'] # 管理员用户
  ID: location.pathname
  labels: '["gitalk"]' # issue 的标签
  perPage: 15 # 每页展示条数
  pagerDirection: last # 排序方式是从旧到新（first）还是从新到旧（last）
  createIssueManually: true #如果当前页面没有相应的 isssue ，且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
  distractionFreeMode: true #是否启用快捷键(cmd|ctrl + enter) 提交评论.
  • 因为我们上面配置的gitalk是用location.pathname来作为项目标签区分的，如果这个文章名超过50个字就会报错，为了保险起见，我们通过引入md5.min.js来防止lables过长。