前言
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
|