自定义侧边栏
看了一下butterfly官方的自定义侧边栏 进阶教程，
由于是纯外行，就结合deepseek搓了一个侧边栏卡片，显示了bilibili账号信息
数据均手动写入，没有关联任何数据资源。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| top:
- class_name: user-bilibili
id_name: user-bilibili
name: 哔哩哔哩账号
icon: fa-brands fa-bilibili
order:
html: |
<div id="user-bilibili" style="width:100%; height:300px;">
<iframe
src="/html/bili.html"
style="width:100%; height:100%; border:none; overflow:hidden;"
scrolling="no"
frameborder="0"
></iframe>
</div>
|
/html/bili.html 为本地新增的html文件
html配置：
可以储存到 /html/x.html
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
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilibili账号控件</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #00000000;
padding: 30px;
}
.bilibili-minimal-widget {
display: flex;
flex-direction: column;
max-width: 320px;
background: transparent;
padding: 0;
}
.account-header {
display: flex;
align-items: center;
margin-bottom: 30px;
}
.avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(45deg, #f1f3f5, #e9ecef);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
overflow: hidden;
border: 3px solid white;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.account-info {
flex: 1;
}
.username {
font-size: 20px;
font-weight: 600;
color: #ff6262;
margin-bottom: 5px;
display: flex;
align-items: center;
}
.level {
font-size: 13px;
color: #6c757d;
}
.stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 10px;
}
.stat-item {
text-align: center;
flex: 1;
}
.stat-value {
font-size: 16px;
font-weight: 600;
margin-bottom: 3px;
color: #212529;
}
.stat-label {
font-size: 12px;
color: #6c757d;
}
.goto-btn {
width: 100%;
padding: 12px 0;
border: none;
background: #00a1d6;
color: white;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(0, 161, 214, 0.2);
}
.goto-btn i {
margin-right: 8px;
}
.goto-btn:hover {
background: #0082ad;
box-shadow: 0 5px 12px rgba(0, 161, 214, 0.3);
transform: translateY(-2px);
}
.goto-btn:active {
transform: translateY(0);
}
.bilibili-brand {
text-align: center;
margin-top: 15px;
font-size: 12px;
color: #6c757d;
}
.bilibili-brand span {
color: #00a1d6;
font-weight: 600;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.bilibili-minimal-widget > * {
animation: fadeIn 0.5s ease forwards;
}
.account-header { animation-delay: 0.1s; }
.stats { animation-delay: 0.2s; }
.goto-btn { animation-delay: 0.3s; }
.bilibili-brand { animation-delay: 0.4s; }
</style>
</head>
<body>
<div class="bilibili-minimal-widget">
<div class="account-header">
<div class="avatar">
<img src="头像.png" alt="头像">
</div>
<div class="account-info">
<div class="username">
<span>b站用户</span>
</div>
<div class="level">
Lv999 咸鱼up
</div>
</div>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-value">7777</div>
<div class="stat-label">粉丝</div>
</div>
<div class="stat-item">
<div class="stat-value">8888</div>
<div class="stat-label">关注</div>
</div>
<div class="stat-item">
<div class="stat-value">9999</div>
<div class="stat-label">获赞</div>
</div>
</div>
<button class="goto-btn" id="goto-space">
<i class="fas fa-external-link-alt"></i> 进入空间
</button>
<div class="bilibili-brand">
<span>BILIBILI</span> 账号信息
</div>
</div>
<script>
document.getElementById('goto-space').addEventListener('click', function() {
const originalText = this.innerHTML;
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在跳转...';
this.style.background = '#0082ad';
setTimeout(() => {
window.open('b站主页url', '_blank');
setTimeout(() => {
this.innerHTML = originalText;
this.style.background = '#00a1d6';
}, 1000);
}, 800);
});
</script>
</body>
</html>
|
css由deepseek提供
需手动调整需要显示的参数
git上传日历表
参考教程原地址：https://github.com/Barry-Flynn/python_github_calendar_api
需注意必要配置：
api
calendar_js
自行修改了配色
yml配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
githubcalendar:
enable: true
enable_page: /
user: github-name
layout:
type: id
name: recent-posts
index: 0
githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
pc_minheight: 280px
mobile_minheight: 0px
color: "['#ebedf0', '#f8bbc3', '#f6aab5', '#f499a6', '#f28897', '#f17788', '#ef6679', '#ed556a', '#e63c5a', '#df2450', '#d80e47']"
api: apiurl
calendar_js: x/x.js
plus_style: ""
|
wechat
alipay
qqpay
paypal
