1.单个文件(方便)

找到主题文件夹下的layout\includes\footer.pug文件,全部覆盖footer.pug文件

直接替换以下代码(我自己的):

1.1效果图一

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
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
#footer_button
ul.buttons
li.icon.Email
span.bubble Email
a(href='mailto:root@licic.net')
i.fa-solid.fa-envelope
li.icon.wechat
span.bubble WeChat
a(href='https://image.licic.net/i/2023/05/20/64686f39df838.png')
i.fa-brands.fa-weixin
li.icon.top
span.bubble 返回顶部
a(href='#')
i.fa-solid.fa-jet-fighter-up
li.icon.bilibili
span.bubble BiliBili
a(href='https://space.bilibili.com/523941795')
i.fab.fa-bilibili
li.icon.yu
span.bubble 豫
a(href='https://www.henan.gov.cn/')
i.fa-solid.fa-house

#Hsu-foot
.footer-group
h3.footer-title 直达
.footer-links
a.footer-item(href="javascript:toRandomPost()") 随机文章
a.footer-item(href="/essay") 个人动态
a.footer-item(href="/comments") 留言板
a.footer-item(href="/link") 友情链接
.footer-group
h3.footer-title 文章分类
.footer-links
a.footer-item(href="/categories/Web前端/") Web前端
a.footer-item(href="/categories/我的分享/") 我的分享
a.footer-item(href="/categories/Web后端/") Web后端
.footer-group
h3.footer-title 关于
.footer-links
a.footer-item(href="/about") 关于我
a.footer-item(href="/essay") 即刻日志
a.footer-item(href="/archives") 博客统计
a.footer-item(href="/archives") 文章归档
.footer-group
h3.footer-title 旗下站点
.footer-links
a.footer-item(href="https://index.licic.net/") 个人起始页
a.footer-item(href="https://nav.licic.net/") 浏览器起始页
a.footer-item(href="https://image.licic.net/") 李程图床系统
a.footer-item(href="https://wall.licic.net//") 高清免费壁纸
.footer-group
h3.footer-title 娱乐
.footer-links
a.footer-item(href="/air-conditioner") 小空调
a.footer-item(href="/music") 音乐馆
a.footer-item(href="/vipvideo") 观影馆
a.footer-item(href="/album") 我的相册

#footer-badges
// 徽章
//- a.badge(target='_blank' href='https://www.hexo.io/' title='Hexo')
//- img.badge(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg')

//- a.badge(target='_blank' href='https://www.licic.net/' title='李程ic')
//- img.badge(src='https://img.shields.io/badge/-Copyright%20%C2%A9%202023%20%E6%9D%8E%E7%A8%8B-%23ff38a6')

//- a.badge(target='_blank' href='https://beian.miit.gov.cn/' title='ICP备案')
//- img.badge(src='https://img.shields.io/badge/-%E8%B1%ABICP%E5%A4%872023010041%E5%8F%B7--1-%23ff38a6')

//- a.badge(target='_blank' href='https://github.com/charles-hsuz/charles-hsuz.github.io' title='版本控制由github提供')
//- img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281637830.svg')

//- a.badge(target='_blank' href='https://cloud.tencent.com/' title='本博客托管于腾讯云')
//- img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281651362.svg')
ul.bagul
li.badli
span#runtime_span
span    
li.badli
span#countdown
br
li.badli
img(src="https://image.licic.net/i/2023/05/21/6469e74290f88.png" alt="")
span  
a(href="https://www.gov.cn/") 中华人民共和国万岁!
li.badli
span Copyright © 2023
a(href="https://www.licic.net/")   李程
li.badli
img(src="https://image.licic.net/i/2023/05/21/6469e9a3913be.png" alt="")
span  
a(href="https://beian.miit.gov.cn/") 豫ICP备2023010041号-2
li.bagli
img(src="https://image.licic.net/i/2023/05/20/64686bbbecf36.png" alt="")
span  
a(href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152802000145") 豫公网安备41152802000145号

style.
body {
background-color: #fff8fb76;
}

#footer_button {
display: grid;
justify-items: center;
align-items: center;
margin: 0;
padding: 2rem 0 0 0;
}

#footer_button i {
font-size: 1.6rem;
transition: .3s;
line-height: 1.3rem;
height: 1.3rem;
}

.buttons {
display: grid;
width: 45%;
padding: 0;
justify-items: center;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}

