1. 页面底部footer跳动的心

1.1 步骤

编辑C:\blog\themes\Butterfly\layout\includes\footer.pug文件

1.将以下内容：

1
©${theme.footer.owner.since} - ${nowYear} By ${config.author}

改为：

1
&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

2.将以下内容：

1
&copy;${nowYear} By ${config.author}

改为：

1
&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

3.将以下内容添加到footer.pug文件的最后一行：

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

1.2 效果图

2. 修改标题样式

2.1 步骤

1.在C:\blog\source\css文件下新建 css 文件，并命名为 custom.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
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
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before,
#post .post-outdate-notice:before,
.fontawesomeIcon,
.note:not(.no-icon)::before,
hr:before {
    display: inline-block;
    font-weight: 600;
    font-style: normal;
    font-variant: normal;
    font-family: 'Font Awesome 5 Free';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased
}
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
    position: absolute;
    color: #f47466;
    /* 回形针 */
    content: '\f0c1';  
    line-height: 1;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out;
    /* 若要使用风车效果，请去掉下面的注释 */
    /* content: '\f863'; 
    animation: avatar_turn_around 1s linear infinite; */
}
#article-container h1 {
    padding-left: 1.4rem
}

#article-container h1 code {
    font-size: 1rem
}

#article-container h1:before {
    margin-left: -1.3rem;
    top: calc(50% - .5rem);
    font-size: 1rem
}

#article-container h1:hover {
    padding-left: 1.6rem
}

#article-container h2 {
    padding-left: 1.3rem
}

#article-container h2 code {
    font-size: .9rem
}

#article-container h2:before {
    margin-left: -1.4rem;
    top: calc(50% - .45rem);
    font-size: .9rem
}

#article-container h2:hover {
    padding-left: 1.5rem
}

#article-container h3 {
    padding-left: 1.2rem
}

#article-container h3 code {
    font-size: .8rem;
    top: calc(50% - .4rem);

}

#article-container h3:before {
    margin-left: -1.2rem;
    top: calc(50% - .4rem);
    font-size: .8rem
}

#article-container h3:hover {
    padding-left: 1.4rem
}

#article-container h4 {
    padding-left: 1.1rem
}

#article-container h4 code {
    font-size: .7rem
}

#article-container h4:before {
    margin-left: -1rem;
    top: calc(50% - .35rem);
    font-size: .7rem
}

#article-container h4:hover {
    padding-left: 1.3rem
}

#article-container h5 {
    padding-left: 1rem
}

#article-container h5 code {
    font-size: .6rem
}

#article-container h5:before {
    margin-left: -.8rem;
    top: calc(50% - .3rem);
    font-size: .6rem
}

#article-container h5:hover {
    padding-left: 1.2rem
}

#article-container h6 {
    padding-left: 1rem
}

#article-container h6 code {
    font-size: .6rem
}

#article-container h6:before {
    margin-left: -.8rem;
    top: calc(50% - .3rem);
    font-size: .6rem
}

#article-container h6:hover {
    padding-left: 1.2rem
}

2.在主题配置文件_config.butterfly.yml中的以下位置引入刚刚创建的css文件

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
	 - <link rel="stylesheet" href="/css/custom.css">

2.2 效果

3. 哔哩哔哩番剧页面插件

3.1 步骤

1.安装依赖

1
npm install hexo-bilibili-bangumi --save

2.修改站点配置文件_config.yml，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
bangumi: # 追番设置
  enable: true
  path:
  vmid: 483341512
  title: '生命不息，追番不止！'
  quote: 'Where there is life, there is life.'
  show: 1
  lazyload: false
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value

配置说明：

  • enable: 是否启用
  • vmid: 哔哩哔哩番剧页面的 vmid(uid), 如何获取？
  • title: 该页面的标题
  • quote: 写在页面开头的一段话，支持 html 语法
  • show: 初始显示页面：0: 想看 , 1: 在看 , 2: 看过，默认为 1
  • loading: 图片加载完成前的 loading 图片

