准备

站点配置文件中找到并修改如下配置：

1
2
3
4
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]

所有页面毛玻璃效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*所有页面实现毛玻璃特效*/
#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);
}

标题栏毛玻璃效果

1
2
3
4
5
/*标题栏*/
#page-header.nav-visible #nav {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20px);
}

搜索栏毛玻璃效果

1
2
3
4
5
6
7
8
9
10
/*搜索框美化*/
.search-dialog {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    border-radius: 0px;
}

#search-mask {
    background: rgba(255,255,255,0);
}

手机端毛玻璃效果

1
2
3
4
5
6
7
8
9
/*手机端毛玻璃优化*/
#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缩进一层。

1
2
3
4
mixin postUI(posts)
  each article , index in page.posts.data
    if article.hide !== true
      .recent-post-item

修改文章

在md文件的 Frontmatter 中添加hide: true

1
2
3
4
5
6
7
8
9
10
11
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]

这里的是早前的版本，个人使用的是自己改的包，详见 >>这里<<

安装插件

站点根目录下执行：

1
npm install hexo-butterfly-swiper --save

插件配置

站点配置文件下添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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 配置项即可。

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

效果

image-20220422105216221

页脚添加气泡效果[4]

新建 JS 文件

在 themes/butterfly/source/js/custom 下新建 bubble.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
/*
 * 气泡效果
 * 来源：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 文件即可：

1
2
3
4
5
6
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 主题支持脚注

安装插件

原生主题是不支持脚注语法的：

1
2
3
content[^1] 

[^1]:url

所以如果要想支持脚注语法的话，得下插件才行：

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

反正就是把现有的 markdown 渲染卸了然后装上另一个 markdown 渲染。

注意！

markdown 渲染插件建议只有一个，不然可能会造成渲染冲突！

更换指针样式[5]

首先找到你所需要的指针文件（.cur后缀的，.ini后缀暂且还不支持）。

个人使用的素材包放在阿里盘，>>点此链接下载<<，提取码：en78，2022-09-28之前都能下。

然后全局替换：

1
2
3
4
5
6
7
8
9
10
/* 全局默认鼠标指针 */
body,
html{
  cursor: url('/cursor/GI cursor.cur'),auto !important;
}

body,
html :hover{
  cursor: url('/cursor/GI cursor.cur'),auto !important;
}

这个是默认只有一个鼠标样式的情况，如果你有多个，比较完整的则按照下面这个：

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
/**
 * 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;
}

  1. Butterfly 主题美化 - 页面毛玻璃效果 | 面朝大海 春暖花开 (uniqueyou.github.io) ↩︎

  2. Hexo的Butterfly下如何隐藏部分文章不在首页显示 | 张洪Heo (zhheo.com) ↩︎

  3. Swiper Bar | Akilar の糖果屋 ↩︎

  4. Hexo Butterfly主题页面美化 | 时过境迁Wayne博客 (wr0926.ml) ↩︎

  5. Custom Beautify | Akilarの糖果屋 ↩︎