.buttons .icon {
display: grid;
justify-items: center;
align-items: center;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
padding: 5px;
margin: 0px;
width: 50px;
height: 50px;
box-shadow: 1px 10px 10px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons a {
display: block;
height: 28px;
width: 26px;
font-size: 18px;
line-height: 35px;
color: #4c4948;
}

.buttons .bubble {
position: absolute;
top: 0;
font-size: 14px;
background: var(--licheng-white);
color: var(--licheng-white);
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .bubble::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: var(--licheng-white);
bottom: -4px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .icon:hover .bubble {
top: -15px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.buttons .icon:hover span,
.buttons .icon:hover .bubble {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.buttons .Email:hover,
.buttons .Email:hover .bubble,
.buttons .Email:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .Email:hover a {
color: var(--licheng-white);
}

.buttons .wechat:hover,
.buttons .wechat:hover .bubble,
.buttons .wechat:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .wechat:hover a {
color: var(--licheng-white);
}

.buttons .top:hover,
.buttons .top:hover .bubble,
.buttons .top:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .top:hover a {
color: var(--licheng-white);
}

.buttons .bilibili:hover,
.buttons .bilibili:hover .bubble,
.buttons .bilibili:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .bilibili:hover a {
color: var(--licheng-white);
}

.buttons .yu:hover,
.buttons .yu:hover .bubble,
.buttons .yu:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .yu:hover a {
color: var(--licheng-white);
}

@media screen and (max-width: 780px) {
.buttons {
width: 80%;
}
}

@media screen and (max-width: 1450px) and (min-width: 780px) {
.buttons {
width: 60%;
}
}

@media screen and (min-width: 1220px) {
#Hsu-foot {
margin-left: auto !important;
margin-right: auto !important;
}
}

[data-theme="dark"] body {
background-color: #313131;
}

[data-theme="dark"] #Hsu-foot {
background-color: #121212;
}

[data-theme="light"] #footer {
padding-top: 15px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 18%, var(--licheng-white) 97%)
}

[data-theme="dark"] .buttons .icon,
[data-theme="dark"] .buttons .icon:hover,
[data-theme="dark"] .buttons .icon:hover .bubble,
[data-theme="dark"] .buttons .icon:hover .bubble::before,
[data-theme="dark"] .buttons .icon:hover a {
background: #121212;
color: var(--licheng-white);
}

#Hsu-foot:hover {
border-color: var(--licheng-main);
transition: border-color 0.3s;
}

#Hsu-foot:not(:hover) {
border: 1px solid rgba(0, 0, 0, 0);
transition: border-color 0.3s;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-group {
display: grid;
grid-template-rows: 0fr 1fr;
margin-left: 30px;
width: fit-content;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
display: grid;
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-links {
display: grid;
grid-auto-rows: 2rem;
}

#Hsu-foot .footer-item {
font-size: 1rem;
line-height: .8rem;
margin: .38rem 0;
box-sizing: border-box;
width: max-content;
height: max-content;
}


#footer-badges {
display: flex;
justify-content: space-around;
}

#footer-badges .badge {
margin: 25px 5px 0px 0px;
}

#footer-badges ul {
text-align: center;
display: inline-block;
}

#footer-badges ul li {
display: inline-block;
list-style: none;
padding: 0px 0px 0px 10px;
font-weight: bold;
}

#footer-badges ul img {
width: 20px;
height: 15px;
border-radius: 2px;
}

@media screen and (max-width: 670px) {
#Hsu-foot{
display: none;
}
}

script.
// 网站运行时间
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new
Date("05/15/2023 14:26:44");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站勉强安全运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();

// 高考倒计时
// 目标日期(高考日期)
// 获取当前年份
var current_year = new Date().getFullYear();

// 计算目标日期(高考日期),仍然是 6 月 7 日 9 点
var target_date = new Date(current_year + "-06-07T09:00:00").getTime();

// 获取显示倒计时的元素
var countdown_div = document.getElementById("countdown");

// 将计时器更新函数定义为全局函数,方便调用
function update_countdown() {
// 当前时间戳
var now = new Date();
var now_timestamp = now.getTime();
// 剩余时间(单位:毫秒)
var remaining_time = target_date - now_timestamp;

// 如果剩余时间小于等于 0,则更新目标日期为下一年的高考日期
if (remaining_time <= 0) {
current_year += 1;
target_date = new Date(current_year + "-06-07T09:00:00").getTime();
remaining_time = target_date - now_timestamp;
}

// 计算出剩余时间的各个部分(天、小时、分钟、秒)
var days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
var hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

// 获取当前日期和时间
var current_month = now.getMonth() + 1;
var current_date = now.getDate();
var current_hour = now.getHours();

// 判断是否在高考期间
if (current_month === 6 && current_date === 7) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '语文考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '数学考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else if (current_month === 6 && current_date === 8) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '文综/理综考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '外语考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
}
// 每隔0.9秒钟更新一次倒计时
var countdown_timer = setInterval(update_countdown, 900);

1.2效果图二

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
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
#footer_button
ul.buttons
li.icon.Email
span.bubble Email
a(href='mailto:root@licic.net')
i.fa-solid.fa-envelope
li.icon.wechat
span.bubble WeChat
a(href='https://image.licic.net/i/2023/05/20/64686f39df838.png')
i.fa-brands.fa-weixin
li.icon.top
span.bubble 返回顶部
a(href='#')
i.fa-solid.fa-jet-fighter-up
li.icon.bilibili
span.bubble BiliBili
a(href='https://space.bilibili.com/523941795')
i.fab.fa-bilibili
li.icon.yu
span.bubble 豫
a(href='https://www.henan.gov.cn/')
i.fa-solid.fa-house