其中，vmid需要配置自己b站的一个uid，登录哔哩哔哩后前往 https://space.bilibili.com/xxx，网址最后的一串数字就是你的uid。

3.刷新追番页

每次在hexo g之后，就可以执行hexo bangumi -u对追番页进行刷新

3.2 效果

4. 主页冒泡特效

4.1 步骤

1.在C:\blog\themes\Butterfly\source\js目录下创建一个chocolate.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
/*
 * @Author: tzy1997
 */
$(function() {
    // 气泡
    function bubble() {
        $('#page-header').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 = 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);
    // 调用气泡方法
    bubble();
})

2.在主题配置文件_config.butterfly.yml中，添加jquery.min.js和chocolate.js，代码如下：

1
2
3
4
5
6
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
    - <script data-pjax defer src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"></script>

4.2 效果

5. 全局吸底APlayer

5.1 步骤

1.在博客根目录，打开cmd命令窗口，在终端执行以下命令，下载插件：

1
npm install hexo-tag-aplayer --save

2.修改站点配置文件_config.yml，配置如下：

1
2
3
aplayer:
  meting: true
  asset_inject: false

3.修改主题配置文件_config.butterfly.yml，将enable和per_page都设为true，因为全局(每个页面)都插入 aplayer 和 meting 资源，所以需要防止重复加载。

1
2
3
aplayerInject:
  enable: true
  per_page: true

4.在主题配置文件_config.butterfly.yml中加入如下代码，在下面代码中，需要修改的是data-id和data-server。data-server=”netease”表示使用的播放器是网易云音乐；data-id=”12221117397”的12221117397是我的网易云音乐的一个歌单id。

1
2
3
4
5
inject:
  bottom:
	#载入音乐aplayer
	- <div class="aplayer no-destroy" data-id="12221117397" data-server="netease" data-type="playlist"   data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>

5.如果你想切换页面时，音乐不会中断。可将主题配置文件_config.butterfly.yml的 “pjax” 设为 “true” 。

1
2
3
pjax:
  enable: true
  exclude:

5.2 效果

6. 音乐背景

6.1 步骤

1.创建音乐界面，在blog的根目录下打开终端，执行hexo n music，在C:\blog\source\music\index.md文件里添加如下内容：

1
2
3
4
5
6
7
title: music
date: 2024-07-17 22:29:18
type: "music"
top_img: false
aplayer: true
comments: false
aside: false

2.创建页面，在文件夹C:\blog\themes\Butterfly\layout\includes\page下新建music.pug文件，这样方便后续可以使用 css 将页面(page)本身的样式给去除。其中id可以填写自己的歌单id，server是对应的音乐平台。

