前言
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 代码中的 id 和 tocSelector 必须根据 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
|