#Hsu-foot
.footer-group
h3.footer-title 直达
.footer-links
a.footer-item(href="javascript:toRandomPost()") 随机文章
a.footer-item(href="/essay") 个人动态
a.footer-item(href="/comments") 留言板
a.footer-item(href="/link") 友情链接
.footer-group
h3.footer-title 文章分类
.footer-links
a.footer-item(href="/categories/Web前端/") Web前端
a.footer-item(href="/categories/我的分享/") 我的分享
a.footer-item(href="/categories/Web后端/") Web后端
.footer-group
h3.footer-title 关于
.footer-links
a.footer-item(href="/about") 关于我
a.footer-item(href="/essay") 即刻日志
a.footer-item(href="/archives") 博客统计
a.footer-item(href="/archives") 文章归档
.footer-group
h3.footer-title 旗下站点
.footer-links
a.footer-item(href="https://index.licic.net/") 个人起始页
a.footer-item(href="https://nav.licic.net/") 浏览器起始页
a.footer-item(href="https://image.licic.net/") 李程图床系统
a.footer-item(href="https://wall.licic.net//") 高清免费壁纸
.footer-group
h3.footer-title 娱乐
.footer-links
a.footer-item(href="/air-conditioner") 小空调
a.footer-item(href="/music") 音乐馆
a.footer-item(href="/vipvideo") 观影馆
a.footer-item(href="/album") 我的相册

#footer-badges
// 徽章
a.badge(target='_blank' href='https://www.hexo.io/' title='Hexo')
img.badge(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg')

a.badge(target='_blank' href='https://www.licic.net/' title='李程ic')
img.badge(src='https://img.shields.io/badge/-Copyright%20%C2%A9%202023%20%E6%9D%8E%E7%A8%8B-%23ff38a6')

a.badge(target='_blank' href='https://beian.miit.gov.cn/' title='ICP备案')
img.badge(src='https://img.shields.io/badge/-%E8%B1%ABICP%E5%A4%872023010041%E5%8F%B7--1-%23ff38a6')

a.badge(target='_blank' href='https://github.com/charles-hsuz/charles-hsuz.github.io' title='版本控制由github提供')
img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281637830.svg')

a.badge(target='_blank' href='https://cloud.tencent.com/' title='本博客托管于腾讯云')
img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281651362.svg')
//- ul.bagul
//- li.badli
//- span#runtime_span
//- span &nbsp; &nbsp;
//- li.badli
//- span#countdown
//- br
//- li.badli
//- img(src="https://image.licic.net/i/2023/05/21/6469e74290f88.png" alt="")
//- span &nbsp;
//- a(href="https://www.gov.cn/") 中华人民共和国万岁!
//- li.badli
//- span Copyright &copy; 2023
//- a(href="https://www.licic.net/") &nbsp; 李程
//- li.badli
//- img(src="https://image.licic.net/i/2023/05/21/6469e9a3913be.png" alt="")
//- span &nbsp;
//- a(href="https://beian.miit.gov.cn/") 豫ICP备2023010041号-2
//- li.bagli
//- img(src="https://image.licic.net/i/2023/05/20/64686bbbecf36.png" alt="")
//- span &nbsp;
//- a(href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152802000145") 豫公网安备41152802000145号

style.
body {
background-color: #fff8fb76;
}

#footer_button {
display: grid;
justify-items: center;
align-items: center;
margin: 0;
padding: 2rem 0 0 0;
}

#footer_button i {
font-size: 1.6rem;
transition: .3s;
line-height: 1.3rem;
height: 1.3rem;
}

.buttons {
display: grid;
width: 45%;
padding: 0;
justify-items: center;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}

.buttons .icon {
display: grid;
justify-items: center;
align-items: center;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
padding: 5px;
margin: 0px;
width: 50px;
height: 50px;
box-shadow: 1px 10px 10px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons a {
display: block;
height: 28px;
width: 26px;
font-size: 18px;
line-height: 35px;
color: #4c4948;
}

.buttons .bubble {
position: absolute;
top: 0;
font-size: 14px;
background: var(--licheng-white);
color: var(--licheng-white);
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .bubble::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: var(--licheng-white);
bottom: -4px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .icon:hover .bubble {
top: -15px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.buttons .icon:hover span,
.buttons .icon:hover .bubble {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.buttons .Email:hover,
.buttons .Email:hover .bubble,
.buttons .Email:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .Email:hover a {
color: var(--licheng-white);
}

.buttons .wechat:hover,
.buttons .wechat:hover .bubble,
.buttons .wechat:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .wechat:hover a {
color: var(--licheng-white);
}

.buttons .top:hover,
.buttons .top:hover .bubble,
.buttons .top:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .top:hover a {
color: var(--licheng-white);
}

.buttons .bilibili:hover,
.buttons .bilibili:hover .bubble,
.buttons .bilibili:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .bilibili:hover a {
color: var(--licheng-white);
}

.buttons .yu:hover,
.buttons .yu:hover .bubble,
.buttons .yu:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .yu:hover a {
color: var(--licheng-white);
}

@media screen and (max-width: 780px) {
.buttons {
width: 80%;
}
}

@media screen and (max-width: 1450px) and (min-width: 780px) {
.buttons {
width: 60%;
}
}

@media screen and (min-width: 1220px) {
#Hsu-foot {
margin-left: auto !important;
margin-right: auto !important;
}
}

[data-theme="dark"] body {
background-color: #313131;
}

[data-theme="dark"] #Hsu-foot {
background-color: #121212;
}

[data-theme="light"] #footer {
padding-top: 15px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 18%, var(--licheng-white) 97%)
}