1
2
#anMusic-page
  meting-js(id="12221117397" server="netease" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list")

3.修改blog\themes\Butterfly\layout\page.pug文件夹内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#page
	if top_img === false  -----> 删除这行
    if top_img === false && page.type != 'music'  -----> 添加这行
      h1.page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      when 'music'  -----添加这行
        include includes/page/music.pug  -----> 添加这行
      default
        include includes/page/default-page.pug

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

4.创建背景元素，修改blog\themes\Butterfly\layout\includes\layout.pug文件内容：

1
2
3
4
body
    if theme.background
      #web_bg
      #an_music_bg  -----> 添加这行

5.在文件blog\source\js\anzhiyu.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
var anzhiyu = {
  // 音乐节目切换背景
  changeMusicBg: function (isChangeBg = true) {
    if (window.location.pathname != "/music/") {
      return;
    }
    const anMusicBg = document.getElementById("an_music_bg");

    if (isChangeBg) {
      // player listswitch 会进入此处
      const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
      anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
    } else {
      // 第一次进入，绑定事件，改背景
      let timer = setInterval(() => {
        const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
        // 确保player加载完成
        console.info(anMusicBg);
        if (musiccover) {
          clearInterval(timer);
          anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
          // 绑定事件
          anzhiyu.addEventListenerChangeMusicBg();

          // 暂停nav的音乐
          if (
            document.querySelector("#nav-music meting-js").aplayer &&
            !document.querySelector("#nav-music meting-js").aplayer.audio.paused
          ) {
            anzhiyu.musicToggle();
          }
        }
      }, 100);
    }
  },
  addEventListenerChangeMusicBg: function () {
    const anMusicPage = document.getElementById("anMusic-page");
    const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu");

    anMusicPage.querySelector("meting-js").aplayer.on("loadeddata", function () {
      anzhiyu.changeMusicBg();
      console.info("player loadeddata");
    });

    aplayerIconMenu.addEventListener("click", function () {
      document.getElementById("menu-mask").style.display = "block";
      document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show";
    });

    document.getElementById("menu-mask").addEventListener("click", function () {
      if (window.location.pathname != "/music/") return;
      anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide");
    });
  },
};
// 调用
anzhiyu.changeMusicBg(false);

6.在文件blog\source\css\music.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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
/*全局样式*/
#page:has(#anMusic-page) {
  border: 0;     /* 移除页面的边框 */
  box-shadow: none !important;             /* 移除页面的阴影 */
  padding: 0 !important;                           /* 移除页面的内边距 */
  background: transparent !important;     /* 将页面背景设为透明 */
}

/*背景样式*/
#an_music_bg {
  display: none;          /* 默认隐藏背景 */
  filter: blur(63px);      /* 添加模糊效果 */
  opacity: 0.6;              /* 设置背景的不透明度 */
  position: fixed;         /* 使背景固定 */
  z-index: -999;            /* 将背景放置在最底层 */
  background-attachment: local;            /* 背景附着在本地视口 */
  background-position: center center;       /* 背景图居中对齐 */
  background-size: cover;                          /* 背景图覆盖整个容器 */
  background-repeat: no-repeat;             /* 背景图不重复 */
  width: 200%;                                              /* 背景宽度设为原来的两倍 */
  height: 200%;                                              /* 背景高度设为原来的两倍 */
  top: -50%;                                                   /* 背景从顶部开始偏移 */
  left: -50%;                                                   /* 背景从左侧开始偏移 */
  transform: rotate(0deg);                           /* 不旋转背景 */
}
body:has(#anMusic-page) #an_music_bg {
  display: block;                               /* 包含 #anMusic-page 时显示背景 */
}
body:has(#anMusic-page) {
  background: rgb(255,198,115);      /* 包含 #anMusic-page 时设置背景色 */
}

/*APlayer 样式*/
#anMusic-page meting-js .aplayer {
  display: flex;                                /* 使播放器使用 Flexbox 布局 */
  flex-direction: row-reverse;       /* 元素按行反向排列 */
  background: rgba(0, 0, 0, 0);     /* 设置背景为透明 */
  border: none;                               /* 移除边框 */
  box-shadow: none;                     /* 移除阴影 */
}

