当您想要为您的 Hexo-theme-butterfly 博客添加JavaScript效果时，您可以通过编辑配置文件 _config.butterfly.yml 来实现。以下是添加 JavaScript 的基本步骤：
- 首先，您需要打开
_config.butterfly.yml文件，并找到其中的Inject部分。在这里，您可以指定要将JavaScript代码注入到博客页面的头部（head）和底部（bottom）位置。
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 在这里添加要注入到头部的CSS文件或代码
bottom:
# 在这里添加要注入到底部的JavaScript文件或代码- 添加线条吸附效果：
创建路径./source/js/canvas-nest.js，并将以下代码写入文件中：
// 动态吸附线条效果
!(function () {
// 获取或设置属性值的通用函数
function o(w, v, i) {
return w.getAttribute(v) || i;
}
// 根据标签名获取元素集合
function j(i) {
return document.getElementsByTagName(i);
}
// 获取配置信息
function l() {
var i = j("script"),
w = i.length,
v = i[w - 1];
return {
l: w,
z: o(v, "zIndex", -1),
o: o(v, "opacity", 0.5),
c: o(v, "color", "156,193,182"),
n: o(v, "count", 99),
};
}
// 设置画布大小
function k() {
((r = u.width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth),
(n = u.height =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight));
}
// 清除画布并绘制粒子
function b() {
e.clearRect(0, 0, r, n);
var w = [f].concat(t);
var x, v, A, B, z, y;
t.forEach(function (i) {
((i.x += i.xa),
(i.y += i.ya),
(i.xa *= i.x > r || i.x < 0 ? -1 : 1),
(i.ya *= i.y > n || i.y < 0 ? -1 : 1),
e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1));
for (v = 0; v < w.length; v++) {
x = w[v];
if (i !== x && null !== x.x && null !== x.y) {
((B = i.x - x.x), (z = i.y - x.y), (y = B * B + z * z));
if (y < x.max) {
if (x === f && y >= x.max / 2) {
((i.x -= 0.03 * B), (i.y -= 0.03 * z));
}
((A = (x.max - y) / x.max),
e.beginPath(),
(e.lineWidth = A / 2),
(e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")"),
e.moveTo(i.x, i.y),
e.lineTo(x.x, x.y),
e.stroke());
}
}
}
w.splice(w.indexOf(i), 1);
});
m(b);
}
// 创建画布并初始化
var u = document.createElement("canvas"),
s = l(),
c = "c_n" + s.l,
e = u.getContext("2d"),
r,
n,
m =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (i) {
window.setTimeout(i, 1000 / 45);
},
a = Math.random,
f = { x: null, y: null, max: 20000 };
u.id = c;
u.style.cssText =
"position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
j("body")[0].appendChild(u);
k();
window.onresize = k;
// 鼠标点击事件
window.onmousedown = function (i) {
i = i || window.event;
f.clicked = true;
};
// 鼠标移动事件
window.onmousemove = function (i) {
i = i || window.event;
if (f.clicked) {
((f.x = i.clientX), (f.y = i.clientY));
}
// f.x = i.clientX,
// f.y = i.clientY
};
// 鼠标释放事件
window.onmouseup = function () {
f.clicked = false;
f.x = null;
f.y = null;
};
// 鼠标抬起事件
window.onmouseout = function () {
((f.x = null), (f.y = null));
};
for (var t = [], p = 0; s.n > p; p++) {
var h = a() * r,
g = a() * n,
q = 2 * a() - 1,
d = 2 * a() - 1;
t.push({ x: h, y: g, xa: q, ya: d, max: 6000 });
}
setTimeout(function () {
b();
}, 100);
})();线条吸附这里我嫌他太麻烦了，所以稍微修改了以下，当一直按着才吸附，抬起释放，这样就不会看着看着跑神啦~
然后，在配置文件的对应 bottom 位置引入该文件：
- <script src="/config/js/canvas-nest.js" async></script> # 自己引入
- <script src="https://fastly.jsdelivr.net/gh/willow-god/willow-god.github.io/config/js/canvas-nest.js" async></script> # 我的- 添加页脚养鱼及自定义页脚：
创建路径./source/js/foot.js，并将以下代码写入文件中：
// 页脚养鱼
fish();
function fish() {
return (
$("#footer-wrap").css({
position: "absolute",
"text-align": "center",
top: -55,
right: 0,
left: 0,
bottom: 0,
}),
$("footer").append(
'<div class="container" id="jsi-flying-fish-container"></div>'
),
$("body").append(
'<script src="https://fastly.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>'
),
this
);
}
// 动态心跳，更改自己的名称
$(document).ready(function (e) {
$(".copyright").html(
'©2021-2024 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By Willow-God'
);
});
$(document).ready(function (e) {
show_date_time();
});
//本站运行时间，更改自己建立站点的时间
function show_date_time() {
$(".framework-info").html(
'小破站已经苟且偷生<span id="span_dt_dt" style="color: #fff;"></span>'
);
window.setTimeout("show_date_time()", 1000);
BirthDay = new Date("12/12/2021 01:27:36");
today = new Date();
timeold = today.getTime() - BirthDay.getTime();
sectimeold = timeold / 1000;
secondsold = Math.floor(sectimeold);
msPerDay = 24 * 60 * 60 * 1000;
e_daysold = timeold / msPerDay;
daysold = Math.floor(e_daysold);
e_hrsold = (e_daysold - daysold) * 24;
hrsold = Math.floor(e_hrsold);
e_minsold = (e_hrsold - hrsold) * 60;
minsold = Math.floor((e_hrsold - hrsold) * 60);
seconds = Math.floor((e_minsold - minsold) * 60);
span_dt_dt.innerHTML =
"<font style=color:#afb4db>" +
daysold +
"</font> 天 <font style=color:#f391a9>" +
hrsold +
"</font> 时 <font style=color:#fdb933>" +
minsold +
"</font> 分 <font style=color:#a3cf62>" +
seconds +
"</font> 秒";
}然后，在配置文件的对应位置引入该文件：
- <script src="/config/js/foot.js" async></script> # 自己引入- 添加快乐的网页标题：
创建路径./source/js/happy-title.js，并将以下代码写入文件中：
//动态标题
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);
}
});然后，在配置文件的对应位置引入该文件：
- <script src="/config/js/happy-title.js" async></script> # 自己引入通过以上步骤，您就可以在您的Hexo-theme-butterfly博客中添加JavaScript效果了。您还可以继续探索其他自定义功能，如右键菜单、背景虚化等，以丰富您的博客内容。