[data-theme="dark"] .buttons .icon,
[data-theme="dark"] .buttons .icon:hover,
[data-theme="dark"] .buttons .icon:hover .bubble,
[data-theme="dark"] .buttons .icon:hover .bubble::before,
[data-theme="dark"] .buttons .icon:hover a {
background: #121212;
color: var(--licheng-white);
}

#Hsu-foot:hover {
border-color: var(--licheng-main);
transition: border-color 0.3s;
}

#Hsu-foot:not(:hover) {
border: 1px solid rgba(0, 0, 0, 0);
transition: border-color 0.3s;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-group {
display: grid;
grid-template-rows: 0fr 1fr;
margin-left: 30px;
width: fit-content;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
display: grid;
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-links {
display: grid;
grid-auto-rows: 2rem;
}

#Hsu-foot .footer-item {
font-size: 1rem;
line-height: .8rem;
margin: .38rem 0;
box-sizing: border-box;
width: max-content;
height: max-content;
}


#footer-badges {
display: flex;
justify-content: space-around;
}

#footer-badges .badge {
margin: 25px 5px 0px 0px;
}

#footer-badges ul {
text-align: center;
display: inline-block;
}

#footer-badges ul li {
display: inline-block;
list-style: none;
padding: 0px 0px 0px 10px;
font-weight: bold;
}

#footer-badges ul img {
width: 20px;
height: 15px;
border-radius: 2px;
}

@media screen and (max-width: 670px) {
#Hsu-foot{
display: none;
}
}

script.
// 网站运行时间
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new
Date("05/15/2023 14:26:44");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站勉强安全运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();

// 高考倒计时
// 目标日期(高考日期)
// 获取当前年份
var current_year = new Date().getFullYear();

// 计算目标日期(高考日期),仍然是 6 月 7 日 9 点
var target_date = new Date(current_year + "-06-07T09:00:00").getTime();

// 获取显示倒计时的元素
var countdown_div = document.getElementById("countdown");

// 将计时器更新函数定义为全局函数,方便调用
function update_countdown() {
// 当前时间戳
var now = new Date();
var now_timestamp = now.getTime();
// 剩余时间(单位:毫秒)
var remaining_time = target_date - now_timestamp;

// 如果剩余时间小于等于 0,则更新目标日期为下一年的高考日期
if (remaining_time <= 0) {
current_year += 1;
target_date = new Date(current_year + "-06-07T09:00:00").getTime();
remaining_time = target_date - now_timestamp;
}

// 计算出剩余时间的各个部分(天、小时、分钟、秒)
var days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
var hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

// 获取当前日期和时间
var current_month = now.getMonth() + 1;
var current_date = now.getDate();
var current_hour = now.getHours();

// 判断是否在高考期间
if (current_month === 6 && current_date === 7) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '语文考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '数学考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else if (current_month === 6 && current_date === 8) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '文综/理综考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '外语考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
}
// 每隔0.9秒钟更新一次倒计时
var countdown_timer = setInterval(update_countdown, 900);

2.修改pug文件+引入css文件+引入js文件

2.1效果一

找到主题文件夹下的layout\includes\footer.pug文件,全部覆盖footer.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
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
#footer_button
ul.buttons
li.icon.Email
span.bubble Email
a(href='mailto:root@licic.net')
i.fa-solid.fa-envelope
li.icon.wechat
span.bubble WeChat
a(href='https://image.licic.net/i/2023/05/20/64686f39df838.png')
i.fa-brands.fa-weixin
li.icon.top
span.bubble 返回顶部
a(href='#')
i.fa-solid.fa-jet-fighter-up
li.icon.bilibili
span.bubble BiliBili
a(href='https://space.bilibili.com/523941795')
i.fab.fa-bilibili
li.icon.yu
span.bubble 豫
a(href='https://www.henan.gov.cn/')
i.fa-solid.fa-house

