前言

记录自己使用butterfly主题过程中自定义美化过的地方
Hexo版本:5.1.1
Butterfly:3.1.0


气泡特效

在博客主题目录 \source\js 下新建 butterfly_beautify.js 文件(名称随意)复制一下代码保存

// 气泡
function qipao() {
$("#page-header").circleMagic({
radius: 10,
density: 0.2,
color: "rgba(255,255,255,.4)",
clearOffset: 0.99,
});
}
!(function (p) {
p.fn.circleMagic = function (t) {
var o,
a,
n,
r,
e = !0,
i = [],
d = p.extend(
{
color: "rgba(255,0,0,.5)",
radius: 10,
density: 0.3,
clearOffset: 0.2,
},
t
),
l = this[0];

function c() {
e = !(document.body.scrollTop > a);
}

function s() {
(o = l.clientWidth),
(a = l.clientHeight),
(l.height = a + "px"),
(n.width = o),
(n.height = a);
}

function h() {
if (e) for (var t in (r.clearRect(0, 0, o, a), i)) i[t].draw();
requestAnimationFrame(h);
}

function f() {
var t = this;

function e() {
(t.pos.x = Math.random() * o),
(t.pos.y = a + 100 * Math.random()),
(t.alpha = 0.1 + Math.random() * d.clearOffset),
(t.scale = 0.1 + 0.3 * Math.random()),
(t.speed = Math.random()),
"random" === d.color
? (t.color =
"rgba(" +
Math.floor(255 * Math.random()) +
", " +
Math.floor(0 * Math.random()) +
", " +
Math.floor(0 * Math.random()) +
", " +
Math.random().toPrecision(2) +
")")
: (t.color = d.color);
}
(t.pos = {}),
e(),
(this.draw = function () {
t.alpha <= 0 && e(),
(t.pos.y -= t.speed),
(t.alpha -= 5e-4),
r.beginPath(),
r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1),
(r.fillStyle = t.color),
r.fill(),
r.closePath();
});
}
!(function () {
(o = l.offsetWidth),
(a = l.offsetHeight),
(function () {
var t = document.createElement("canvas");
(t.id = "canvas"),
(t.style.top = 0),
(t.style.zIndex = 0),
(t.style.position = "absolute"),
l.appendChild(t),
(t.parentElement.style.overflow = "hidden");
})(),
((n = document.getElementById("canvas")).width = o),
(n.height = a),
(r = n.getContext("2d"));
for (var t = 0; t < o * d.density; t++) {
var e = new f();
i.push(e);
}
h();
})(),
window.addEventListener("scroll", c, !1),
window.addEventListener("resize", s, !1);
};
})(jQuery);
// 调用气泡方法
qipao();

因为我开启了 pjax 放在主题配置文件中请求页面时只会加载一次,需要放到 pjax 的加载区域
进入博客主题目录下 \layout\includes 文件夹 打开 additional-js.pug 将前面的js路径用 pug 格式放在 .js-pjax 下面(我的js路径使用了github外链)

.js-pjax
script(src='https://cdn.jsdelivr.net/gh/M7-Arin/Static-Resource/js/butterfly_beautify.js')
if is_home() && theme.subtitle.enable
include ./third-party/subtitle.pug

脚部增加跳动的心

编辑博客主题目录下 \layout\includes\footer.pug 文件(可能会略有不同)
将下面的内容

if theme.footer.owner.since && theme.footer.owner.since != nowYear
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
else
.copyright!= `&copy;${nowYear} By ${config.author}`

改为

if theme.footer.owner.since && theme.footer.owner.since != nowYear
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
else
.copyright!= `&copy;${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`

下最下方插入如下代码, 注意不要缩进

<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css"></head>

滚动条样式

在博客主题目录 \source\css下新建 background.css 文件(名称随意)
将下面的css放入新建的css文件中

::-webkit-scrollbar-track {
background-color: rgba(73, 177, 245, 0.2);
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent
);
height: 32px;
border-radius: 2em;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-moz-selection {
color: #fff;
background-color: #49b1f5;
}

修改博客根目录下的 _config.butterfly.yml 文件,在 inject bottom 下引用css文件路径

- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/M7-Arin/Static-Resource/css/background.css">