预览效果

魔改源码

themes\butterfly\layout\includes\widget\card_author.pug中第2行添加代码,注意要把“+”去掉

1
2
3
4
5
6
7
8
9
10
11
12
if theme.aside.card_author.enable
+ .card-widget.card-info
+ .iPhone-14-pro
+ .screen
+ .wrapper
+ .dynamic-island
+ .avater
.is-center
.avatar-img
img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
.author-info__name= config.author
.author-info__description!= theme.aside.card_author.description || config.description

加入css

在自定义的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
/* 手机本体 */
#card_author.iPhone-14-pro {
position: relative;
background-color: #998c9e;
border-radius: 48px;
overflow: hidden;
}

/* 手机屏幕 */
.iPhone-14-pro .screen {
position: absolute;
inset: 2px;
background-color: black;
border-radius: 48px;
/* 边框 */
padding: 10px;
}

/* 屏幕内容 */
.iPhone-14-pro .screen .wrapper {
width: 100%;
height: 100%;
border-radius: 40px;
background: url(https://pic4.zhimg.com/80/v2-5b7e9d9ed12aac15b9c07b249733aff3_1440w.webp);/*手机背景图片*/
background-size: cover;
}

/* 灵动岛 */
.dynamic-island {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
width: 85px;
height: 25px;
left: 50%;
top: 20px;
padding: 0 10px;
transform: translateX(-50%);
background: black;
border-radius: 20px;
transition: 0.5s ease-in-out;
cursor: default;
user-select: none;
}

/* 鼠标悬浮时灵动岛的状态 */
.dynamic-island:hover {
border: 2px solid rgb(0, 0, 0);
border-radius: 48px;
width: 200px;
height: 200px;
background: url(https://pic1.imgdb.cn/item/635ceb7f16f2c2beb1e20c46.jpg);/*这里放的是你的头像*/
background-size: cover;
}
/*解决夜间模式下显示圆形头像的bug*/
[data-theme='dark'] img {
filter: none;
}
/*设置card-widget背景透明,不然夜间模式有个长方形的暗影*/
[data-theme='dark'] .card-widget {
background: important;
}

评价

因为我是前端小白,目前只会简单的css修改,改效果还要很多待改善的地方,同时希望有大佬能把这个完善改进好!