#Hsu-foot
.footer-group
h3.footer-title 直达
.footer-links
a.footer-item(href="javascript:toRandomPost()") 随机文章
a.footer-item(href="/essay") 个人动态
a.footer-item(href="/comments") 留言板
a.footer-item(href="/link") 友情链接
.footer-group
h3.footer-title 文章分类
.footer-links
a.footer-item(href="/categories/Web前端/") Web前端
a.footer-item(href="/categories/我的分享/") 我的分享
a.footer-item(href="/categories/Web后端/") Web后端
.footer-group
h3.footer-title 关于
.footer-links
a.footer-item(href="/about") 关于我
a.footer-item(href="/essay") 即刻日志
a.footer-item(href="/archives") 博客统计
a.footer-item(href="/archives") 文章归档
.footer-group
h3.footer-title 旗下站点
.footer-links
a.footer-item(href="https://index.licic.net/") 个人起始页
a.footer-item(href="https://nav.licic.net/") 浏览器起始页
a.footer-item(href="https://image.licic.net/") 李程图床系统
a.footer-item(href="https://wall.licic.net//") 高清免费壁纸
.footer-group
h3.footer-title 娱乐
.footer-links
a.footer-item(href="/air-conditioner") 小空调
a.footer-item(href="/music") 音乐馆
a.footer-item(href="/vipvideo") 观影馆
a.footer-item(href="/album") 我的相册

#footer-badges
// 徽章
//- a.badge(target='_blank' href='https://www.hexo.io/' title='Hexo')
//- img.badge(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg')

//- a.badge(target='_blank' href='https://www.licic.net/' title='李程ic')
//- img.badge(src='https://img.shields.io/badge/-Copyright%20%C2%A9%202023%20%E6%9D%8E%E7%A8%8B-%23ff38a6')

//- a.badge(target='_blank' href='https://beian.miit.gov.cn/' title='ICP备案')
//- img.badge(src='https://img.shields.io/badge/-%E8%B1%ABICP%E5%A4%872023010041%E5%8F%B7--1-%23ff38a6')

//- a.badge(target='_blank' href='https://github.com/charles-hsuz/charles-hsuz.github.io' title='版本控制由github提供')
//- img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281637830.svg')

//- a.badge(target='_blank' href='https://cloud.tencent.com/' title='本博客托管于腾讯云')
//- img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281651362.svg')
ul.bagul
li.badli
span#runtime_span
span &nbsp; &nbsp;
li.badli
span#countdown
br
li.badli
img(src="https://image.licic.net/i/2023/05/21/6469e74290f88.png" alt="")
span &nbsp;
a(href="https://www.gov.cn/") 中华人民共和国万岁!
li.badli
span Copyright &copy; 2023
a(href="https://www.licic.net/") &nbsp; 李程
li.badli
img(src="https://image.licic.net/i/2023/05/21/6469e9a3913be.png" alt="")
span &nbsp;
a(href="https://beian.miit.gov.cn/") 豫ICP备2023010041号-2
li.bagli
img(src="https://image.licic.net/i/2023/05/20/64686bbbecf36.png" alt="")
span &nbsp;
a(href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152802000145") 豫公网安备41152802000145号

找到/source/css文件夹,新建runtime.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
body {
background-color: #fff8fb76;
}

#footer_button {
display: grid;
justify-items: center;
align-items: center;
margin: 0;
padding: 2rem 0 0 0;
}

#footer_button i {
font-size: 1.6rem;
transition: .3s;
line-height: 1.3rem;
height: 1.3rem;
}

.buttons {
display: grid;
width: 45%;
padding: 0;
justify-items: center;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}

.buttons .icon {
display: grid;
justify-items: center;
align-items: center;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
padding: 5px;
margin: 0px;
width: 50px;
height: 50px;
box-shadow: 1px 10px 10px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons a {
display: block;
height: 28px;
width: 26px;
font-size: 18px;
line-height: 35px;
color: #4c4948;
}

.buttons .bubble {
position: absolute;
top: 0;
font-size: 14px;
background: var(--licheng-white);
color: var(--licheng-white);
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .bubble::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: var(--licheng-white);
bottom: -4px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .icon:hover .bubble {
top: -15px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.buttons .icon:hover span,
.buttons .icon:hover .bubble {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.buttons .Email:hover,
.buttons .Email:hover .bubble,
.buttons .Email:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .Email:hover a {
color: var(--licheng-white);
}

.buttons .wechat:hover,
.buttons .wechat:hover .bubble,
.buttons .wechat:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .wechat:hover a {
color: var(--licheng-white);
}

.buttons .top:hover,
.buttons .top:hover .bubble,
.buttons .top:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .top:hover a {
color: var(--licheng-white);
}

.buttons .bilibili:hover,
.buttons .bilibili:hover .bubble,
.buttons .bilibili:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .bilibili:hover a {
color: var(--licheng-white);
}

.buttons .yu:hover,
.buttons .yu:hover .bubble,
.buttons .yu:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .yu:hover a {
color: var(--licheng-white);
}

@media screen and (max-width: 780px) {
.buttons {
width: 80%;
}
}

@media screen and (max-width: 1450px) and (min-width: 780px) {
.buttons {
width: 60%;
}
}

@media screen and (min-width: 1220px) {
#Hsu-foot {
margin-left: auto !important;
margin-right: auto !important;
}
}

[data-theme="dark"] body {
background-color: #313131;
}

[data-theme="dark"] #Hsu-foot {
background-color: #121212;
}

[data-theme="light"] #footer {
padding-top: 15px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 18%, var(--licheng-white) 97%)
}

