功能
通过自定义js函数为butterfly添加额外的扩展功能。
API
开箱即用,支持跨域的 hexo 博客 api - 0o酱
支持跨域、随意开关接口的 hexo 博客 api 插件。
功能开发
原主题不具备的功能通过自定义js来实现。
Hexo的Butterfly魔改:随机网页跳转(无缝版) - 张洪Heo
提到随机网页跳转,大家就想到hexo-generator-random,我之前也是使用这个插件来做随机网页,这个插件的原理是生成一个html,只要访问这个html就可以进入随机的文章,但是这种方法有问题。
随机访问一篇文章的实现 - Leonus
随着文章慢慢的增多,后面的文章似乎就变的很少被看到,于是我想起来了这个随机访问一篇文章的功能。 果然,多浏览他人博客能出现更多的想法。
切换博客背景2.0版本——弹窗切换 - Leonus
昨天更新了一下切换背景页面的文章,然后在群里得到@Chuckle的建议:创建一个窗口方便切换 决定采纳,由于昨天晚上开始的比较晚,主要看了winbox的文档,今天早上起了个大早把其给肝出来了。
本来我是想自己写窗口的,但是写出来之后发现开关窗口啦,适配窗口啦之类的还要写很多,想起来就头疼。 于是就百度现成的插件,看上了这个GitHub项目:winbox 你也可以参考GitHub项目内的参数和api自行配制更多有趣的功能。
Butterfly魔改:国外网络访问检测,用js判断国外网络执行函数 - 张洪Heo
因为图床用的腾讯云cos,挂的cdn不支持外网访问(我也没打算支持),所以使用外网小伙伴无法访问任何图片,很多人以为是本站的图床挂了,然而可能是因为用户自己是用的外网。那么最好的方式就是告诉用户,你用的不是国内网进行访问。
如果你不需要外网访问你的网站,也可以利用这个js将网页跳转到其他页面或者其他操作。
Hexo魔改:Codepen项目组件移植教程,将Codepen项目移植到博客 - 张洪Heo
好久都没写魔改教程了,上次写的时候还是在上次。有一说一,近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度,大宽度带来的视觉沉浸感非常棒,但是会带来很多问题,例如之前的主题横向元素过少,以至于在横屏比较宽的场景下元素都会被拉伸得很大。所以这几次版本的迭代都是为了增加横向的元素,减少被拉伸感。
偶尔逛过我的博客的小伙伴应该看到了我在置顶区域新增了一个小组件。
网页插入一段文字的打字机效果,逐字出现循环回退删除动画Html - 张洪Heo
最近主题的更新是想让页面更加丰富起来,因为之前为了界面清爽删掉了很多功能,虽然一种程度上算是简约,但是对于个人博客来说不想只包含文章,还应该多一些信仰之力。所以为了高大上的逼格(狗头)所以分析了一下Butterfly主题的打字机效果。
Butterfly用的是typed.js来做的打字机效果。开箱即用,非常好用。
Butterfly主题下如何使用Openwrite的查看更多给公众号引流 - 张洪Heo
折腾一晚上,终于完成了~之前一直都有兼容性问题,折腾了几个小时搞定。因为网上也没有针对Butterfly的教程,整理的时候总是与Lazyload和pjax还有fancybox有兼容性问题。目前博客运行良好,遇到的问题都解决了。下面来说一下教程。
Hexo博客获取指定数量的友情链接,脱离友链朋友圈的约束 - JayHrn
这篇文章讲述了如何在Hexo博客中实现随机友情链接功能。作者发现博客功能受限,必须先实现其他功能才能实现当前的友情链接功能。通过使用Hexo内置的过滤器,在Butterfly主题上实现了随机获取友链链接的功能。作者还提供了修复版本,解决了每次获取链接数量减少的问题。文章详细介绍了实现步骤和代码示例。
首页背景图渐进式加载,解决卡顿难题 - 铭心石刻
这篇文章介绍了如何使用渐进式加载优化首页背景图的效果。通过添加代码和配置图片,可以实现先加载小图并进行高斯模糊处理,然后再加载大图,最终达到流畅和美观的效果。文章提供了详细的操作步骤和代码示例,适用于各种博客主题和背景需求。同时,作者还提到了这种方法对于一图流的博客背景也适用,并分享了灵感来源和个人思考。
引入JS链接使页面平滑滚动 - Naokuo
本教程介绍了引入smoothscroll-for-websites使页面平滑滚动。
博客全局快捷键的实现 - VacuolePao
使用Javascript简单实现快捷键功能,肯定能用
安全跳转页面·插件版 - LiuShen
基于hexo-external-link,二次开发的外链跳转页插件,实现真正的替换,在生成静态文件时进行替换,而不是之前的通过JS进行匹配并替换,支持CSS选择器选择特定窗口,支持Base64编码加密目标地址,支持一定程度的简单自定义,如头像,副标题,暗黑模式,如果有前端基础,还可以通过修改源文件进行自定义美化。
Github Action实现友链状态检测 - LiuShen
自动化检测友链状态的方法,使用GitHub Action来定时执行Python脚本,以检查友链的可达性。系统能够输出检测结果到控制台,并将结果保存在result.json文件中。此外,还提供了一个前端展示界面,除此之外,还可以通过API接口可以获取友链的可达性数据,并以小标签方式展示到友链页面每个卡片左上角。
原生功能自定义
原主题具备的功能进行深度定制和优化。
pjax无法生效解决办法,butterfly主题维护你的pjax - 张洪Heo
之前自己的网页pjax时灵时不灵,真的是奇了怪了。研究了一下pjax的文档,发现很多东西都是用的有问题,因为最开始魔改页面的时候都没注意过pjax,所以留下了大量屎山代码。
这个文章可以更好的帮助你去魔改页面,并且保留pjax。
butterfly控制特定图片懒加载 - 安知鱼
经常看我博客的同学应该不难发现我的文章顶图偶尔进来以后还要等一会才能出现,还有加载动画的图片偶尔加载不出来,后来经过我一系列的排查发现居然是懒加载的缘故。
观察 network 选项卡可以发现我们需要让启动器改变,不让lazyload.iife.min.js来加载我们的顶图与加载动画的头像。
自定义功能定制
原主题不具备的第三方功能进行自定义定制。
51la统计美化 - Leonus
逛洪哥博客的时候看到了这个关于51la统计的文章,觉得还不错于是也跟着弄了一下。 但是在弄前端统计的时候,发现自带的样式实在太简单,写css覆盖的话还很麻烦,夜间模式看的话很突兀。 所以我就稍微改了一下,只要它的数据,样式全由自己来写。