An apple a day keeps the doctor away !

0%

使用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 项目根目录执行

1
2
3
4
# 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下新增

1
2
3
4
twikoo:
enable: true
vendors:
twikoo: //cdn.jsdelivr.net/npm/twikoo@1.4.11/dist/twikoo.all.min.js

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

3、增加配置文件

themes\next\layout\_third-party\comments\下新增twikoo.swig,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
{%- 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,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 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!!!