[data-theme="dark"] .buttons .icon,
[data-theme="dark"] .buttons .icon:hover,
[data-theme="dark"] .buttons .icon:hover .bubble,
[data-theme="dark"] .buttons .icon:hover .bubble::before,
[data-theme="dark"] .buttons .icon:hover a {
background: #121212;
color: var(--licheng-white);
}

#Hsu-foot:hover {
border-color: var(--licheng-main);
transition: border-color 0.3s;
}

#Hsu-foot:not(:hover) {
border: 1px solid rgba(0, 0, 0, 0);
transition: border-color 0.3s;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-group {
display: grid;
grid-template-rows: 0fr 1fr;
margin-left: 30px;
width: fit-content;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
display: grid;
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-links {
display: grid;
grid-auto-rows: 2rem;
}

#Hsu-foot .footer-item {
font-size: 1rem;
line-height: .8rem;
margin: .38rem 0;
/* margin-right: auto */
box-sizing: border-box;
width: max-content;
height: max-content;
}


#footer-badges {
display: flex;
justify-content: space-around;
}

#footer-badges .badge {
margin: 25px 5px 0px 0px;
}

#footer-badges ul {
text-align: center;
display: inline-block;
}

#footer-badges ul li {
display: inline-block;
list-style: none;
padding: 0px 0px 0px 10px;
font-weight: bold;
}

#footer-badges ul img {
width: 20px;
height: 15px;
border-radius: 2px;
}

@media screen and (max-width: 670px) {
#Hsu-foot {
display: none;
}
}

引入runtime.css文件,找到主题配置文件_config.'you_themes'.yml文件,找到inject:配置项,引入

1
2
3
inject:
head: # 引入外部css
- <link rel="stylesheet" href="../css/runtime.css">

找到/source/js文件夹,新建runtime.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
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
// 网站运行时间
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new
// 这里更换你的网站建立时间
Date("05/15/2023 14:26:44");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站勉强安全运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();

// 高考倒计时
// 目标日期(高考日期)
// 获取当前年份
var current_year = new Date().getFullYear();

// 计算目标日期(高考日期),仍然是 6 月 7 日 9 点
var target_date = new Date(current_year + "-06-07T09:00:00").getTime();

// 获取显示倒计时的元素
var countdown_div = document.getElementById("countdown");

// 将计时器更新函数定义为全局函数,方便调用
function update_countdown() {
// 当前时间戳
var now = new Date();
var now_timestamp = now.getTime();
// 剩余时间(单位:毫秒)
var remaining_time = target_date - now_timestamp;

// 如果剩余时间小于等于 0,则更新目标日期为下一年的高考日期
if (remaining_time <= 0) {
current_year += 1;
target_date = new Date(current_year + "-06-07T09:00:00").getTime();
remaining_time = target_date - now_timestamp;
}

// 计算出剩余时间的各个部分(天、小时、分钟、秒)
var days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
var hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

// 获取当前日期和时间
var current_month = now.getMonth() + 1;
var current_date = now.getDate();
var current_hour = now.getHours();

// 判断是否在高考期间
if (current_month === 6 && current_date === 7) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '语文考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '数学考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else if (current_month === 6 && current_date === 8) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '文综/理综考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '外语考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
}
// 每隔0.9秒钟更新一次倒计时
var countdown_timer = setInterval(update_countdown, 900);

引入runtime.js文件,找到主题配置文件_config.'you_themes'.yml文件,找到inject:配置项,引入

1
2
3
4
5
6
inject:
head: # 引入外部css
- <link rel="stylesheet" href="../css/categories-css.css">

bottom: # 引入外部js
- <script src="../js/runtime.js"></script>

2.2效果二

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
#footer_button
ul.buttons
li.icon.Email
span.bubble Email
a(href='mailto:root@licic.net')
i.fa-solid.fa-envelope
li.icon.wechat
span.bubble WeChat
a(href='https://image.licic.net/i/2023/05/20/64686f39df838.png')
i.fa-brands.fa-weixin
li.icon.top
span.bubble 返回顶部
a(href='#')
i.fa-solid.fa-jet-fighter-up
li.icon.bilibili
span.bubble BiliBili
a(href='https://space.bilibili.com/523941795')
i.fab.fa-bilibili
li.icon.yu
span.bubble 豫
a(href='https://www.henan.gov.cn/')
i.fa-solid.fa-house

