前言
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>
|
提示
上面最后一行的配置内容，是基于下面的 HTML 代码压缩得到，请根据实际情况更改对应的博客信息。如何希望在移动端设备中，也需要扫码关注才能解锁文章，那么可以将下述代码更改为 var allowMobile = true;
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",
"height": "auto",
"expires": "365",
"interval": "30",
"tocSelector": "#card-toc"
});
} catch(e) {
console.warn("readmore plugin occurred error");
}
}
</script>
|
构建博客
执行以下的 Hexo 命令，重新构建博客，并在本地预览。
1
2
3
4
5
6
7
8
|
hexo clean
hexo generate
hexo server
|
