Butterfly重装日记
前置
- 博客魔改有风险，记得备份如果博客魔改出问题了，可及时回滚
- 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，本处仅做一个总结，如有侵权请联系删除。
- 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。
- 本帖基于Butterfly主题进行魔改方案编写，因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。
npm镜像（淘宝镜像源）
1 | npm config set registry https://registry.npm.taobao.org |
一图流教程
点击查看教程
1.在[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：
1 | /* 页脚与头图透明 */ |
2.在主题配置文件[BlogRoot]_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）
1 | inject: |
3.在主题配置文件[BlogRoot]_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载
1 | # The banner image of home page |
4.部分人反映一图流改完了背景图也没了，那大概率是你之前没设置背景图。在主题配置文件[BlogRoot]_config.butterfly.yml文件中的background配置项设置背景图
1 | background: url(你的图片地址/链接) |
文章置顶滚动栏
点击查看教程
1.安装插件,在博客根目录[BlogRoot]下打开终端，运行以下指令：
1 | npm install hexo-butterfly-swiper --save |
2.添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加
1 | # hexo-butterfly-swiper |
3.使用方法:在文章的front_matter中添加swiper_index配置项即可。
1 | --- |
黑夜霓虹灯（纯CSS实现）
点击查看教程
1.在自定义的custom.css中添加如下代码，实现的原理就是关键帧线性插值，然后一直循环，这里默认是左上角标题、中间标题和副标题，还有文章页头的标题和信息有循环霓虹灯，菜单的文字实现起来要改一下源码，个人觉得没必要了，这样就够了，多了反而花里胡哨：
1 | /* 日间模式不生效 */ |
2.刷新页面即可看到效果，默认是夜间模式才开启的，因为白天模式开启霓虹灯会显得很奇怪
星空背景和流星特效
点击查看教程
1.在[BlogRoot]/source/js目录下新建universe.js，输入以下代码：
1 | function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()}; |
2.在[BlogRoot]/source/css目录下新建universe.css，输入以下代码：
1 | /* 背景宇宙星光 */ |
3.在主题配置文件_config.butterfly.yml的inject配置项中bottom下填入：
1 | inject: |
4.在主题配置文件_config.butterfly.yml的inject配置项中head下填入：
1 | inject: |
5.重新编译即可看到效果。
页面样式调节
点击查看教程
这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。
1.制以下代码进去自定义的custom.css文件
1 | :root { |
2.参数说明：
- –trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；
- –trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;
- –border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;
- –backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;
- 大家可以根据自己喜好进行调节，不用拘泥于我的样式！
3.记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件：4.重启项目即可看见效果：1
2
3inject:
head:
+ - <link rel="stylesheet" href="/css/custom.css">1
hexo cl; hexo s
文章H1~H6标题小风车转动效果
点击查看教程
1.修改主题配置文件_config.butterfly.yml文件的beautify配置项：
1 | beautify: |
2.在[BlogRoot]\source\css\custom.css 中加入以下代码，可以自己调节一下转速:
1 | /* 文章页H1-H6图标样式效果 */ |
3.在主题配置文件_config.butterfly.yml的inject配置项进行引入（不再赘述）。
顶部渐变色加载条
点击查看教程
- 新建[BlogRoot]\source\css\progress_bar.css文件，写入以下内容（或者你在[BlogRoot]\source\css\custom.css直接加也行，最后在配置文件记得引入即可）
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 4px;
left: 0;
right: 0;
height: 8px;
border-radius: 8px;
width: 7rem;
background: #eaecf2;
border: 1px #e3e8f7;
overflow: hidden
}
.pace-inactive .pace-progress {
opacity: 0;
transition: .3s ease-in
}
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 200px;
position: absolute;
z-index: 2000;
display: block;
top: 0;
right: 100%;
height: 100%;
width: 100%;
/* linear-gradient(to right, #3494e6, #ec6ead) */
background: linear-gradient(to right, #43cea2, #3866ca);
animation: gradient 2s ease infinite;
background-size: 200%
}
.pace.pace-inactive {
opacity: 0;
transition: .3s;
top: -8px
} - 在主题配置文件_config.butterfly.yml的inject配置项加入刚刚的css样式和必须的js依赖：
1
2
3
4
5
6
7inject:
head:
- xxx
- <link rel="stylesheet" href="/css/progress_bar.css" media="defer" onload="this.media='all'">
bottom:
- xxx
- <script async src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script>
Bilibili视频适配
点击查看教程
- 在[BlogRoot]\source\css\custom.css自定义样式的文件中引入如下代码（这是我的，你可以自行微调）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16/*哔哩哔哩视频适配*/
.aspect-ratio {
position: relative;
width: 90%;
height: auto;
padding-bottom: 75%;
margin: 3% auto;
text-align: center;
}
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 86%;
left: 0;
top: 0;
} - 直接复制插入你的 md 文章就行，修改里面的 aid 为你视频的 AV号：
1
2
3
4
5
6
7
8
9
10
11<div align=center class="aspect-ratio">
<iframe src="https://player.bilibili.com/player.html?aid=474023258&&page=1&as_wide=1&high_quality=1&danmaku=0"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
high_quality=1
danmaku=1
allowfullscreen="true">
</iframe>
</div>
快速添加友链
点击查看教程
- 新建文件[BlogRoot]\source\js\kslink.js，并写入如下代码：
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
32
33
34
35
36
37
38var leonus = {
linkCom: e => {
var t = document.querySelector(".el-textarea__inner");
"bf" == e ? (t.value = "```yml\n", t.value += "- name: \n link: \n avatar: \n descr: \n siteshot: ", t.value += "\n```", t.setSelectionRange(15, 15)) : (t.value = "站点名称：\n站点地址：\n头像链接：\n站点描述：\n站点截图：", t.setSelectionRange(5, 5)), t.focus()
},
owoBig: () => {
if (!document.getElementById("post-comment") || document.body.clientWidth < 768) return;
let e = 1,
t = "",
o = document.createElement("div"),
n = document.querySelector("body");
o.id = "owo-big", n.appendChild(o), new MutationObserver((l => {
for (let a = 0; a < l.length; a++) {
let i = l[a].addedNodes,
s = "";
if (2 == i.length && "OwO-body" == i[1].className) s = i[1];
else {
if (1 != i.length || "tk-comment" != i[0].className) continue;
s = i[0]
}
s.onmouseover = l => {
e && ("OwO-body" == s.className && "IMG" == l.target.tagName || "tk-owo-emotion" == l.target.className) && (e = 0, t = setTimeout((() => {
let e = 3 * l.path[0].clientHeight,
t = 3 * l.path[0].clientWidth,
a = l.x - l.offsetX - (t - l.path[0].clientWidth) / 2,
i = l.y - l.offsetY;
a + t > n.clientWidth && (a -= a + t - n.clientWidth + 10), a < 0 && (a = 10), o.style.cssText = `display:flex; height:${e}px; width:${t}px; left:${a}px; top:${i}px;`, o.innerHTML = `<img src="${l.target.src}">`
}), 300))
}, s.onmouseout = () => {
o.style.display = "none", e = 1, clearTimeout(t)
}
}
})).observe(document.getElementById("post-comment"), {
subtree: !0,
childList: !0
})
},
}; - 新建文件[BlogRoot]\source\css\kslink.css，并写入如下代码，颜色可以换成你自己喜欢的：
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
32
33
34
35
36
37
38/* 添加友链按钮 */
/* 快速填写格式 */
.addBtn {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.addBtn button {
transition: .2s;
display: flex;
margin: 5px auto;
color: var(--global-bg);
padding: 15px;
border-radius: 40px;
background: var(--search-result-title);
align-items: center;
}
button {
padding: 0;
outline: 0;
border: none;
background: 0 0;
cursor: pointer;
touch-action: manipulation;
}
.fa-solid, .fas {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.addBtn i {
font-size: 1.3rem;
margin-right: 10px;
}
.addBtn button:hover {
background: var(--theme-color);
color: #fff;
} - 为了节省DOM规模，仅在你的友链页面(例如[BlogRoot]\source\link\index.md)对应的md文件最后，引入以上两个文件以及定义按钮元素：
1
2
3<div class="addBtn"><button onclick="leonus.linkCom()"><i class="fa-solid fa-circle-plus"></i>快速申请 (默认样式)</button> <button onclick="leonus.linkCom("bf")"><i class="fa-solid fa-circle-plus"></i>快速申请 (Butterfly)</button></div>
<link rel="stylesheet" href="/css/kslink.css">
<script src="/js/kslink.js"></script> - 重启项目并进入友链页面底部，看看效果吧：
1
hexo cl; hexo s
樱花、落叶特效
点击查看教程
- 樱花特效：在主题配置文件_config.butterfly.yml的inject配置项中bottom下引入sakura.js即可
1
2//(如果你想在某个页面引入，直接在对应页面写上如下即可)
<script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>
1 | inject: |
- 落叶特效：在主题配置文件_config.butterfly.yml的inject配置项中bottom下引入sakura.js即可
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152var stop, staticx;
var img = new Image();
// 将引入的图片文件替换为你想要的即可
img.src = "https://img.cdn.nesxc.com/upload/wordpress/202202251325420webp";
function Sakura(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn
}
Sakura.prototype.draw = function (cxt) {
cxt.save();
var xc = 20 * this.s / 2;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
cxt.restore()
};
Sakura.prototype.update = function () {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
this.r = getRandom("fnr");
if (Math.random() > 0.4) {
this.x = getRandom("x");
this.y = 0;
this.s = getRandom("s");
this.r = getRandom("r")
} else {
this.x = window.innerWidth;
this.y = getRandom("y");
this.s = getRandom("s");
this.r = getRandom("r")
}
}
};
SakuraList = function () {
this.list = []
};
SakuraList.prototype.push = function (sakura) {
this.list.push(sakura)
};
SakuraList.prototype.update = function () {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update()
}
};
SakuraList.prototype.draw = function (cxt) {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt)
}
};
SakuraList.prototype.get = function (i) {
return this.list[i]
};
SakuraList.prototype.size = function () {
return this.list.length
};
function getRandom(option) {
var ret, random;
switch (option) {
case "x":
ret = Math.random() * window.innerWidth;
break;
case "y":
ret = Math.random() * window.innerHeight;
break;
case "s":
ret = Math.random();
break;
case "r":
ret = Math.random() * 4;
break;
case "fnx":
random = -0.5 + Math.random() * 1;
ret = function (x, y) {
return x + 0.5 * random - 1.7
};
break;
case "fny":
random = 1.5 + Math.random() * 0.7;
ret = function (x, y) {
return y + random
};
break;
case "fnr":
random = Math.random() * 0.03;
ret = function (r) {
return r + random
};
break
}
return ret
}
function startSakura() {
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
var canvas = document.createElement("canvas"),
cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
canvas.setAttribute("id", "canvas_sakura");
document.getElementsByTagName("body")[0].appendChild(canvas);
cxt = canvas.getContext("2d");
var sakuraList = new SakuraList();
for (var i = 0; i < 50; i++) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
randomX = getRandom("x");
randomY = getRandom("y");
randomR = getRandom("r");
randomS = getRandom("s");
randomFnx = getRandom("fnx");
randomFny = getRandom("fny");
randomFnR = getRandom("fnr");
sakura = new Sakura(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
});
sakura.draw(cxt);
sakuraList.push(sakura)
}
stop = requestAnimationFrame(function () {
cxt.clearRect(0, 0, canvas.width, canvas.height);
sakuraList.update();
sakuraList.draw(cxt);
stop = requestAnimationFrame(arguments.callee)
})
}
window.onresize = function () {
var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function () {
startSakura()
};
function stopp() {
if (staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(stop);
staticx = false
} else {
startSakura()
}
}; - 重启项目：
1
hexo cl; hexo s
信息卡片背景图
点击查看教程
在custom.css中加入以下样式：
1 | /* 个人信息卡片背景图 */ |
这里一个是白天模式，一个是夜间模式，可以根据自己的喜好选择图片，我的图片你可以下载下来
头像呼吸灯
点击查看教程
呼吸灯，这个可以用js实现，也可以用纯css的关键帧实现，貌似css的性能会高点，在custom.css添加如下代码，颜色和时间啥的大家可以根据自己的喜好调节，其实就是关键帧之间通过某个插值方法连续变样式而已，会这一个你就会DIY各种高大上的动画啦
1 | /* 头像呼吸灯 */ |
网站恶搞标题
点击查看教程
- 新建文件[BlogRoot]\source\js\title.js，写入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
//离开当前页面时标签显示内容
document.title = '👀跑哪里去了~';
clearTimeout(titleTime);
} else {
//返回当前页面时标签显示内容
document.title = '🐖抓到你啦～';
//两秒后变回正常标题
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
}); - 在主题配置文件_config.butterfly.yml引入该文件：
1
2
3inject:
bottom:
+ - <script async src="/js/title.js"></script> - 重启项目：
1
hexo cl; hexo s
