Butterfly 主题整合 TechGrow 公众号引流工具

前言

Butterfly 是一款优秀的 Hexo 第三方主题,高版本的 Butterfly(如 4.13.0 版本),不能使用 hexo-readmore 插件来整合 TechGrow 公众号引流工具;否则会导致 Pjax 不能完全生效,比如从首页点击文章链接进入文章页面后,APlayer 播放器会中断播放(即记不住播放进度)。解决方法是,采用手动整合的方式来使用公众号引流工具。

准备工作

  • 第一步:卸载已安装的 hexo-readmore 插件
1
npm uninstall hexo-readmore --save
  • 第二步:在 Hexo 的 _config.yml 配置文件里面,删除所有与 hexo-readmore 插件相关的配置信息

整合步骤

更改 Butterfly 主题的 _config.yml 配置文件,添加以下配置信息就可以整合引流工具。

1
2
3
4
5
inject:
bottom:
- <link rel="stylesheet" type="text/css" href="https://qiniu.techgrow.cn/readmore/dist/hexo.css">
- <script data-pjax src="https://qiniu.techgrow.cn/readmore/dist/readmore.js" type="text/javascript"></script>
- <script data-pjax>var isMobile=navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);var allowMobile=false;if(!isMobile||(isMobile&&allowMobile)){try{var plugin=new ReadmorePlugin();plugin.init({"type":"hexo","id":"article-container","name":"全栈技术驿站","blogId":"18762-1609305354821-257","qrcode":"https://www.techgrow.cn/img/wx_mp_qr.png","keyword":"Tech","random":"1","height":"auto","expires":"365","interval":"30","tocSelector":"#card-toc"})}catch(e){console.warn("readmore plugin occurred error")}}</script>

上面最后一行的配置内容,是基于下面的 JavaScript 代码压缩得到的,请根据实际情况更改对应的博客信息。在移动端设备中,如何希望扫码关注才能解锁文章,那么可以将下述代码更改为 var allowMobile = true;特别注意,JavaScript 代码中的 idtocSelector 必须根据 Butterfly 主题的源码来配置,默认值分别为 article-container#card-toc,不能随意改动,否则会导致引流工具失效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script data-pjax>
var isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
var allowMobile = false;
if (!isMobile || (isMobile && allowMobile)) {
try {
var plugin = new ReadmorePlugin();
plugin.init({
"type": "hexo",
"id": "article-container",
"name": "全栈技术驿站",
"blogId": "18762-1609305354821-257",
"qrcode": "https://www.techgrow.cn/img/wx_mp_qr.png",
"keyword": "Tech",
"random": "1.0",
"height": "auto",
"expires": "365",
"interval": "30",
"tocSelector": "#card-toc"
});
} catch(e) {
console.warn("readmore plugin occurred error");
}
}
</script>

控制指定的页面不添加引流工具

  • 如果希望某个页面不添加引流工具,那么可以自行更改上面的 JS 代码,以此控制指定的页面不添加引流工具,示例代码如下所示。
  • 特别注意,只要 type 的值为 hexo,右边这几个页面默认是不添加引流工具的,包括:/tags/categories/archives/comments/about/links
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script data-pjax>
var isExclude = false;
var excludePages = ['/python', '/golang', '/java'];
var currentPath = window.location.pathname.replace(/\/$/, '').toLowerCase();
if (excludePages.includes(currentPath)) {
isExclude = true;
}

var isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
var allowMobile = false;
if (!isExclude && (!isMobile || (isMobile && allowMobile))) {
try {
var plugin = new ReadmorePlugin();
plugin.init({
"type": "hexo",
"id": "article-container",
"name": "全栈技术驿站",
"blogId": "18762-1609305354821-257",
"qrcode": "https://www.techgrow.cn/img/wx_mp_qr.png",
"keyword": "Tech",
"random": "1.0",
"height": "auto",
"expires": "365",
"interval": "30",
"tocSelector": "#card-toc"
});
} catch(e) {
console.warn("readmore plugin occurred error");
}
}
</script>

值得一提的是,使用上面更改过的 JS 代码后,就可以控制 /python/golang/java 这几个页面不再添加引流工具。

Butterfly 整合案例代码下载

Butterfly 整合 TechGrow 引流工具的完整 Demo 可以从 这里 下载得到。

构建博客

执行以下的 Hexo 命令,重新构建博客,并在本地预览。

1
2
3
4
5
6
7
8
# 清理静态文件
hexo clean

# 构建静态文件
hexo generate

# 启动预览服务
hexo server