准备
站点配置文件中找到并修改如下配置：
inject:
head:
- # - <link rel="stylesheet" href="/xxx.css">
+ - <link rel="stylesheet" href="/css/custom.css">然后创建themes/butterfly/source/css/custom.css
自定义 Js 建议存到 themes/butterfly/source/js/custom/ 下面
部分页面美化[1]
所有页面毛玻璃效果
/*所有页面实现毛玻璃特效*/
#aside-content{
background: rgba(255,255,255,0);
}
#aside-content > .card-widget:first-child {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}
#aside-content .card-widget {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}
.layout > div:first-child:not(.recent-posts) {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}
#recent-posts > .recent-post-item {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}标题栏毛玻璃效果
/*标题栏*/
#page-header.nav-visible #nav {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(20px);
}搜索栏毛玻璃效果
/*搜索框美化*/
.search-dialog {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
border-radius: 0px;
}
#search-mask {
background: rgba(255,255,255,0);
}手机端毛玻璃效果
/*手机端毛玻璃优化*/
#sidebar #sidebar-menus.open {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}
#sidebar #menu-mask {
background: rgba(255,255,255,0);
}博客隐藏[2]
这个只影响了渲染，但是不影响生成器生成，所以如果你每页文章为10篇，而你第一页隐藏了4篇，那么首页第一页只会展示6篇。
修改主题
文件地址：themes/butterfly/layout/includes/mixins/post-ui.pug
注意，主要是添加了if article.hide !== true这一行，然后这一行后全部需要按下tab缩进一层。
mixin postUI(posts)
each article , index in page.posts.data
if article.hide !== true
.recent-post-item修改文章
在md文件的 Frontmatter 中添加hide: true
title: Ucore_lab1_add_makefile
cover: img/post/8702558_7.png
hide: true
abbrlink: d6beda40
date: 2022-04-22 09:36:04
description: Ucore_lab1 附录1 Makefile 分析
categories: 学习
tags:
- OS
- Ucore_lab
- 课程实验博客置顶轮播[3]
这里的是早前的版本，个人使用的是自己改的包，详见 >>这里<<
安装插件
站点根目录下执行：
npm install hexo-butterfly-swiper --save插件配置
站点配置文件下添加：
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法使用
在文章的 front_matter 中添加 swiper_index 配置项即可。
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---效果
页脚添加气泡效果[4]
新建 JS 文件
在 themes/butterfly/source/js/custom 下新建 bubble.js
/*
* 气泡效果
* 来源：https://wr0926.ml/p/cb7b45b6/#冒泡特效
*/
// 气泡
function bubble() {
$('#footer').circleMagic({
radius: 10,
density: .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: .3, clearOffset: .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 = .1 + Math.random() * d.clearOffset, t.scale = .1 + .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 = -1, 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);
// 调用气泡方法
bubble();因为用到了 jquery ，所以还得引入对应 Js 文件，我是采用的新建 custom/jquery.js ，内容太长这边就不写了。
Js 文件引入
站点配置文件里面的 inject 添加两个 Js 文件即可：
inject:
head:
- <link rel="stylesheet" href="/css/custom.css">
bottom:
+ - <script src="/js/custom/jquery.js"></script>
+ - <script src="/js/custom/bubble.js"></script>Butterfly 主题支持脚注
安装插件
原生主题是不支持脚注语法的：
content[^1]
[^1]:url所以如果要想支持脚注语法的话，得下插件才行：
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save反正就是把现有的 markdown 渲染卸了然后装上另一个 markdown 渲染。
注意！
markdown 渲染插件建议只有一个，不然可能会造成渲染冲突！
更换指针样式[5]
首先找到你所需要的指针文件（.cur后缀的，.ini后缀暂且还不支持）。
个人使用的素材包放在阿里盘，>>点此链接下载<<，提取码：
然后全局替换：
/* 全局默认鼠标指针 */
body,
html{
cursor: url('/cursor/GI cursor.cur'),auto !important;
}
body,
html :hover{
cursor: url('/cursor/GI cursor.cur'),auto !important;
}这个是默认只有一个鼠标样式的情况，如果你有多个，比较完整的则按照下面这个：
/**
* Date: 2022-05-24
* Author: 目棃
* Desc: 自定义鼠标指针样式
* Refer: https://akilar.top/posts/ebf20e02/
*/
/* 全局默认鼠标指针 */
body,
html{
cursor: url('/cursor/GI cursor.cur'),auto !important;
}
/* 悬停图片时的鼠标指针 */
img{
cursor: url('/cursor/GI cursor.cur'),auto !important;
}
/* 选择链接标签时的鼠标指针 */
a:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
}
/* 选中输入框时的鼠标指针 */
input:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
}
/* 悬停按钮时的鼠标指针 */
button:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
}
/* 悬停列表标签时的鼠标指针 */
i:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
}
/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
}
/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
}
/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover{
cursor: url('/cursor/GI cursor.cur'),auto;
} 评论
ValineWaline