#Hsu-foot
.footer-group
h3.footer-title 直达
.footer-links
a.footer-item(href="javascript:toRandomPost()") 随机文章
a.footer-item(href="/essay") 个人动态
a.footer-item(href="/comments") 留言板
a.footer-item(href="/link") 友情链接
.footer-group
h3.footer-title 文章分类
.footer-links
a.footer-item(href="/categories/Web前端/") Web前端
a.footer-item(href="/categories/我的分享/") 我的分享
a.footer-item(href="/categories/Web后端/") Web后端
.footer-group
h3.footer-title 关于
.footer-links
a.footer-item(href="/about") 关于我
a.footer-item(href="/essay") 即刻日志
a.footer-item(href="/archives") 博客统计
a.footer-item(href="/archives") 文章归档
.footer-group
h3.footer-title 旗下站点
.footer-links
a.footer-item(href="https://index.licic.net/") 个人起始页
a.footer-item(href="https://nav.licic.net/") 浏览器起始页
a.footer-item(href="https://image.licic.net/") 李程图床系统
a.footer-item(href="https://wall.licic.net//") 高清免费壁纸
.footer-group
h3.footer-title 娱乐
.footer-links
a.footer-item(href="/air-conditioner") 小空调
a.footer-item(href="/music") 音乐馆
a.footer-item(href="/vipvideo") 观影馆
a.footer-item(href="/album") 我的相册

#footer-badges
// 徽章
a.badge(target='_blank' href='https://www.hexo.io/' title='Hexo')
img.badge(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg')

a.badge(target='_blank' href='https://www.licic.net/' title='李程ic')
img.badge(src='https://img.shields.io/badge/-Copyright%20%C2%A9%202023%20%E6%9D%8E%E7%A8%8B-%23ff38a6')

a.badge(target='_blank' href='https://beian.miit.gov.cn/' title='ICP备案')
img.badge(src='https://img.shields.io/badge/-%E8%B1%ABICP%E5%A4%872023010041%E5%8F%B7--1-%23ff38a6')

a.badge(target='_blank' href='https://github.com/charles-hsuz/charles-hsuz.github.io' title='版本控制由github提供')
img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281637830.svg')

a.badge(target='_blank' href='https://cloud.tencent.com/' title='本博客托管于腾讯云')
img.badge(src='https://picbed-1304952903.cos.ap-beijing.myqcloud.com/pic/blog202301281651362.svg')
//- ul.bagul
//- li.badli
//- span#runtime_span
//- span &nbsp; &nbsp;
//- li.badli
//- span#countdown
//- br
//- li.badli
//- img(src="https://image.licic.net/i/2023/05/21/6469e74290f88.png" alt="")
//- span &nbsp;
//- a(href="https://www.gov.cn/") 中华人民共和国万岁!
//- li.badli
//- span Copyright &copy; 2023
//- a(href="https://www.licic.net/") &nbsp; 李程
//- li.badli
//- img(src="https://image.licic.net/i/2023/05/21/6469e9a3913be.png" alt="")
//- span &nbsp;
//- a(href="https://beian.miit.gov.cn/") 豫ICP备2023010041号-2
//- li.bagli
//- img(src="https://image.licic.net/i/2023/05/20/64686bbbecf36.png" alt="")
//- span &nbsp;
//- a(href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152802000145") 豫公网安备41152802000145号

找到/source/css文件夹,新建runtime.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
body {
background-color: #fff8fb76;
}

#footer_button {
display: grid;
justify-items: center;
align-items: center;
margin: 0;
padding: 2rem 0 0 0;
}

#footer_button i {
font-size: 1.6rem;
transition: .3s;
line-height: 1.3rem;
height: 1.3rem;
}

.buttons {
display: grid;
width: 45%;
padding: 0;
justify-items: center;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}

.buttons .icon {
display: grid;
justify-items: center;
align-items: center;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
padding: 5px;
margin: 0px;
width: 50px;
height: 50px;
box-shadow: 1px 10px 10px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons a {
display: block;
height: 28px;
width: 26px;
font-size: 18px;
line-height: 35px;
color: #4c4948;
}

.buttons .bubble {
position: absolute;
top: 0;
font-size: 14px;
background: var(--licheng-white);
color: var(--licheng-white);
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .bubble::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: var(--licheng-white);
bottom: -4px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons .icon:hover .bubble {
top: -15px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.buttons .icon:hover span,
.buttons .icon:hover .bubble {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.buttons .Email:hover,
.buttons .Email:hover .bubble,
.buttons .Email:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .Email:hover a {
color: var(--licheng-white);
}

.buttons .wechat:hover,
.buttons .wechat:hover .bubble,
.buttons .wechat:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .wechat:hover a {
color: var(--licheng-white);
}

.buttons .top:hover,
.buttons .top:hover .bubble,
.buttons .top:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .top:hover a {
color: var(--licheng-white);
}

.buttons .bilibili:hover,
.buttons .bilibili:hover .bubble,
.buttons .bilibili:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .bilibili:hover a {
color: var(--licheng-white);
}

.buttons .yu:hover,
.buttons .yu:hover .bubble,
.buttons .yu:hover .bubble::before {
background: var(--licheng-main);
color: var(--licheng-white);
}

.buttons .yu:hover a {
color: var(--licheng-white);
}

@media screen and (max-width: 780px) {
.buttons {
width: 80%;
}
}

@media screen and (max-width: 1450px) and (min-width: 780px) {
.buttons {
width: 60%;
}
}

@media screen and (min-width: 1220px) {
#Hsu-foot {
margin-left: auto !important;
margin-right: auto !important;
}
}

[data-theme="dark"] body {
background-color: #313131;
}

[data-theme="dark"] #Hsu-foot {
background-color: #121212;
}

[data-theme="light"] #footer {
padding-top: 15px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 18%, var(--licheng-white) 97%)
}

