# 功能

通过自定义js函数为butterfly添加额外的扩展功能。

# 功能开发

原主题不具备的功能通过自定义js来实现。

Hexo的Butterfly魔改:随机网页跳转(无缝版) (opens new window) - 张洪Heo

提到随机网页跳转,大家就想到hexo-generator-random,我之前也是使用这个插件来做随机网页,这个插件的原理是生成一个html,只要访问这个html就可以进入随机的文章,但是这种方法有问题。

随机访问一篇文章的实现 (opens new window) - Leonus

随着文章慢慢的增多,后面的文章似乎就变的很少被看到,于是我想起来了这个随机访问一篇文章的功能。 果然,多浏览他人博客能出现更多的想法。

切换博客背景2.0版本——弹窗切换 (opens new window) - Leonus

昨天更新了一下切换背景页面的文章,然后在群里得到@Chuckle的建议:创建一个窗口方便切换 决定采纳,由于昨天晚上开始的比较晚,主要看了winbox的文档,今天早上起了个大早把其给肝出来了。

本来我是想自己写窗口的,但是写出来之后发现开关窗口啦,适配窗口啦之类的还要写很多,想起来就头疼。 于是就百度现成的插件,看上了这个GitHub项目:winbox 你也可以参考GitHub项目内的参数和api自行配制更多有趣的功能。

Butterfly魔改:国外网络访问检测,用js判断国外网络执行函数 (opens new window) - 张洪Heo

因为图床用的腾讯云cos,挂的cdn不支持外网访问(我也没打算支持),所以使用外网小伙伴无法访问任何图片,很多人以为是本站的图床挂了,然而可能是因为用户自己是用的外网。那么最好的方式就是告诉用户,你用的不是国内网进行访问。

如果你不需要外网访问你的网站,也可以利用这个js将网页跳转到其他页面或者其他操作。

Hexo魔改:Codepen项目组件移植教程,将Codepen项目移植到博客 (opens new window) - 张洪Heo

好久都没写魔改教程了,上次写的时候还是在上次。有一说一,近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度,大宽度带来的视觉沉浸感非常棒,但是会带来很多问题,例如之前的主题横向元素过少,以至于在横屏比较宽的场景下元素都会被拉伸得很大。所以这几次版本的迭代都是为了增加横向的元素,减少被拉伸感。

偶尔逛过我的博客的小伙伴应该看到了我在置顶区域新增了一个小组件。

网页插入一段文字的打字机效果,逐字出现循环回退删除动画Html (opens new window) - 张洪Heo

最近主题的更新是想让页面更加丰富起来,因为之前为了界面清爽删掉了很多功能,虽然一种程度上算是简约,但是对于个人博客来说不想只包含文章,还应该多一些信仰之力。所以为了高大上的逼格(狗头)所以分析了一下Butterfly主题的打字机效果。

Butterfly用的是typed.js来做的打字机效果。开箱即用,非常好用。

Butterfly主题下如何使用Openwrite的查看更多给公众号引流 (opens new window) - 张洪Heo

折腾一晚上,终于完成了~之前一直都有兼容性问题,折腾了几个小时搞定。因为网上也没有针对Butterfly的教程,整理的时候总是与Lazyload和pjax还有fancybox有兼容性问题。目前博客运行良好,遇到的问题都解决了。下面来说一下教程。

控制台输出字符画-程序员的浪漫 (opens new window) - hassanwong

不知道友友们逛 B 站时有没有注意到它控制台输出的字符画(正经人逛 B 站谁会按 F12),看完我瞬间嘴角上扬数秒。字符画如彩蛋般的出现在眼前,还能丰富网站的维度,一个优秀的网站也许在某个不起眼的角落也能带给你惊喜。

# 原生功能自定义

原主题具备的功能进行深度定制和优化。

pjax无法生效解决办法,butterfly主题维护你的pjax (opens new window) - 张洪Heo

之前自己的网页pjax时灵时不灵,真的是奇了怪了。研究了一下pjax的文档,发现很多东西都是用的有问题,因为最开始魔改页面的时候都没注意过pjax,所以留下了大量屎山代码。

这个文章可以更好的帮助你去魔改页面,并且保留pjax。

# 自定义功能定制

原主题不具备的第三方功能进行自定义定制。

51la统计美化 (opens new window) - Leonus

逛洪哥博客的时候看到了这个关于51la统计的文章,觉得还不错于是也跟着弄了一下。 但是在弄前端统计的时候,发现自带的样式实在太简单,写css覆盖的话还很麻烦,夜间模式看的话很突兀。 所以我就稍微改了一下,只要它的数据,样式全由自己来写。

最近更新时间: 2022-9-5