body:has(#anMusic-page) #web_bg {
  display: none;
}
body:has(#anMusic-page) #footer,
body:has(#anMusic-page) #nav-music {
  display: none;                        /* 隐藏网页背景、页脚和导航音乐 */
}

/*APlayer 详细样式*/
#anMusic-page .aplayer-body {
  width: 40%;                /* 设置播放器主体的宽度 */
  height: 75vh;              /* 设置播放器主体的高度 */
}
#anMusic-page ol > li:hover {
  background: #ffffff33;       /* 悬停时设置项目背景色 */
  border-radius: 6px;            /* 设置圆角 */
}
#anMusic-page .aplayer-pic {
  float: none;                        /* 不浮动 */
  width: 180px;                     /* 设置封面宽度 */
  height: 180px;                   /* 设置封面高度 */
  border-radius: 12px;         /* 设置封面圆角 */
  margin: auto;                    /* 设置居中对齐 */
  left: 0;                                 /* 左侧对齐 */
  right: 0;                               /* 右侧对齐 */
}
#anMusic-page .aplayer-info {
  margin: 0 20px 0 20px;          /* 设置信息区域的外边距 */
  border-bottom: none;          /* 移除下边框 */
}
#anMusic-page .aplayer-info .aplayer-music {
  text-align: center;                    /* 设置文字居中对齐 */
  height: auto;                             /* 高度自适应 */
  margin: 15px;                            /* 设置外边距 */
}
#anMusic-page .aplayer-info .aplayer-music .aplayer-author,
#anMusic-page .aplayer-info .aplayer-music .aplayer-title {
  font-size: 2rem;                  /* 设置字体大小 */
  font-weight: 700;                /* 设置字体粗细 */
  color: #fff;                            /* 设置字体颜色 */
}
#anMusic-page .aplayer-info .aplayer-lrc {
  height: 800%;                               /* 设置歌词区域高度 */
  margin-top: 80px;                       /* 设置顶部外边距 */
  mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #0000, #0000);    /* 设置渐变遮罩 */
}
#anMusic-page .aplayer-info .aplayer-lrc p {
  font-size: 15px;                  /* 设置歌词字体大小 */
  color: #fff;                           /* 设置歌词字体颜色 */
}
#anMusic-page .aplayer .aplayer-lrc:after,
#anMusic-page .aplayer .aplayer-lrc:before {
  display: none;                     /* 隐藏伪元素 */
}

