使用pjax的NexT 7.X移植Twikoo评论系统

1. Twikoo是什么？

twikoo是一个简洁、安全、免费的静态网站评论系统，基于腾讯云开发。
A simple, safe, free comment system based on Tencent CloudBase (tcb).

地址：Twikoo中文文档

2. 咋想起来用换评论系统了

之前一直用的gitalk，虽说不上多厉害但不痛不痒，偶然逛别人博客发现了twikoo，很好看，用起来也方便，当翻看文档时傻了眼：

暂不支持 NexT 8 以下的版本，请先升级到 NexT 8。然后在 Hexo 项目根目录执行

# For NexT version >= 8.0.0 && < 8.4.0
npm install hexo-next-twikoo@1.0.0
# For NexT version >= 8.4.0
npm install hexo-next-twikoo@1.0.1

一直用的NexT 7.x主题的版本，自己打磨了也很久，打算一直用下去不更新了。突然让上8，有点不适应，所以打算自己移植这个系统。

3. 移植过程

1、研究作者的DEMO

DEMO地址：github

2、启用twikoo

在themes\next\_config.yml下新增

twikoo:
  enable: true
vendors:
  twikoo: //fastly.jsdelivr.net/npm/twikoo@1.4.11/dist/twikoo.all.min.js

由于都是自己用，索性配置直接写死了，只开了启用开关，看上去是方便调试，其实是懒。。。

3、增加配置文件

在themes\next\layout\_third-party\comments\下新增twikoo.swig，内容如下：

{%- set twikoo_uri = theme.vendors.twikoo %}

<script>
NexT.utils.loadComments(document.querySelector('#tcomment'), () => {
  NexT.utils.getScript('{{ twikoo_uri }}', () => {
     twikoo.init({
      el         : '#tcomment',
      envId      : '这里填你的环境信息',
      });
  }, window.twikoo);
});
</script>

4、增加js文件

在themes\next\scripts\filters\comment\下新增twikoo.js,内容如下：

/* global hexo */

'use strict';

const path = require('path');
const { iconText } = require('./common');

// Add comment
hexo.extend.filter.register('theme_inject', injects => {
  let theme = hexo.theme.config;
  if (!theme.twikoo.enable) return;

  injects.comment.raw('twikoo', '<div class="twikoo" id="tcomment"></div>', {}, {cache: true});

  injects.bodyEnd.file('twikoo', path.join(hexo.theme_dir, 'layout/_third-party/comments/twikoo.swig'));

});

至此，不出意外的话，Twikoo就已经移植到NexT 7主题中了

5、效果图

4. 结尾

启用pjax的网站用此方法不影响使用twikoo
Enjoy!!!