Hexo docsify 添加 Gitalk

Gitalk

为 Hexo 的 even主题添加gitalk评论系统

创建 gitalk 文件

在themes/even/layout/_script/_comments目录下新增gitalk.swig文件，代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
  <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>
  <script type="text/javascript" src="{{ url_for('js/src') }}/md5.min.js?v={{ theme.version }}"></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.admin }}'],
          id: md5(location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
       </script>
{% endif %}

为了解决「常见问题」中1，这里引用md5.min.js文件，然后将id，通过md5函数加密后再请求github issueAPI，md5.min.js文件我放在themes/even/source/js/src/md5.min.js目录，当然你也可以引入远程地址，md5库地址

添加 gitalk 判断逻辑

themes/even/layout/_partial/comments.swig添加如下代码：

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

注意：if elseif endif 语法。

引入 gitalk

在themes/even/layout/_script/comments.swig文件中引入gitalk.swig文件，代码如下：

1
2
3
{% if theme.gitalk.enable %}
  {% include '_comments/gitalk.swig' %}
{% endif %}

配置 gitalk

配置themes/even/_config.yml中关于gitalk的配置，新增代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# Gitalk
# more info please open https://github.com/gitalk/gitalk
gitalk:
  enable: true
  clientID: xxxxxxx
  clientSecret: yyyyyyyyyyy
  repo: 'dbing.github.io'
  owner: 'dbing'
  admin: 'dbing'
  distractionFreeMode: true

没有clientID和clientSecret，点击申请，配置完以上恭喜你，重新生产部署一下你的博客文章命令：hexo g -d，打开文章详情页看看是否多出了评论框 :)

常见问题

Q1.Error: Validation Failed.

解决方法：https://github.com/gitalk/gitalk/issues/115#issuecomment-375954482

打开Network看请求，多半是因为github issues接口错误，以上方案给出的很详细。

Q2.Error: Issues are disabled for this repo

解决方法：https://github.com/imsun/gitment/issues/125

文章目录