/* 控制器样式 */
#anMusic-page .aplayer-info .aplayer-controller {
  position: fixed;                 /* 固定位置 */
  max-width: 1500px;          /* 设置最大宽度 */
  margin: auto;                    /* 居中对齐 */
  left: 0;                                  /* 左侧对齐 */
  right: 0;                              /* 右侧对齐 */
  bottom: 50px;                   /* 设置底部外边距 */
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  margin: 0 160px 0 150px;       /* 设置进度条包裹元素的外边距 */
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-played {
  background: var(--anzhiyu-white) !important;       /* 设置已播放部分的背景色 */
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-thumb {
  -webkit-transform: none;          /* 取消缩放 */
  transform: none;                          /* 取消缩放 */
  background: #fff !important;     /* 设置背景色 */
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back,
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward,
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play {
  display: inline;                /* 显示图标 */
  position: fixed;               /* 固定位置 */
}
#anMusic-page .aplayer-info .aplayer-time {
  position: absolute;        /* 绝对定位 */
  width: 100%;                   /* 设置宽度 */
  bottom: 21px;                /* 设置底部外边距 */
  height: 0;                        /* 设置高度 */
  display: flex;                  /* 使用 Flexbox 布局 */
  justify-content: flex-end;        /* 右对齐 */
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner {
  margin-right: 18px;         /* 设置右外边距 */
  margin-top: -8px;           /* 设置顶部外边距 */
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back {
  position: absolute;            /* 绝对定位 */
  left: 0;                                  /* 左对齐 */
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play {
  position: absolute;              /* 绝对定位 */
  left: 40px;                              /* 左外边距 */
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward {
  position: absolute;               /* 绝对定位 */
  left: 80px;                                /* 左外边距 */
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon {
  width: 2rem;                          /* 设置图标宽度 */
  height: 2rem;                        /* 设置图标高度 */
  margin-left: 15px;                 /* 设置左外边距 */
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-menu {
  display: none;                        /* 隐藏菜单图标 */
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon path {
  fill: var(--anzhiyu-white);        /* 设置图标路径的填充色 */
  opacity: 0.8;                              /* 设置透明度 */
}

/*歌曲列表样式*/
#anMusic-page .aplayer-list {
  width: 60%;                                      /* 设置列表宽度 */
  max-height: none !important;       /* 取消最大高度限制 */
  height: 100%;                                   /* 设置列表高度 */
}
#anMusic-page ol {
  max-height: 75vh !important;       /* 设置最大高度 */
  padding-right: 25px;                      /* 设置右内边距 */
}
#anMusic-page ol > li {
  border-top: 1px solid transparent;     /* 设置项目的顶部边框 */
  font-size: 14px;                                      /* 设置字体大小 */
}
#anMusic-page ol > li.aplayer-list-light {
  background: rgb(255 255 255 / 20%);      /* 设置背景色 */
  border-radius: 6px;                       /* 设置圆角*/
}
#anMusic-page ol > li span {
  color: var(--anzhiyu-white);       /* 设置列表项中的文本颜色为自定义的白色 */
}
#anMusic-page ol > li.aplayer-list-light .aplayer-list-cur {
  display: none;         /* 隐藏当前播放的标记 */
}
#anMusic-page ol > li span.aplayer-list-author {
  opacity: 0.6;            /* 设置作者名的透明度为 60% */
}

/* 导航栏样式 */
.page:has(#anMusic-page) #nav {
  backdrop-filter: none !important;       /* 取消背景滤镜 */
  background: 0 0 !important;                 /* 取消背景颜色 */
  border-bottom: none !important;       /* 移除底部边框 */
}
.page:has(#anMusic-page) #page-header.not-top-img #nav a,
.page:has(#anMusic-page) #page-header #nav .back-home-button {
  color: var(--anzhiyu-white);             /* 设置导航栏链接和返回首页按钮的文本颜色为自定义的白色 */
}
body:has(#anMusic-page) .s-sticker div {
  color: var(--anzhiyu-white) !important;       /* 设置 .s-sticker 中 div 元素的文本颜色为自定义的白色 */
}
body:has(#anMusic-page) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
  margin-right: 15px;          /* 设置循环图标的右边距 */
}
[data-theme="dark"] .page:has(#anMusic-page) #page-header:before {
  background-color: transparent;      /* 设置暗色主题下页面头部的伪元素背景颜色为透明 */
}

/* **** 移动端样式 ***** */
@media screen and (max-width: 768px) {
  body:has(#anMusic-page) #rightside {
    display: none;                /* 在移动端隐藏右侧侧边栏 */
  }
  body:has(#anMusic-page) #content-inner,
  body:has(#anMusic-page) #page {
    z-index: auto;               /* 设置内容和页面的 z-index 为自动 */
  }
  /* 歌曲列表 */
  #anMusic-page .aplayer-list {
    position: fixed;            /* 固定位置 */
    z-index: 1002;              /* 设置 z-index 为 1002，以便在其他元素之上 */
    width: 100%;                /* 宽度为 100% */
    bottom: -76%;             /* 设置底部位置偏移 */
    left: 0;                            /* 左侧对齐 */
    background: var(--sidebar-bg);         /* 设置背景色为自定义侧边栏背景色 */
    height: auto;                                          /* 高度自动调整 */
    border-radius: 15px 15px 0px 0px;       /* 设置圆角 */
    padding: 15px 0px;                                /* 设置内边距 */
  }
  #anMusic-page .aplayer-list.aplayer-list-hide {
    bottom: 0% !important;                   /* 隐藏列表时将底部位置调整为 0% */
  }
  #anMusic-page ol {
    max-height: 60vh !important;            /* 设置最大高度为视口高度的 60% */
    padding-right: 0px;                            /* 移除右侧内边距 */
  }
  #anMusic-page ol > li {
    display: flex;                                         /* 使用 Flexbox 布局 */
    margin: 0 10px;                                    /* 设置左右外边距 */
  }
  #anMusic-page ol > li span {
    color: var(--font-color);                      /* 设置列表项文本颜色为自定义的字体颜色 */
  }
  #anMusic-page ol > li span.aplayer-list-title {
    width: 30%;                                           /* 设置标题宽度为 30% */
  }
  #anMusic-page ol > li.aplayer-list-light {
    background: #33a673;                        /* 设置选中列表项的背景色 */
    padding: 5px 20px;                             /* 设置内边距 */
    border-radius: 10px;                          /* 设置圆角 */
  }
  #anMusic-page ol > li.aplayer-list-light span {
    color: #fff;                                          /* 设置选中列表项的文本颜色为白色 */
  }
  #anMusic-page ol > li span.aplayer-list-title {
    max-width: 55%;                     /* 设置标题最大宽度 */
    width: auto;                             /* 宽度自动调整 */
    display: -webkit-box;             /* 使用 WebKit 特有的 Flexbox 布局 */
    -webkit-line-clamp: 1;            /* 限制文本为一行 */
    overflow: hidden;                    /* 隐藏超出的文本 */
    -webkit-box-orient: vertical;      /* 设置盒子布局方向为纵向 */
  }
  #anMusic-page ol > li span.aplayer-list-author {
    position: absolute;                  /* 绝对定位 */
    right: 10px;                               /* 设置右边距 */
    width: auto;                              /* 宽度自动调整 */
    max-width: 35%;                      /* 设置最大宽度 */
    display: -webkit-box;               /* 使用 WebKit 特有的 Flexbox 布局 */
    -webkit-line-clamp: 1;             /* 限制文本为一行 */
    overflow: hidden;                     /* 隐藏超出的文本 */
    -webkit-box-orient: vertical;    /* 设置盒子布局方向为纵向 */
  }
  #anMusic-page ol > li.aplayer-list-light span.aplayer-list-author {
    right: 15px;                              /* 调整选中列表项中作者名的右边距 */
  }
  /* 歌词信息 */
  #anMusic-page .aplayer-body {
    width: 100%;                             /* 设置宽度为 100% */
    position: fixed;                          /* 固定位置 */
    margin: auto;                            /* 居中对齐 */
    left: 0;                                  /* 左侧对齐 */
    right: 0;                          /* 右侧对齐 */
    top: 100px;                      /* 设置顶部位置 */
  }
  #anMusic-page .aplayer-info .aplayer-lrc {
    margin-top: 40px;             /* 设置顶部外边距 */
    height: auto;                      /* 高度自动调整 */
    max-height: 200%;            /* 设置最大高度为 200% */
    min-height: 100%;             /* 设置最小高度为 100% */
    mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #0000, #0000);  * 设置渐变遮罩 */
  }
  #anMusic-page .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
    color: #33a673;               /* 设置当前歌词的颜色 */
  }
  /* 控制按键和进度条 */
  #anMusic-page .aplayer-info .aplayer-controller {
    width: 100%;                /* 设置宽度为 100% */
    bottom: 100px;           /* 设置底部位置 */
  }
  #anMusic-page .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    margin: 0 30px;              /* 设置左右外边距 */
  }
  #anMusic-page .aplayer-info .aplayer-time {
    bottom: -40px;              /* 设置底部位置 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner {
    position: absolute;            /* 绝对定位 */
    width: 100%;                       /* 设置宽度为 100% */
    margin-right: 0;                  /* 移除右边距 */
    margin-top: -33px;            /* 设置顶部外边距 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-dtime {
    position: absolute;              /* 绝对定位 */
    right: 30px;                           /* 设置右边距 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-ptime {
    position: absolute;             /* 绝对定位 */
    left: 35px;                             /* 设置左边距 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back {
    margin: auto;                      /* 居中对齐 */
    right: 110px;                         /* 设置右边距 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play {
    margin: auto;                      /* 居中对齐 */
    right: 0;                                /* 设置右边距为 0 */
    left: 0;                                  /* 设置左边距为 0 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward {
    margin: auto;                 /* 居中对齐 */
    left: 110px;                     /* 设置左边距 */
    right: 0;                           /* 设置右边距为 0 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-order {
    position: absolute;         /* 绝对定位，使元素相对于最近的已定位祖先元素进行定位 */
    left: 22px;                         /* 距离左侧 22 像素 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-loop {
    position: absolute;       /* 绝对定位，使元素相对于最近的已定位祖先元素进行定位 */
    right: 25px;                    /* 距离右侧 25 像素 */
  }
  #anMusic-page .aplayer-info .aplayer-time .aplayer-icon-menu {
    display: inline;               /* 设置元素为行内元素，使其在同一行内显示 */
    position: absolute;      /* 绝对定位，使元素相对于最近的已定位祖先元素进行定位 */
    right: 25px;                   /* 距离右侧 25 像素 */
    top: -90px;                    /* 距离顶部 -90 像素，这里使用负值使其向上移动 */
  }
  #anMusic-page .aplayer-volume-bar-wrap {
    bottom: 0px;                /* 距离底部 0 像素 */
    right: 7px;                     /* 距离右侧 7 像素 */
  }
  #anMusic-page .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
    left: -66px;                     /* 距离左侧 -66 像素，这里使用负值使其向左移动 */
  }
}