[data-theme="dark"] .buttons .icon,
[data-theme="dark"] .buttons .icon:hover,
[data-theme="dark"] .buttons .icon:hover .bubble,
[data-theme="dark"] .buttons .icon:hover .bubble::before,
[data-theme="dark"] .buttons .icon:hover a {
background: #121212;
color: var(--licheng-white);
}

#Hsu-foot:hover {
border-color: var(--licheng-main);
transition: border-color 0.3s;
}

#Hsu-foot:not(:hover) {
border: 1px solid rgba(0, 0, 0, 0);
transition: border-color 0.3s;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-group {
display: grid;
grid-template-rows: 0fr 1fr;
margin-left: 30px;
width: fit-content;
}

#Hsu-foot {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(255, 255, 255, 0.4);
display: grid;
grid-template-columns: repeat(5, 2fr);
margin: 1%;
margin-top: 30px;
padding-bottom: 15px;
max-width: 1170px;
box-shadow: 9px 10px 16px 3px rgb(0 0 0 / 10%);
border-radius: 12px;
}

#Hsu-foot .footer-links {
display: grid;
grid-auto-rows: 2rem;
}

#Hsu-foot .footer-item {
font-size: 1rem;
line-height: .8rem;
margin: .38rem 0;
/* margin-right: auto */
box-sizing: border-box;
width: max-content;
height: max-content;
}


#footer-badges {
display: flex;
justify-content: space-around;
}

#footer-badges .badge {
margin: 25px 5px 0px 0px;
}

#footer-badges ul {
text-align: center;
display: inline-block;
}

#footer-badges ul li {
display: inline-block;
list-style: none;
padding: 0px 0px 0px 10px;
font-weight: bold;
}

#footer-badges ul img {
width: 20px;
height: 15px;
border-radius: 2px;
}

@media screen and (max-width: 670px) {
#Hsu-foot {
display: none;
}
}

引入runtime.css文件,找到主题配置文件_config.'you_themes'.yml文件,找到inject:配置项,引入

1
2
3
inject:
head: # 引入外部css
- <link rel="stylesheet" href="../css/runtime.css">

找到/source/js文件夹,新建runtime.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
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
// 网站运行时间
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new
// 这里更换你的网站建立时间
Date("05/15/2023 14:26:44");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站勉强安全运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();

// 高考倒计时
// 目标日期(高考日期)
// 获取当前年份
var current_year = new Date().getFullYear();

// 计算目标日期(高考日期),仍然是 6 月 7 日 9 点
var target_date = new Date(current_year + "-06-07T09:00:00").getTime();

// 获取显示倒计时的元素
var countdown_div = document.getElementById("countdown");

// 将计时器更新函数定义为全局函数,方便调用
function update_countdown() {
// 当前时间戳
var now = new Date();
var now_timestamp = now.getTime();
// 剩余时间(单位:毫秒)
var remaining_time = target_date - now_timestamp;

// 如果剩余时间小于等于 0,则更新目标日期为下一年的高考日期
if (remaining_time <= 0) {
current_year += 1;
target_date = new Date(current_year + "-06-07T09:00:00").getTime();
remaining_time = target_date - now_timestamp;
}

// 计算出剩余时间的各个部分(天、小时、分钟、秒)
var days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
var hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

// 获取当前日期和时间
var current_month = now.getMonth() + 1;
var current_date = now.getDate();
var current_hour = now.getHours();

// 判断是否在高考期间
if (current_month === 6 && current_date === 7) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '语文考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '数学考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else if (current_month === 6 && current_date === 8) {
if (current_hour >= 9 && current_hour < 11.5) {
countdown_div.innerHTML = '文综/理综考试进行中';
} else if (current_hour >= 15 && current_hour < 17) {
countdown_div.innerHTML = '外语考试进行中';
} else if (current_hour >= 9 && current_hour < 17) {
countdown_div.innerHTML = '高考开始啦! | 中场休息~';
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
} else {
// 将倒计时字符串拼接并更新到页面中
var countdown_str = days + "天 " + hours + "小时 " + minutes + "分 " + seconds + "秒";
countdown_div.innerHTML = "距离" + current_year + "年高考还有:" + countdown_str;
}
}
// 每隔0.9秒钟更新一次倒计时
var countdown_timer = setInterval(update_countdown, 900);

引入runtime.js文件,找到主题配置文件_config.'you_themes'.yml文件,找到inject:配置项,引入

1
2
3
4
5
6
inject:
head: # 引入外部css
- <link rel="stylesheet" href="../css/categories-css.css">

bottom: # 引入外部js
- <script src="../js/runtime.js"></script>

我自己用的是效果一,效果二的那个徽章样式没写,有能力的小伙伴可以自己写一下css样式~

希望本文能够帮助读者更好地魔改自己的Hexo博客。