Butterfly主题美化

这里有空更新吧,我实在是太懒了

搞怪恶搞网页标题特效

/root/myblog/themes/Butterfly/source/js中新建crash_cheat.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗 + OriginTitle -->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/joke.ico");
document.title = '╭(°A°`)╮ 我不爱你啦~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 喵喵爱你哟~';
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

然后在 /root/myblog/themes/Butterfly/layout/includes/layout.pug引入代码
推荐 html => pug , 我把引入的代码放在了 layout.pug 最底部

1
script(type='text/javascript', src='/js/crash_cheat.js')

添加Aplayer全局音乐播放器

受恶搞标题特效启发,在/root/myblog/themes/Butterfly/source/js中新建music.js同时把项目文件APlayer.min.css添加进去,主要是方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
theme: '#FADFA3',
audio: [
{
name: "纸短情长",
artist: '徐梦圆',
url: 'https://music.163.com/song/media/outer/url?id=516076896.mp3',
cover: 'https://p3.music.126.net/AAq1qOhfyrClGK1mg3mGYQ==/18776360067593424.jpg',
},
{
name: '风筝误',
artist: '刘珂矣',
url: 'https://music.163.com/song/media/outer/url?id=1434570079.mp3',
cover: 'http://oeff2vktt.bkt.clouddn.com/image/96.jpg',
}
]
});

然后在/root/myblog/themes/Butterfly/layout/includes/layout.pug引入代码

1
2
3
4
link(rel='stylesheet', href='/js/APlayer.min.css')
#aplayer
script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js')
script(type='text/javascript', src='/js/music.js')
如果要将Apalyer收入,请修改APlayer.min.css样式
1
2
3
4
5
6
7
8
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px!important;
left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0px !important
}

参考图片

APlayer

这个方法我还不知道怎么设置音乐cover封面图片,只能是音乐默认图片
/root/myblog/themes/Butterfly/layout/includes/head.pug末行添加

1
include ./third-party/aplayer.pug

然后在/root/myblog/themes/Butterfly/layout/includes/third-party下新建aplayer.pug

1
2
3
4
5
6
7
8
<!-- 判断是否启用aplaye -->
if theme.aplayer && theme.aplayer.enable
<!-- 判断是否启用播放器容器 -->
.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
each item in theme.aplayer.css
link(rel='stylesheet', href=item)
each item in theme.aplayer.js
script(src=item)

/root/myblog/source/_data/butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  ##全局音乐
aplayer:
enable: true
js:
- https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js
- https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
css:
- https://cdn.jsdelivr.net/gh/haikesikejiqiang/picred@master/2020/03/13/APlayer.min.css
id: 501749278
server: netease
type: song
fixed: 'true'
order: random
preload: none
listFolded: 'false'
MetingJS

移动端独立背景图

/root/myblog/themes/Butterfly/source/css/_layout/pagination.styl末行添加

1
2
3
4
5
6
7
8
@media screen and (max-width: 768px)
.prev-post,
.next-post
width: 100% !important
@media screen and (max-width: $sm)
#web_bg
background: url(http://tu.yaohuo.me/imgs/2020/06/8ebec35e93e04611.png)
background-size: cover

查看图片

在这里插入图片描述

鼠标样式

butterfly.yml中引入以下css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/normal.cur),
default;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/ayuda.cur),
default;
}
p {
cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/texto.cur),
default;
}

查看图片

在这里插入图片描述