7.将上面写的css和js文件引入主题配置文件。在这条配置文件_config.butterfly.yml中添加如下代码，其中我们使用的是meting2 的版本，为了不与设置的全局吸底APlayer冲突，就在这里引入https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js，而不是在最后面的CDN-option-meting_js:处引入。

1
2
3
4
5
inject:
  head:
	 - <script async data-pjax src="/js/anzhiyu.js"></script>
	 - <link rel="stylesheet" href="/css/music.css">
	 - <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> #为了与全局吸底不产生冲突

7. 悬挂灯笼

7.1 步骤

1.在blog\themes\Butterfly\source\css文件夹下新建lantern.css文件，并在lantern.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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
/* 灯笼 Start */

* {
    box-sizing: border-box;
}
/* 移动端显示/隐藏 /none/block，可自定义显示一个 */

@media screen and (max-width: 970px) {
    .d-box1 {
        display: none;
    }
    .dengl .d-box {
        right: 0px;
        top: -40px;
        /* 自定义灯笼大小 */
        transform: scale(0.4);
    }
}

.dengl {
    position: fixed;
    z-index: 9;
}


/* .d-box,.d-box1{
    z-index: 9;
  } */

.d-box {
    position: fixed;
    /* 自定义灯笼的位置 */
    right: 85px;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
}

