按照惯例,一年一度对小站进行“检修”。博客的主题是butterfly,hexo免费开源的主题,作者真的是勤劳的小蜜蜂,两年过去了,依然在维护更新。之前的版本是4.6.0版本,已经是两年前的版本了,目前已经升级到了最新版本5.3.2。新版本较旧版本,作者有非常多的改动。

简单讲讲笔者对博客的调整:
1.hexo和butterfly均升级到了最新版本,目前butterfly的版本是5.3.2。
2.博客外观微调,背景视频取自wallpaper用户Huoyufou作品。原视频比较大,取了7、8帧关键帧,重新渲染成视频。
3.开启博客夜间模式,根据博客情况进行了一些调整,修复了偷掉月亮教程中新版代码存在的错误问题。(详情见博客备忘录主题帖)

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
:root {
--trans-light: rgba(255, 255, 255, 0.88);
--trans-dark: rgba(25, 25, 25, 0.88);
--border-style: 1px solid rgb(255, 255, 255);
--backdrop-filter: blur(5px) saturate(150%);
}

/* 日间模式 */
[data-theme="light"] #page-header::before {
background: rgba(0, 0, 0, 0.2) !important;
}

/* 首页文章卡片 */
#recent-posts .recent-post-item {
background: var(--trans-light);
border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
background: var(--trans-light);
border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
background: var(--trans-light);
border: var(--border-style);
}

/* 导航栏 */
#page-header.nav-fixed #nav {
background: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
background: var(--trans-dark);
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
background: rgba(255, 255, 255, 0.5) !important;
}
.read-mode div#post {
background: rgba(255, 255, 255, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}

4.博客启用aplayer插件,同时参考了对如何在博客园中添加音乐播放器及设置自动播放的研究的代码,以实现点击后自动播放。(都是浏览器的锅)参考Butterfly:添加全局吸底 Aplayer 播放器,以实现隐藏歌词。(虽然未白镇本来就是纯曲子)同时参考了【Hexo博客】隐藏 Butterfly 主题中 Aplayer 的全局吸底音乐标签隐藏了aplayer。
记得把//和后面的文字删掉,笔者是放在了footer.js里,<script></script>也要删掉,也可以参考原作者的放的位置?

1
2
3
4
5
6
7
8
9
10
11
12
<script> 
let ref = setInterval(function(){ //每隔2秒尝试播放一次
isaplay();
},2000);
function isaplay(){
$(".aplayer-play").click() //尝试播放
setTimeout(function() { //延时100毫秒再执行其内部的判断
if($(".aplayer-pause").length > 0){ //`aplayer-button aplayer-pause`是否存在
clearInterval(ref); //停止Interval,即停止循环
}}, 100);
}
</script>

在 Butterfly 主题配置文件 _config.yml 中的inject部分加入下面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
inject:
head:
# Aplayer 的全局吸底音乐标签收起隐藏
- '<style type="text/css">
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
left: -66px !important;
/* 默认情况下缩进左侧66px,只留一点箭头部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0 !important;
/* 鼠标悬停是左侧缩进归零,完全显示按钮 */
}
</style>'

5.微调代码,将视频设置为butterfly头图。
6.删除/隐藏文章113篇,仅供本地备份阅览。目前为止文章id至478,已经删除/隐藏300余篇文章。好嘛,捞回来一些,现在180+帖。
7.以及一些细微的改动,太散了,懒得记了。

补充:因为开启了夜间模式,对404页面造成了小BUG。出现了多余的白色背景,解决方案。在404.styl里加上一句

1
2
#page
background: none

即可解决。