.d-box1 {
    position: fixed;
    /* 自定义灯笼的位置 */
    left: 0;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
}


/* 修改灯笼的字体 */

.d-box .d1::after {
    content: '虎年大吉';
}

.d-box1 .d1::after {
    content: '万事顺遂';
}

.d-box1 .d1,
.d-box1 .d2,
.d-box1 .d1::after,
.d-box1 .d1::before,
.d-box1 .d2::after,
.d-box1 .d2::before,
.d-box1 .d2 ul li span,
.d-box1 .d1 ul li span {
    background-color: #f01f1a;
    border: 5px solid #5c1713;
    /* 自定义灯笼的阴影 */
    /* box-shadow: 0 5px 61px rgba(255, 240, 29, 0.88); */
}

.d1,
.d2,
.d1::after,
.d1::before,
.d2::after,
.d2::before,
.d2 ul li span,
.d1 ul li span {
    background-color: #f01f1a;
    border: 5px solid #5c1713;
    /* 自定义灯笼的阴影 */
    box-shadow: 0 5px 61px #ff1d1d;
}

.d1::after,
.d1::before {
    height: 82px;
    position: absolute;
    top: 0;
    content: '';
    font-size: 17px;
}

.d1,
.d2 {
    position: relative;
    animation: swing 4s linear infinite;
    transform-origin: top center;
}

.d1 {
    width: 160px;
    top: 100px;
    height: 90px;
    right: 0;
    border-radius: 80px/49px;
}

.d1::before {
    top: -5px;
    right: 7px;
    width: 123px;
    border-radius: 62px/52px;
}

.d1::after {
    text-align: center;
    line-height: 90px;
    color: #ffe31d;
    font-weight: 600;
    top: -5px;
    right: 35px;
    width: 69px;
    border-radius: 41px/49px;
}

.d1 span {
    position: absolute;
    top: 84px;
    left: 49px;
    width: 50px;
    height: 16px;
    z-index: 2;
    border-radius: 0 0 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d1 span:nth-child(2) {
    top: -17px;
    border-radius: 10px 10px 0 0;
}

.d1 p {
    position: absolute;
    top: -31px;
    left: 13px;
    width: 16px;
    height: 13px;
    border-radius: 25px;
    border: 5px solid #5c1713;
    border-bottom: 0;
}

.d1 ul {
    position: relative;
    top: 80px;
    left: 13px;
    width: 54px;
    display: flex;
}

.d1 li {
    flex: 1;
    list-style: none;
    height: 24px;
    margin: 0px 2.5px;
    width: 5px;
    border-radius: 5px;
    border-right: 3.5px solid #5c1713;
}

.d1 ul li:nth-child(3) {
    content: '';
    height: 50px;
}

.d1 ul li:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 47px;
    left: 54px;
    width: 5px;
    height: 5px;
    border-radius: 5px 5px 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d1 ul li span {
    position: absolute;
    top: 20px;
    left: 55px;
    width: 13px;
    height: 19px;
    border-radius: 14px;
}

.d2::after,
.d2::before {
    position: absolute;
    height: 128px;
    top: -3px;
    content: '';
}

.d2 {
    width: 199px;
    height: 128px;
    top: -61px;
    right: -122px;
    border-radius: 98px/70px;
}

.d2::before {
    top: -8px;
    right: 18px;
    width: 143px;
    border-radius: 69px/67px;
}


/* 自定义背景图片 */

.d2::after {
    top: -8px;
    right: 51px;
    width: 75px;
    border-radius: 57px/89px;
    background: url(https://bu.dusays.com/2021/02/03/7e1a77cf800cf.png) no-repeat;
    background-position: center;
    background-size: 92px auto;
}

.d2 span {
    position: absolute;
    top: 123px;
    left: 68px;
    width: 55px;
    height: 14px;
    z-index: 2;
    border-radius: 0 0 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d2 span:nth-child(2) {
    top: -16px;
    border-radius: 10px 10px 0 0;
}

.d2 p {
    position: absolute;
    top: -32px;
    left: 13px;
    width: 19px;
    height: 13px;
    border-radius: 25px;
    border: 5px solid #5c1713;
    border-bottom: 0;
}

.d2 ul {
    position: relative;
    top: 121px;
    left: 32px;
    width: 53px;
    display: flex;
}

.d2 li {
    flex: 1;
    list-style: none;
    height: 24px;
    margin: 0px 3px;
    width: 4px;
    border-radius: 7px;
    border-right: 3px solid #5c1713;
}

.d2 ul li:nth-child(3) {
    content: '';
    height: 60px;
}

.d2 ul li:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 59px;
    left: 53px;
    width: 9px;
    height: 6px;
    border-radius: 5px 5px 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d2 ul li span {
    position: absolute;
    top: 21px;
    left: 54px;
    width: 18px;
    height: 17px;
    border-radius: 20px;
}

@keyframes swing {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(-13deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(13deg);
    }
    100% {
        transform: rotate(0);
    }
}
/* 灯笼 END */

2.在blog\themes\Butterfly\layout\includes文件夹下新建lantern.pug文件，并添加以下内容：

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
.dengl
  .d-box
    .d1
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li  
    .d2
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li  
  .d-box1
    .d1
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li  
    .d2
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li

3.在blog\themes\Butterfly\layout\includes\layout.pug文件中引入lantern.pug文件，参考如下：

1
2
3
head
    include ./head.pug
    include ./lantern.pug  -----> 添加这一行

4.在主题配置文件_config.butterfly.yml中，inject的head下面引入刚刚添加的lantern.css文件

1
2
3
inject:
  head:
	 - <link rel="stylesheet" href="/css/lantern.css">

7.2 效果