给安知鱼主题侧边栏添加日后和倒计时卡片

今天看到一个非常不错的美化效果,给安知鱼主题的侧边栏添加日历组件 ,感觉非常有意思,我们前面给大家分享过一篇文章,给安知鱼主题侧边栏添加倒计时卡片 ,这篇文章只是给安知鱼主题的侧边栏添加了一个倒计时效果,没有日历。今天我们来分享这篇伟大的文章,实现一个炫酷的效果。

1.新建 widget.yml

source/_data 文件夹新建一个 widget.yml 文件

以后所有自定义的侧边栏组件都可以写在这里面,具体写法参考 butterfly 官方文档,并输入以下代码

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
# top: 创建的 widget 会出现在非 sticky 区域(即所有页面都会显示)
# bottom: 创建的 widget 会出现在 sticky 区域(除了文章页都会显示)
top:
- class_name: card-times
id_name: card-widget-calendar
name:
icon:
html:
<div id="calendar-area-left">
<div id="calendar-week"></div>
<div id="calendar-date"></div>
<div id="calendar-solar"></div>
<div id="calendar-lunar"></div>
</div>
<div id="calendar-area-right">
<div id="calendar-main">
<div class="calendar-rh">
<div class="calendar-d0"><a>日</a></div>
<div class="calendar-d1"><a>一</a></div>
<div class="calendar-d2"><a>二</a></div>
<div class="calendar-d3"><a>三</a></div>
<div class="calendar-d4"><a>四</a></div>
<div class="calendar-d5"><a>五</a></div>
<div class="calendar-d6"><a>六</a></div>
</div>
</div>
</div>

- class_name: card-times
id_name: card-widget-schedule
name:
icon:
html:
<div id="schedule-area-left">
<div id="schedule-title">距离除夕</div>
<div id="schedule-days">000</div>
<div id="schedule-date">2025-01-28</div>
</div>
<div id="schedule-area-right">
<div class="schedule-r0">
<div class="schedule-d0">本年</div>
<div class="schedule-d1">
<span id="p_span_year" class="aside-span1"></span>
<span class="aside-span2"></span>
<progress max="365" value="54" id="pBar_year"></progress>
</div>
</div>
<div class="schedule-r1">
<div class="schedule-d0">本月</div>
<div class="schedule-d1">
<span id="p_span_month" class="aside-span1"></span>
<span class="aside-span2"></span>
<progress max="30" value="17" id="pBar_month"></progress>
</div>
</div>
<div class="schedule-r2">
<div class="schedule-d0">本周</div>
<div class="schedule-d1">
<span id="p_span_week" class="aside-span1"></span>
<span class="aside-span2"></span>
<progress max="7" value="1" id="pBar_week"></progress>
</div>
</div>
</div>

2.创建 js 文件

添加的日历和倒计时卡片,共需要两个 JS 文件。分别是 chinese-lunar.jscalendar.js

首先说,可以下载 chinese-lunar.js 文件,此文件用途不清楚。得到这个 JS 的文件的途径,给大家分析两个

2.1.下载 chinese-lunar.js 文件

需要从下面的链接中,下载这个 chinese-lunar.js 文件。

1
https://github.com/wvv8oo/lunar/blob/master/lib/chinese-lunar.js

下载之后,我看了看这个文件,是 367K 大小,但是原作者的博客网站引用的文件,却只有 35K 大小,所以我们直接使用博客主的文件。

2.2.新建 chinese-lunar.js 文件

我们可以在博客主题目录下的 /themes/anzhiyu/source/js 文件夹下面新建 chinese-lunar.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
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
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
/**
* 农历与阳历的转换,目前只能支持1900至2100的转换
* User: conis<conis.yi@gmail.com>
* Github: https://github.com/conis/chinese-lunar
* Date: 1/29/13
* Time: 9:58 上午
*
*/
(function() {
/*
农历每一年,对应公历的数据
此数据来源于互联网,原作者不详细,在此感谢
MAPPING[0][0]:每年闰月的月份,0表示不闰
MAPPING[0][1, 13]:表示每月初一对应的阳历时间,前两个字符表示月,后两个字符表示月
*/
var MAPPING = [
[8, "0131", "0301", "0331", "0429", "0528", "0627", "0726", "0825", "0924", "1023", "1122", "1222", "1320"], //1900
[0, "0219", "0320", "0419", "0518", "0616", "0716", "0814", "0913", "1012", "1111", "1211", "1310"], //1901
[0, "0208", "0310", "0408", "0508", "0606", "0705", "0804", "0902", "1002", "1031", "1130", "1230"], //1902
[5, "0129", "0227", "0329", "0427", "0527", "0625", "0724", "0823", "0921", "1020", "1119", "1219", "1317"], //1903
[0, "0216", "0317", "0416", "0515", "0614", "0713", "0811", "0910", "1009", "1107", "1207", "1306"], //1904
[0, "0204", "0306", "0405", "0504", "0603", "0703", "0801", "0830", "0929", "1028", "1127", "1226"], //1905
[4, "0125", "0223", "0325", "0424", "0523", "0622", "0721", "0820", "0918", "1018", "1116", "1216", "1314"], //1906
[0, "0213", "0314", "0413", "0512", "0611", "0710", "0809", "0908", "1007", "1106", "1205", "1304"], //1907
[0, "0202", "0303", "0401", "0430", "0530", "0629", "0728", "0827", "0925", "1025", "1124", "1223"], //1908
[2, "0122", "0220", "0322", "0420", "0519", "0618", "0717", "0816", "0914", "1014", "1113", "1213", "1311"], //1909
[0, "0210", "0311", "0410", "0509", "0607", "0707", "0805", "0904", "1003", "1102", "1202", "1301"], //1910
[6, "0130", "0301", "0330", "0429", "0528", "0626", "0726", "0824", "0922", "1022", "1121", "1220", "1319"], //1911
[0, "0218", "0319", "0417", "0517", "0615", "0714", "0813", "0911", "1010", "1109", "1209", "1307"], //1912
[0, "0206", "0308", "0407", "0506", "0605", "0704", "0802", "0901", "0930", "1029", "1128", "1227"], //1913
[5, "0126", "0225", "0327", "0425", "0525", "0623", "0723", "0821", "0920", "1019", "1117", "1217", "1315"], //1914
[0, "0214", "0316", "0414", "0514", "0613", "0712", "0811", "0909", "1009", "1107", "1207", "1305"], //1915
[0, "0203", "0304", "0403", "0502", "0601", "0630", "0730", "0829", "0927", "1027", "1125", "1225"], //1916
[2, "0123", "0222", "0323", "0421", "0521", "0619", "0719", "0818", "0916", "1016", "1115", "1214", "1313"], //1917
[0, "0211", "0313", "0411", "0510", "0609", "0708", "0807", "0905", "1005", "1104", "1203", "1302"], //1918
[7, "0201", "0302", "0401", "0430", "0529", "0628", "0727", "0825", "0924", "1024", "1122", "1222", "1321"], //1919
[0, "0220", "0320", "0419", "0518", "0616", "0716", "0814", "0912", "1012", "1110", "1210", "1309"], //1920
[0, "0208", "0310", "0408", "0508", "0606", "0705", "0804", "0902", "1001", "1031", "1129", "1229"], //1921
[5, "0128", "0227", "0328", "0427", "0527", "0625", "0724", "0823", "0921", "1020", "1119", "1218", "1317"], //1922
[0, "0216", "0317", "0416", "0516", "0614", "0714", "0812", "0911", "1010", "1108", "1208", "1306"], //1923
[0, "0205", "0305", "0404", "0504", "0602", "0702", "0801", "0830", "0929", "1028", "1127", "1226"], //1924
[4, "0124", "0223", "0324", "0423", "0522", "0621", "0721", "0819", "0918", "1018", "1116", "1216", "1314"], //1925
[0, "0213", "0314", "0412", "0512", "0610", "0710", "0808", "0907", "1007", "1105", "1205", "1304"], //1926
[0, "0202", "0304", "0402", "0501", "0531", "0629", "0729", "0827", "0926", "1025", "1124", "1224"], //1927
[2, "0123", "0221", "0322", "0420", "0519", "0618", "0717", "0815", "0914", "1013", "1112", "1212", "1311"], //1928
[0, "0210", "0311", "0410", "0509", "0607", "0707", "0805", "0903", "1003", "1101", "1201", "1231"], //1929
[6, "0130", "0228", "0330", "0429", "0528", "0626", "0726", "0824", "0922", "1022", "1120", "1220", "1319"], //1930
[0, "0217", "0319", "0418", "0517", "0616", "0715", "0814", "0912", "1011", "1110", "1209", "1308"], //1931
[0, "0206", "0307", "0406", "0506", "0604", "0704", "0802", "0901", "0930", "1029", "1128", "1227"], //1932
[5, "0126", "0224", "0326", "0425", "0524", "0623", "0722", "0821", "0920", "1019", "1118", "1217", "1315"], //1933
[0, "0214", "0315", "0414", "0513", "0612", "0712", "0810", "0909", "1008", "1107", "1207", "1305"], //1934
[0, "0204", "0305", "0403", "0503", "0601", "0701", "0730", "0829", "0928", "1027", "1126", "1226"], //1935
[3, "0124", "0223", "0323", "0421", "0521", "0619", "0718", "0817", "0916", "1015", "1114", "1214", "1313"], //1936
[0, "0211", "0313", "0411", "0510", "0609", "0708", "0806", "0905", "1004", "1103", "1203", "1302"], //1937
[7, "0131", "0302", "0401", "0430", "0529", "0628", "0727", "0825", "0924", "1023", "1122", "1222", "1320"], //1938
[0, "0219", "0321", "0420", "0519", "0617", "0717", "0815", "0913", "1013", "1111", "1211", "1309"], //1939
[0, "0208", "0309", "0408", "0507", "0606", "0705", "0804", "0902", "1001", "1031", "1129", "1229"], //1940
[6, "0127", "0226", "0328", "0426", "0526", "0625", "0724", "0823", "0921", "1020", "1119", "1218", "1317"], //1941
[0, "0215", "0317", "0415", "0515", "0614", "0713", "0812", "0910", "1010", "1108", "1208", "1306"], //1942
[0, "0205", "0306", "0405", "0504", "0603", "0702", "0801", "0831", "0929", "1029", "1127", "1227"], //1943
[4, "0125", "0224", "0324", "0423", "0522", "0621", "0720", "0819", "0917", "1017", "1116", "1215", "1314"], //1944
[0, "0213", "0314", "0412", "0512", "0610", "0709", "0808", "0906", "1006", "1105", "1205", "1303"], //1945
[0, "0202", "0304", "0402", "0501", "0531", "0629", "0728", "0827", "0925", "1025", "1124", "1223"], //1946
[2, "0122", "0221", "0323", "0421", "0520", "0619", "0718", "0816", "0915", "1014", "1113", "1212", "1311"], //1947
[0, "0210", "0311", "0409", "0509", "0607", "0707", "0805", "0903", "1003", "1101", "1201", "1230"], //1948
[7, "0129", "0228", "0329", "0428", "0528", "0626", "0726", "0824", "0922", "1022", "1120", "1220", "1318"], //1949
[0, "0217", "0318", "0417", "0517", "0615", "0715", "0814", "0912", "1011", "1110", "1209", "1308"], //1950
[0, "0206", "0308", "0406", "0506", "0605", "0704", "0803", "0901", "1001", "1030", "1129", "1228"], //1951
[5, "0127", "0225", "0326", "0424", "0524", "0622", "0722", "0820", "0919", "1019", "1117", "1217", "1315"], //1952
[0, "0214", "0315", "0414", "0513", "0611", "0711", "0810", "0908", "1008", "1107", "1206", "1305"], //1953
[0, "0203", "0305", "0403", "0503", "0601", "0630", "0730", "0828", "0927", "1027", "1126", "1225"], //1954
[3, "0124", "0222", "0324", "0422", "0522", "0620", "0719", "0818", "0916", "1016", "1114", "1214", "1313"], //1955
[0, "0212", "0312", "0411", "0510", "0609", "0708", "0806", "0905", "1004", "1103", "1203", "1301"], //1956
[8, "0131", "0302", "0331", "0430", "0529", "0628", "0727", "0825", "0924", "1023", "1122", "1221", "1320"], //1957
[0, "0218", "0320", "0419", "0519", "0617", "0717", "0815", "0913", "1013", "1111", "1211", "1309"], //1958
[0, "0208", "0309", "0408", "0508", "0606", "0706", "0804", "0903", "1002", "1101", "1130", "1230"], //1959
[6, "0128", "0227", "0327", "0426", "0525", "0624", "0724", "0822", "0921", "1020", "1119", "1218", "1317"], //1960
[0, "0215", "0317", "0415", "0515", "0613", "0713", "0811", "0910", "1010", "1108", "1208", "1306"], //1961
[0, "0205", "0306", "0405", "0504", "0602", "0702", "0731", "0830", "0929", "1028", "1127", "1227"], //1962
[4, "0125", "0224", "0325", "0424", "0523", "0621", "0721", "0819", "0918", "1017", "1116", "1216", "1315"], //1963
[0, "0213", "0314", "0412", "0512", "0610", "0709", "0808", "0906", "1006", "1104", "1204", "1303"], //1964
[0, "0202", "0303", "0402", "0501", "0531", "0629", "0728", "0827", "0925", "1024", "1123", "1223"], //1965
[3, "0121", "0220", "0322", "0421", "0520", "0619", "0718", "0816", "0915", "1014", "1112", "1212", "1311"], //1966
[0, "0209", "0311", "0410", "0509", "0608", "0708", "0806", "0904", "1004", "1102", "1202", "1231"], //1967
[7, "0130", "0228", "0329", "0427", "0527", "0626", "0725", "0824", "0922", "1022", "1120", "1220", "1318"], //1968
[0, "0217", "0318", "0417", "0516", "0615", "0714", "0813", "0912", "1011", "1110", "1209", "1308"], //1969
[0, "0206", "0308", "0406", "0505", "0604", "0703", "0802", "0901", "0930", "1030", "1129", "1228"], //1970
[5, "0127", "0225", "0327", "0425", "0524", "0623", "0722", "0821", "0919", "1019", "1118", "1218", "1316"], //1971
[0, "0215", "0315", "0414", "0513", "0611", "0711", "0809", "0908", "1007", "1106", "1206", "1304"], //1972
[0, "0203", "0305", "0403", "0503", "0601", "0630", "0730", "0828", "0926", "1026", "1125", "1224"], //1973
[4, "0123", "0222", "0324", "0422", "0522", "0620", "0719", "0818", "0916", "1015", "1114", "1214", "1312"], //1974
[0, "0211", "0313", "0412", "0511", "0610", "0709", "0807", "0906", "1005", "1103", "1203", "1301"], //1975
[8, "0131", "0301", "0331", "0429", "0529", "0627", "0727", "0825", "0924", "1023", "1121", "1221", "1319"], //1976
[0, "0218", "0320", "0418", "0518", "0617", "0716", "0815", "0913", "1013", "1111", "1211", "1309"], //1977
[0, "0207", "0309", "0407", "0507", "0606", "0705", "0804", "0902", "1002", "1101", "1130", "1230"], //1978
[6, "0128", "0227", "0328", "0426", "0526", "0624", "0724", "0823", "0921", "1021", "1120", "1219", "1318"], //1979
[0, "0216", "0317", "0415", "0514", "0613", "0712", "0811", "0909", "1009", "1108", "1207", "1306"], //1980
[0, "0205", "0306", "0405", "0504", "0602", "0702", "0731", "0829", "0928", "1028", "1126", "1226"], //1981
[4, "0125", "0224", "0325", "0424", "0523", "0621", "0721", "0819", "0917", "1017", "1115", "1215", "1314"], //1982
[0, "0213", "0315", "0413", "0513", "0611", "0710", "0809", "0907", "1006", "1105", "1204", "1303"], //1983
[10, "0202", "0303", "0401", "0501", "0531", "0629", "0728", "0827", "0925", "1024", "1123", "1222", "1321"], //1984
[0, "0220", "0321", "0420", "0520", "0618", "0718", "0816", "0915", "1014", "1112", "1212", "1310"], //1985
[0, "0209", "0310", "0409", "0509", "0607", "0707", "0806", "0904", "1004", "1102", "1202", "1231"], //1986
[6, "0129", "0228", "0329", "0428", "0527", "0626", "0726", "0824", "0923", "1023", "1121", "1221", "1319"], //1987
[0, "0217", "0318", "0416", "0516", "0614", "0714", "0812", "0911", "1011", "1109", "1209", "1308"], //1988
[0, "0206", "0308", "0406", "0505", "0604", "0703", "0802", "0831", "0930", "1029", "1128", "1228"], //1989
[5, "0127", "0225", "0327", "0425", "0524", "0623", "0722", "0820", "0919", "1018", "1117", "1217", "1316"], //1990
[0, "0215", "0316", "0415", "0514", "0612", "0712", "0810", "0908", "1008", "1106", "1206", "1305"], //1991
[0, "0204", "0304", "0403", "0503", "0601", "0630", "0730", "0828", "0926", "1026", "1124", "1224"], //1992
[3, "0123", "0221", "0323", "0422", "0521", "0620", "0719", "0818", "0916", "1015", "1114", "1213", "1312"], //1993
[0, "0210", "0312", "0411", "0511", "0609", "0709", "0807", "0906", "1005", "1103", "1203", "1301"], //1994
[8, "0131", "0301", "0331", "0430", "0529", "0628", "0727", "0826", "0925", "1024", "1122", "1222", "1320"], //1995
[0, "0219", "0319", "0418", "0517", "0616", "0715", "0814", "0912", "1012", "1111", "1211", "1309"], //1996
[0, "0207", "0309", "0407", "0507", "0605", "0705", "0803", "0902", "1002", "1031", "1130", "1230"], //1997
[5, "0128", "0227", "0328", "0426", "0526", "0624", "0723", "0822", "0921", "1020", "1119", "1219", "1317"], //1998
[0, "0216", "0318", "0416", "0515", "0614", "0713", "0811", "0910", "1009", "1108", "1208", "1307"], //1999
[0, "0205", "0306", "0405", "0504", "0602", "0702", "0731", "0829", "0928", "1027", "1126", "1226"], //2000
[4, "0124", "0223", "0325", "0423", "0523", "0621", "0721", "0819", "0917", "1017", "1115", "1215", "1313"], //2001
[0, "0212", "0314", "0413", "0512", "0611", "0710", "0809", "0907", "1006", "1105", "1204", "1303"], //2002
[0, "0201", "0303", "0402", "0501", "0531", "0630", "0729", "0828", "0926", "1025", "1124", "1223"], //2003
[2, "0122", "0220", "0321", "0419", "0519", "0618", "0717", "0816", "0914", "1014", "1112", "1212", "1310"], //2004
[0, "0209", "0310", "0409", "0508", "0607", "0706", "0805", "0904", "1003", "1102", "1201", "1231"], //2005
[7, "0129", "0228", "0329", "0428", "0527", "0626", "0725", "0824", "0922", "1022", "1121", "1220", "1319"], //2006
[0, "0218", "0319", "0417", "0517", "0615", "0714", "0813", "0911", "1011", "1110", "1210", "1308"], //2007
[0, "0207", "0308", "0406", "0505", "0604", "0703", "0801", "0831", "0929", "1029", "1128", "1227"], //2008
[5, "0126", "0225", "0327", "0425", "0524", "0623", "0722", "0820", "0919", "1018", "1117", "1216", "1315"], //2009
[0, "0214", "0316", "0414", "0514", "0612", "0712", "0810", "0908", "1008", "1106", "1206", "1304"], //2010
[0, "0203", "0305", "0403", "0503", "0602", "0701", "0731", "0829", "0927", "1027", "1125", "1225"], //2011
[4, "0123", "0222", "0322", "0421", "0521", "0619", "0719", "0817", "0916", "1015", "1114", "1213", "1312"], //2012
[0, "0210", "0312", "0410", "0510", "0608", "0708", "0807", "0905", "1005", "1103", "1203", "1301"], //2013
[9, "0131", "0301", "0331", "0429", "0529", "0627", "0727", "0825", "0924", "1024", "1122", "1222", "1320"], //2014
[0, "0219", "0320", "0419", "0518", "0616", "0716", "0814", "0913", "1013", "1112", "1211", "1310"], //2015
[0, "0208", "0309", "0407", "0507", "0605", "0704", "0803", "0901", "1001", "1031", "1129", "1229"], //2016
[6, "0128", "0226", "0328", "0426", "0526", "0624", "0723", "0822", "0920", "1020", "1118", "1218", "1317"], //2017
[0, "0216", "0317", "0416", "0515", "0614", "0713", "0811", "0910", "1009", "1108", "1207", "1306"], //2018
[0, "0205", "0307", "0405", "0505", "0603", "0703", "0801", "0830", "0929", "1028", "1126", "1226"], //2019
[4, "0125", "0223", "0324", "0423", "0523", "0621", "0721", "0819", "0917", "1017", "1115", "1215", "1313"], //2020
[0, "0212", "0313", "0412", "0512", "0610", "0710", "0808", "0907", "1006", "1105", "1204", "1303"], //2021
[0, "0201", "0303", "0401", "0501", "0530", "0629", "0729", "0827", "0926", "1025", "1124", "1223"], //2022
[2, "0122", "0220", "0322", "0420", "0519", "0618", "0718", "0816", "0915", "1015", "1113", "1213", "1311"], //2023
[0, "0210", "0310", "0409", "0508", "0606", "0706", "0804", "0903", "1003", "1101", "1201", "1231"], //2024
[6, "0129", "0228", "0329", "0428", "0527", "0625", "0725", "0823", "0922", "1021", "1120", "1220", "1319"], //2025
[0, "0217", "0319", "0417", "0517", "0615", "0714", "0813", "0911", "1010", "1109", "1209", "1308"], //2026
[0, "0206", "0308", "0407", "0506", "0605", "0704", "0802", "0901", "0930", "1029", "1128", "1228"], //2027
[5, "0126", "0225", "0326", "0425", "0524", "0623", "0722", "0820", "0919", "1018", "1116", "1216", "1315"], //2028
[0, "0213", "0315", "0414", "0513", "0612", "0711", "0810", "0908", "1008", "1106", "1205", "1304"], //2029
[0, "0203", "0304", "0403", "0502", "0601", "0701", "0730", "0829", "0927", "1027", "1125", "1225"], //2030
[3, "0123", "0221", "0323", "0422", "0521", "0620", "0719", "0818", "0917", "1016", "1115", "1214", "1313"], //2031
[0, "0211", "0312", "0410", "0509", "0608", "0707", "0806", "0905", "1004", "1103", "1203", "1301"], //2032
[7, "0131", "0301", "0331", "0429", "0528", "0627", "0726", "0825", "0923", "1023", "1122", "1222", "1320"], //2033
[0, "0219", "0320", "0419", "0518", "0616", "0716", "0814", "0913", "1012", "1111", "1211", "1309"], //2034
[0, "0208", "0310", "0408", "0508", "0606", "0705", "0804", "0902", "1001", "1031", "1130", "1229"], //2035
[6, "0128", "0227", "0328", "0426", "0526", "0624", "0723", "0822", "0920", "1019", "1118", "1217", "1316"], //2036
[0, "0215", "0317", "0416", "0515", "0614", "0713", "0811", "0910", "1009", "1107", "1207", "1305"], //2037
[0, "0204", "0306", "0405", "0504", "0603", "0702", "0801", "0830", "0929", "1028", "1126", "1226"], //2038
[5, "0124", "0223", "0325", "0423", "0523", "0622", "0721", "0820", "0918", "1018", "1116", "1216", "1314"], //2039
[0, "0212", "0313", "0411", "0511", "0610", "0709", "0808", "0906", "1006", "1105", "1204", "1303"], //2040
[0, "0201", "0302", "0401", "0430", "0530", "0628", "0728", "0827", "0925", "1025", "1124", "1223"], //2041
[2, "0122", "0220", "0322", "0420", "0519", "0618", "0717", "0816", "0914", "1014", "1113", "1212", "1311"], //2042
[0, "0210", "0311", "0410", "0509", "0607", "0707", "0805", "0903", "1003", "1102", "1201", "1231"], //2043
[7, "0130", "0229", "0329", "0428", "0527", "0625", "0725", "0823", "0921", "1021", "1119", "1219", "1318"], //2044
[0, "0217", "0319", "0417", "0517", "0615", "0714", "0813", "0911", "1010", "1109", "1208", "1307"], //2045
[0, "0206", "0308", "0406", "0506", "0604", "0704", "0802", "0901", "0930", "1029", "1128", "1227"], //2046
[5, "0126", "0225", "0326", "0425", "0525", "0623", "0723", "0821", "0920", "1019", "1117", "1217", "1315"], //2047
[0, "0214", "0314", "0413", "0513", "0611", "0711", "0810", "0908", "1008", "1106", "1205", "1304"], //2048
[0, "0202", "0304", "0402", "0502", "0531", "0630", "0730", "0828", "0927", "1027", "1125", "1225"], //2049
[3, "0123", "0221", "0323", "0421", "0521", "0619", "0719", "0817", "0916", "1016", "1114", "1214", "1313"], //2050
[0, "0211", "0313", "0411", "0510", "0609", "0708", "0806", "0905", "1005", "1103", "1203", "1302"], //2051
[8, "0201", "0301", "0331", "0429", "0528", "0627", "0726", "0824", "0923", "1022", "1121", "1221", "1320"], //2052
[0, "0219", "0320", "0419", "0518", "0616", "0716", "0814", "0912", "1012", "1110", "1210", "1309"], //2053
[0, "0208", "0309", "0408", "0508", "0606", "0705", "0804", "0902", "1001", "1031", "1129", "1229"], //2054
[6, "0128", "0226", "0328", "0427", "0526", "0625", "0724", "0823", "0921", "1020", "1119", "1218", "1317"], //2055
[0, "0215", "0316", "0415", "0515", "0613", "0713", "0811", "0910", "1009", "1107", "1207", "1305"], //2056
[0, "0204", "0305", "0404", "0504", "0602", "0702", "0731", "0830", "0929", "1028", "1126", "1226"], //2057
[4, "0124", "0223", "0324", "0423", "0522", "0621", "0720", "0819", "0918", "1017", "1116", "1216", "1314"], //2058
[0, "0212", "0314", "0412", "0512", "0610", "0710", "0808", "0907", "1006", "1105", "1205", "1304"], //2059
[0, "0202", "0303", "0401", "0501", "0530", "0628", "0727", "0826", "0924", "1024", "1123", "1223"], //2060
[3, "0121", "0220", "0322", "0420", "0519", "0618", "0717", "0815", "0914", "1013", "1112", "1212", "1311"], //2061
[0, "0209", "0311", "0410", "0509", "0607", "0707", "0805", "0903", "1003", "1101", "1201", "1231"], //2062
[7, "0129", "0228", "0330", "0428", "0528", "0626", "0726", "0824", "0922", "1022", "1120", "1220", "1318"], //2063
[0, "0217", "0318", "0417", "0516", "0615", "0714", "0813", "0911", "1010", "1109", "1208", "1307"], //2064
[0, "0205", "0307", "0406", "0505", "0604", "0704", "0802", "0901", "0930", "1029", "1128", "1227"], //2065
[5, "0126", "0224", "0326", "0424", "0524", "0623", "0722", "0821", "0919", "1019", "1117", "1217", "1315"], //2066
[0, "0214", "0315", "0414", "0513", "0612", "0711", "0810", "0909", "1008", "1107", "1206", "1305"], //2067
[0, "0203", "0304", "0402", "0502", "0531", "0629", "0729", "0828", "0926", "1026", "1125", "1224"], //2068
[4, "0123", "0221", "0323", "0421", "0521", "0619", "0718", "0817", "0915", "1015", "1114", "1214", "1312"], //2069
[0, "0211", "0312", "0411", "0510", "0609", "0708", "0806", "0905", "1004", "1103", "1203", "1301" ], // 2070
[8, "0131", "0302", "0331", "0430", "0529", "0628", "0727", "0825", "0924", "1023", "1122", "1221", "1320" ], // 2071
[0, "0219", "0320", "0418", "0518", "0616", "0716", "0814", "0912", "1012", "1110", "1210", "1308" ], // 2072
[0, "0207", "0309", "0407", "0507", "0606", "0705", "0804", "0902", "1001", "1031", "1129", "1229" ], // 2073
[6, "0127", "0226", "0327", "0426", "0526", "0624", "0724", "0822", "0921", "1020", "1119", "1218", "1317" ], // 2074
[0, "0215", "0317", "0415", "0515", "0613", "0713", "0812", "0910", "1010", "1108", "1208", "1306" ], // 2075
[0, "0205", "0305", "0404", "0503", "0602", "0701", "0731", "0829", "0928", "1028", "1126", "1226" ], // 2076
[4, "0124", "0223", "0324", "0423", "0522", "0620", "0720", "0818", "0917", "1017", "1116", "1215", "1314" ], // 2077
[0, "0212", "0314", "0412", "0512", "0610", "0709", "0808", "0906", "1006", "1105", "1204", "1303" ], // 2078
[0, "0202", "0303", "0402", "0501", "0531", "0629", "0728", "0827", "0925", "1025", "1123", "1223" ], // 2079
[3, "0122", "0221", "0321", "0420", "0519", "0618", "0717", "0815", "0914", "1013", "1111", "1211", "1310" ], // 2080
[0, "0209", "0310", "0409", "0509", "0607", "0707", "0805", "0903", "1003", "1101", "1130", "1230" ], // 2081
[7, "0129", "0227", "0329", "0428", "0528", "0626", "0725", "0824", "0922", "1022", "1120", "1219", "1318" ], // 2082
[0, "0217", "0318", "0417", "0517", "0615", "0715", "0813", "0912", "1011", "1110", "1209", "1308" ], // 2083
[0, "0206", "0307", "0405", "0505", "0603", "0703", "0802", "0831", "0930", "1029", "1128", "1227" ], // 2084
[5, "0126", "0224", "0326", "0424", "0523", "0622", "0722", "0820", "0919", "1019", "1117", "1217", "1315" ], // 2085
[0, "0214", "0315", "0414", "0513", "0611", "0711", "0809", "0908", "1008", "1106", "1206", "1305" ], // 2086
[0, "0203", "0305", "0403", "0503", "0601", "0630", "0730", "0828", "0927", "1026", "1125", "1225" ], // 2087
[4, "0124", "0222", "0323", "0421", "0521", "0619", "0718", "0817", "0915", "1014", "1113", "1213", "1312" ], // 2088
[0, "0210", "0312", "0411", "0510", "0609", "0708", "0806", "0904", "1004", "1102", "1202", "1301" ], // 2089
[8, "0130", "0301", "0331", "0430", "0529", "0628", "0727", "0825", "0924", "1023", "1121", "1221", "1320" ], // 2090
[0, "0218", "0320", "0419", "0518", "0617", "0716", "0815", "0913", "1013", "1111", "1210", "1309" ], // 2091
[0, "0207", "0308", "0407", "0506", "0605", "0705", "0803", "0902", "1001", "1031", "1129", "1229" ], // 2092
[6, "0127", "0225", "0327", "0426", "0525", "0624", "0723", "0822", "0921", "1020", "1119", "1218", "1317" ], // 2093
[0, "0215", "0316", "0415", "0514", "0613", "0712", "0811", "0910", "1009", "1108", "1208", "1306" ], // 2094
[0, "0205", "0306", "0405", "0504", "0602", "0702", "0731", "0830", "0928", "1028", "1127", "1227" ], // 2095
[4, "0125", "0224", "0324", "0423", "0522", "0620", "0720", "0818", "0916", "1016", "1115", "1215", "1313" ], // 2096
[0, "0212", "0314", "0412", "0512", "0610", "0709", "0808", "0906", "1005", "1104", "1204", "1302" ], // 2097
[0, "0201", "0303", "0402", "0501", "0531", "0629", "0728", "0826", "0925", "1024", "1123", "1222" ], // 2098
[2, "0121", "0220", "0322", "0420", "0520", "0619", "0718", "0816", "0915", "1014", "1112", "1212", "1310" ] // 2099
];
var MINYEAR = 1900;
var _chineseLunar = {};

/*
* 分析日期表达式,并提取其中的单位和数值
*/
var _expression = function(expr) {
var list = expr.match(/[+-]?\d+((ms)|[yMdhmsw])/g);
var result = [];
for(var i = 0; i < list.length; i++){
//提取单位和数值
if (/([+-])(\d+)(.+)/.test(list[i])) {
var val = parseInt(RegExp.$2);
if(RegExp.$1 === "-") val = -val;

result.push({
value: val,
unit: RegExp.$3
});
};
return result;
};
};

//计算公历两个日期之差
var _solarDiff = function(left, right, interval) {
var span = left.getTime() - right.getTime(); //相差毫秒
switch (interval) {
case "y": return parseInt(left.getFullYear() - right.getFullYear());
case "M": return parseInt((left.getFullYear() - right.getFullYear()) * 12 + (left.getMonth() - right.getMonth()));
case "d": return Math.ceil(span / 1000 / 60 / 60 / 24);
case "w": return Math.floor(span / 1000 / 60 / 60 / 24 / 7);
case "h": return Math.floor(span / 1000 / 60 / 60);
case "m": return Math.floor(span / 1000 / 60);
case "s": return Math.floor(span / 1000);
case "ms": return parseInt(span);
}
}

//_solarAdd(date, '5d-6m');
var _solarAdd = function(date, expr){

};

/*
找到农历
isPerYear,是否为农历前一年的对应数据
*/
var _findLunar = function(solar, index, minMonth, maxMonth, isPreYear) {
//取得映射的数据
var mapping = MAPPING[index];
if (!mapping) return false;

var year = solar.getFullYear()
, month = solar.getMonth() + 1
, date = solar.getDate();
var lunarYear = year;
var lunarMonth, find, solarMonth;

//查找农历
for (var i = mapping.length - 1; i > 0; i--) {
lunarMonth = i;
//取对应的农历月与天
var segMonth = Number(mapping[i].substring(0, 2));
var segDay = Number(mapping[i].substring(2, 4));

solarMonth = isPreYear && segMonth > 12 ? segMonth - 12 : segMonth;
find = solarMonth < month || (solarMonth == month && segDay <= date) ||
((segMonth <= minMonth || segMonth >= maxMonth) && isPreYear);
if ((solarMonth == 12 && solarMonth > month && i == 1)) {
find = true;
year--;
};
if (find) break;
}

//如果找到,则赋值
if(!find) return false;
//取前一年
if (isPreYear && segMonth == 12) year = year - 1;
lunarYear = isPreYear ? lunarYear - 1 : lunarYear;
return {
year: year,
month: solarMonth,
day: segDay,
lunarYear: lunarYear,
lunarMonth: lunarMonth,
leapMonth: mapping[0] //闰月
};
};

//日期累加
var _dateAdd = function(lunar, value, unit){
if(unit == 'M'){
return _chineseLunar.monthAdd(lunar, value);
}else{
//转换为阳历,计算完再转为农历
var solar = _chineseLunar.lunarToSolar(lunar);
solar = _solarAdd(solar, value, unit);
return _chineseLunar.solarToLunar(solar);
};
};

/*
农历相加
*/
_chineseLunar.dateAdd = function(lunar, expr) {
//分析表达式
var list = _expression(expr);

for(var i = 0; i < list.length; i ++){
lunar = _dateAdd(lunar, list[i]);
};
return lunar;
};

/*
计算两个农历时间的差值,主要计算月份之间的差,其它和公历是一样的
*/
_chineseLunar.dateDiff = function(lunar1, lunar2, expr) {
//计算农历月份差值
if(expr == "M"){
return _chineseLunar.monthDiff(lunar1, lunar2);
};

//先转成公历,除了月份,其它的都可以按公历计算
var solar1 = _chineseLunar.lunarToSolar(lunar1);
var solar2 = _chineseLunar.lunarToSolar(lunar2);
//再把农历转到公历
return _solarDiff(solar2, solar1, expr);
};

/*
农历月份相加
*/
_chineseLunar.monthAdd = function(lunar, inc) {
//如果是Date,则转换为农历
if (lunar instanceof Date) lunar = _chineseLunar.solarToLunar(lunar);
if (inc == 0) return lunar;

var year = lunar.year, count;
var month = lunar.month;
if(lunar.leap ||
(lunar.leapMonth > 0 && lunar.month > lunar.leapMonth)) month++;

var run = true;
do {
//计算当前年有多少个月
count = _chineseLunar.monthsOfYear(year);
inc = inc + month - count;
if (inc <= 0) {
run = false;
month = year == lunar.year ? count + inc : count + inc - month;
}else {
year++;
month = 1;
}
} while (run);

//获取最后的结果年的闰月是哪一个月
var leapMonth = _chineseLunar.leapMonthOfYear(year);
var leap = false;
//如果闰月大于农历月,则月份减1
if (leapMonth > 0 && month > leapMonth) {
month--;
//如果减完后月份和闰月相等,表示是闰月
leap = month == leapMonth;
}

return {
year: year,
month: month,
leap: leap,
leapMonth: leapMonth
};
};

/*
* 返回两段日期的农历差了多少个月,因为有闰月,所以和公历不一样
* date1和date2允许为公历
*/
_chineseLunar.monthDiff = function(lunar1, lunar2) {
//如果是公历的日期格式,则转换为农历
var count = 0;

//如果数据类型是日期,则转换为农历
if (lunar1 instanceof Date) lunar1 = _chineseLunar.solarToLunar(lunar1);
if (lunar2 instanceof Date) lunar2 = _chineseLunar.solarToLunar(lunar2);

//两个日期是同一年
if (lunar1.year == lunar2.year) {
count = lunar2.month - lunar1.month;
//中间有闰月的存在,计数器加一
if (lunar1.leapMonth >= lunar1.month && lunar1.leapMonth <= lunar2.month) count++;
} else {
//计算首年,如果当前的闰月大于当前月,或者当前年有闰月且当前月等于闰月,但当前月又不是闰月,则要多添加一个月
count = 12;
if(lunar1.leapMonth > lunar1.month ||
(lunar1.leapMonth == lunar1.month && !lunar1.isLeaMonth)) count += 1;
count -= lunar1.month;

//计算两年之间中间的年月份
var year = lunar1.year + 1;
for (var i = year; i < lunar2.year; i++) {
count += _chineseLunar.monthsOfYear(year++);
}
//计算最后一年
count += lunar2.month;
if (lunar2.isLeapMonth || lunar2.month < lunar2.leapMonth) count++;
};
return count;
};

/*
* 计算某年某月一个有多少天
* daysOfMonth({}) 或者 daysOfMonth(year, month, leap);
*/
_chineseLunar.daysOfMonth = function(year, month, leap) {
if (typeof (year) == "object") {
month = year.month;
leap = year.leap;
year = year.year;
};

var date1 = _chineseLunar.lunarToSolar(year, month, 1, leap);
var leapMonth = _chineseLunar.leapMonthOfYear(year);
if (leapMonth == month && !leap) {
//如果是闰月和当前一月一至,且当前月不是闰月,说明下一个月是闰月,例如2009年5月,这一年闰5月,如果传过来的不是闰月,那么下一个月就是闰月
leap = true;
} else if (month == 12) {
//农历的最后一个月
year++;
month = 1;
} else {
leap = false;
month++;
};

var date2 = _chineseLunar.lunarToSolar(year, month, 1, leap);
return _chineseLunar.dateDiff(date2, date1, "d");

};

//获取农历某一年有多少个月
_chineseLunar.monthsOfYear = function(year) {
return MAPPING[year - MINYEAR].length - 1;
};

//获取农历某年的闰月是几月,
_chineseLunar.leapMonthOfYear = function(year) {
var info = MAPPING[year - MINYEAR];
return info ? info[0] : 0;
};

/*
农历转阳历
lunarToSolar({}),或者lunarToSolar(year, month, day, leap)
*/
_chineseLunar.lunarToSolar = function(year, month, day, leap) {
var arg0 = arguments[0];

//第一个参数是对象
if (typeof (arg0) == "object" && arguments.length == 1) {
year = arg0.year;
month = arg0.month;
day = arg0.day;
leap = arg0.leap;
};

//根据偏移量取得映射数据
var offset = year - MINYEAR;
//所查询的日期超出范围
if (offset < 0 || offset > MAPPING.length){
throw new Error('Specified date range is invalid.');
};

//取得润月是哪一个月
var leapMonth = MAPPING[offset][0];
//如果isLeap=true,并且当前月份就是闰月,或者本月有闰月,且当前月份大于闰月,则月份需要加1
if ((leap && month == leapMonth) ||
(leapMonth > 0 && month > leapMonth)){
month += 1;
};

//取出对应到某个月的片断
var segment = MAPPING[offset][month]; //农历第一天对应公历的具体天
var mapMonth = Number(segment.substring(0, 2))
var mapDate = Number(segment.substring(2, 4));

if (mapMonth > 12) {
year += 1;
mapMonth -= 12;
};

var solar = new Date(year, mapMonth - 1, mapDate);
var time = solar.getTime() + ((day - 1) * 24 * 60 * 60 * 1000);
return new Date(time);
};

/*
公历转农历
1.查找对应农历初一是哪一天
2.将农历初一转换为公历
3.计入偏移量
*/
_chineseLunar.solarToLunar = function(solar, format) {
var offset = solar.getFullYear() - MINYEAR;
//超出范围
if(offset <= 0 || offset >= MAPPING.length){
throw new Error('Specified date range is invalid.');
};

//查找范围内的农历数据
var data = _findLunar(solar, offset, 0, 13, false);
//如果没有找到,则找前一年的,因为农历在公历之前,并且不会超过一年,查一年就可以了
data = data || _findLunar(solar, offset - 1, 12, 99, true);

//还是没有找到,表示超出范围
if (!data) return false;

//农历初一对应公历的哪一天
var firstDay = new Date(data.year, data.month - 1, data.day);
var day = _solarDiff(solar, firstDay, "d") + 1;

//返回的农历结果
var result = {
leap: data.leapMonth > 0 && data.leapMonth + 1 == data.lunarMonth,
year: data.lunarYear,
month: data.leapMonth > 0 && data.lunarMonth > data.leapMonth ? data.lunarMonth - 1 : data.lunarMonth,
day: day,
leapMonth: data.leapMonth
};

//判断是否要格式化结果
return (format && result) ? _chineseLunar.format(result, format) : result;
};

//获取中国传统干支的名称
_chineseLunar.traditionalYearName = function(year) {
var Gan = "甲乙丙丁戊己庚辛壬癸".split("");
var Zhi = "子丑寅卯辰巳午未申酉戌亥".split("");
year = year - MINYEAR + 36;
return (Gan[year % 10] + Zhi[year % 12] + "年");
};

//获取中文的年
_chineseLunar.yearName = function(year) {
var cnStr = '〇,一,二,三,四,五,六,七,八,九'.split(",");
var cYear = year.toString();
var result = '';
for (var i = 0; i < cYear.length; i++) {
result += cnStr[parseInt(cYear.charAt(i))];
}
return result + '年';
};

//获取中国的生肖
_chineseLunar.animalName = function(year) {
return "鼠牛虎兔龙蛇马羊猴鸡狗猪".split("")[(year - 4) % 12];
};

//获取农历月的名称
_chineseLunar.monthName = function(month, traditional, leap) {
var monthName = "正,二,三,四,五,六,七,八,九,十,十一,十二".split(",");
if (traditional) { monthName[11] = "腊" }
return (leap ? "闰" : "") + monthName[month - 1] + "月";
};

//获取农历传统天的名称
_chineseLunar.dayName = function(lunar) {
switch (lunar) {
case 10: return '初十';
case 20: return '二十';
case 30: return '三十';
default: return ("初十廿卅".split("")[Math.floor(lunar / 10)] +
"一二三四五六七八九十".split("")[(lunar - 1) % 10]) || lunar;
}
};

//格式化农历日期,date是农历的日期
_chineseLunar.format = function(lunar, expr) {
return expr.replace(/[TAYyMmdD]/g, function(m, i) {
switch (m) {
//获取传统的年
case "T": return _chineseLunar.traditionalYearName(lunar.year);
//获取生肖
case "A": return _chineseLunar.animalName(lunar.year);
//获取中文的年
case "Y": return _chineseLunar.yearName(lunar.year);
//获取数字年
case "y": return lunar.year;
//获取月份
case "m": return _chineseLunar.monthName(lunar.month, false, lunar.leap);
//获取传统的月
case "M": return _chineseLunar.monthName(lunar.month, true, lunar.leap);
//获取天
case "d": return _chineseLunar.dayName(lunar.day);
//如果是初一,则显示月,而不是显示
case "D":
if(lunar.day == 1){
return _chineseLunar.monthName(lunar.month, false, lunar.leap);
}else{
return _chineseLunar.dayName(lunar.day);
};
}
});
};


if (typeof define === 'function'){
define (function (){
return _chineseLunar;
});
}else if(typeof exports === 'object'){
module.exports = _chineseLunar;
}else{
window.chineseLunar = _chineseLunar;
};
})();

2.3.公共库直接引入

使用下面的链接直接引入 chinese-lunar.js 文件,

1
- <script src="https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script>

2.4.新建 calendar.js 文件

继续在博客主题目录下的 /themes/anzhiyu/source/js 文件夹下面新建 calendar.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
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
// pjax适配
document.addEventListener("DOMContentLoaded", () => {
cardTimes();
cardRefreshTimes();
}); //第一次加载

document.addEventListener("pjax:complete", () => {
cardTimes();
cardRefreshTimes();
}) // pjax加载完成(切换页面)后再执行一次

var now = new Date();
var year, month, week, date, dates, weekStr, monthStr;
var asideTime, asideDay, asideDayNum;
var animalYear, ganzhiYear, lunarMon, lunarDay;

// 刷新时钟时间
function cardRefreshTimes() {
var cardWidgetSchedule = document.getElementById("card-widget-schedule");
if (cardWidgetSchedule) {
asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
cardWidgetSchedule.querySelector("#pBar_year").value = asideDay;
cardWidgetSchedule.querySelector("#p_span_year").innerHTML = (asideDay / 365 * 100).toFixed(2) + "%";
cardWidgetSchedule.querySelector(".schedule-r0 .schedule-d1 .aside-span2").innerHTML = "还剩<a> " + (365 - asideDay).toFixed(0) + " </a>天";
cardWidgetSchedule.querySelector("#pBar_month").value = date;
cardWidgetSchedule.querySelector("#pBar_month").max = dates;
cardWidgetSchedule.querySelector("#p_span_month").innerHTML = (date / dates * 100).toFixed(2) + "%";
cardWidgetSchedule.querySelector(".schedule-r1 .schedule-d1 .aside-span2").innerHTML = "还剩<a> " + (dates - date) + " </a>天";
cardWidgetSchedule.querySelector("#pBar_week").value = week == 0 ? 7 : week;
cardWidgetSchedule.querySelector("#p_span_week").innerHTML = ((week == 0 ? 7 : week) / 7 * 100).toFixed(2) + "%";
cardWidgetSchedule.querySelector(".schedule-r2 .schedule-d1 .aside-span2").innerHTML = "还剩<a> " + (7 - (week == 0 ? 7 : week)) + " </a>天";
}
}
// 侧边栏日历卡片
function cardTimes() {
year = now.getFullYear();
month = now.getMonth();
week = now.getDay();
date = now.getDate();
var cardWidgetCalendar = document.getElementById("card-widget-calendar");
if (cardWidgetCalendar) {
var year_flag = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? true : false;
switch (week) {
case 0: weekStr = "周日"; break;
case 1: weekStr = "周一"; break;
case 2: weekStr = "周二"; break;
case 3: weekStr = "周三"; break;
case 4: weekStr = "周四"; break;
case 5: weekStr = "周五"; break;
case 6: weekStr = "周六"; break;
default: console.log("异常情况");
}
switch (month) {
case 0: monthStr = "1月"; dates = 31; break;
case 1: monthStr = "2月"; dates = year_flag ? 29 : 28; break;
case 2: monthStr = "3月"; dates = 31; break;
case 3: monthStr = "4月"; dates = 30; break;
case 4: monthStr = "5月"; dates = 31; break;
case 5: monthStr = "6月"; dates = 30; break;
case 6: monthStr = "7月"; dates = 31; break;
case 7: monthStr = "8月"; dates = 31; break;
case 8: monthStr = "9月"; dates = 30; break;
case 9: monthStr = "10月"; dates = 31; break;
case 10: monthStr = "11月"; dates = 30; break;
case 11: monthStr = "12月"; dates = 31; break;
default: console.log("异常情况");
}
var week_first = (week + 8 - date % 7) % 7;
var count_days = "";
var count_flag = false;
var ds;
var row_h = 7 - week_first; //第一行天数
var row_f = (dates - row_h) % 7; //最后一行的天数
var rows = row_f == 0 ? Math.floor((dates - row_h) / 7) + 1 : Math.floor((dates - row_h) / 7) + 2;
var calendar = cardWidgetCalendar.querySelector("#calendar-main");
var gap = cardWidgetCalendar.querySelector("#calendar-date");
switch (rows) {
case 4: gap.style.fontSize = "36px"; break;
case 5: gap.style.fontSize = "48px"; break;
case 6: gap.style.fontSize = "64px"; break;
default: gap.style.fontSize = "64px";
}
for (let r = 0; r < rows; r++) {
if (calendar.querySelector(".calendar-r" + r) == null) {
calendar.innerHTML += "<div class='calendar-r" + r + "'></div>";
}
for (let d = 0; d < 7; d++) {
if (r == 0 && d == week_first) { //本月第一天
count_days = 1;
count_flag = true;
}
if (count_days == date) { //当日日期
ds = " class='now'";
} else ds = "";
if (calendar.querySelector(".calendar-r" + r + " .calendar-d" + d + " a") == null) {
calendar.querySelector(".calendar-r" + r).innerHTML += "<div class='calendar-d" + d + "'><a" + ds + ">" + count_days + "</a></div>";
}
if (count_days >= dates) {
count_days = "";
count_flag = false;
}
if (count_flag) count_days += 1;
}
}
var lunar = chineseLunar.solarToLunar(new Date(year, month, date));
animalYear = chineseLunar.format(lunar, "A"); //生肖属相
ganzhiYear = chineseLunar.format(lunar, "T").slice(0, -1); //天干地支
lunarMon = chineseLunar.format(lunar, "M"); //月份
lunarDay = chineseLunar.format(lunar, "d"); //日期
var anniversary = new Date("2025/01/28 00:00:00");
var countDown = Math.floor((anniversary - now) / 1e3 / 60 / 60 / 24) + 1; // 算上当天
asideTime = new Date(new Date().getFullYear() + "/01/01 00:00:00"); // 侧边栏倒计时
asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
asideDayNum = Math.floor(asideDay);
var asideWeekNum = ((week - asideDayNum % 7) >= 0) ? (Math.ceil(asideDayNum / 7)) : (Math.ceil(asideDayNum / 7) + 1);
cardWidgetCalendar.querySelector("#calendar-week").innerHTML = "第" + asideWeekNum + "周&nbsp;" + weekStr; //星期
cardWidgetCalendar.querySelector("#calendar-date").innerHTML = date.toString().padStart(2, '0'); //日期
cardWidgetCalendar.querySelector("#calendar-solar").innerHTML = year + "年" + monthStr + "&nbsp;第" + asideDay.toFixed(0) + "天"; //年份
cardWidgetCalendar.querySelector("#calendar-lunar").innerHTML = ganzhiYear + animalYear + "年&nbsp;" + lunarMon + lunarDay; //农历
document.getElementById("schedule-days").innerHTML = countDown; //农历
}
}

其中,需要注意修改设定的时间,在上面的代码中搜索 anniversary,会得到如下代码

1
var anniversary = new Date("2025/01/28 00:00:00");

修改里面的时间,为下一年的春节时间

1
var anniversary = new Date("2027/02/05 00:00:00");

这两个JS文件同样分享给大家,做好防备链接丢失工作。

1
https://www.liublog.cn/uploads/soft/20260221/安知鱼主题侧边栏日历JS文件.rar

3.创建CSS 文件

在博客主题目录下的 /themes/anzhiyu/source/css 文件夹下创建 calendar.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
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
:root {
--gavin-highlight: rgb(var(--gavin-theme-color));
--gavin-theme-color-light: 0,100,255;
--gavin-theme-color-dark: 0,150,255;
}

[data-theme="light"] {
--op: 255, 255, 255;
--op-dis: 0, 0, 0;
--f-0: #fff;
--dis-f-0: #000;
--gavin-theme-color: var(--gavin-theme-color-light);
}

[data-theme="dark"] {
--op: 0, 0, 0;
--op-dis: 255, 255, 255;
--f-0: #000;
--dis-f-0: #fff;
--gavin-theme-color: var(--gavin-theme-color-dark);
}

.card-widget {
padding: 10px !important;
max-height: calc(100vh - 100px);
}

.card-times a,
.card-times div {
color: var(--dis-f-0);
}

#card-widget-calendar .item-content {
display: flex;
}

#calendar-area-left {
width: 45%;
}

#calendar-area-right {
width: 55%;
}

#calendar-area-left,
#calendar-area-right {
height: 100%;
padding: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#calendar-main {
width: 100%;
}

#calendar-week {
height: 1.2rem;
font-size: 14px;
letter-spacing: 1px;
font-weight: bold;
align-items: center;
display: flex;
}

#calendar-date {
height: 3rem;
line-height: 1.3;
font-size: 64px;
letter-spacing: 3px;
color: var(--gavin-highlight);
font-weight: bold;
align-items: center;
display: flex;
position: absolute;
top: calc(50% - 2.1rem);
}

#calendar-solar,
#calendar-lunar {
height: 1rem;
font-size: 12px;
align-items: center;
display: flex;
position: absolute;
}

#calendar-solar {
bottom: 2.1rem;
}

#calendar-lunar {
bottom: 1rem;
color: rgba(var(--op-dis),.4);
}

#calendar-main a {
height: 1rem;
width: 1rem;
border-radius: 50%;
font-size: 12px;
line-height: 12px;
display: flex;
justify-content: center;
align-items: center;
}

#calendar-main a.now {
background: var(--gavin-highlight);
color: var(--f-0);
}

#calendar-main .calendar-rh a {
color: rgba(var(--op-dis),.4);
}

.calendar-rh,
.calendar-r0,
.calendar-r1,
.calendar-r2,
.calendar-r3,
.calendar-r4,
.calendar-r5 {
height: 1.2rem;
display: flex;
}

.calendar-d0,
.calendar-d1,
.calendar-d2,
.calendar-d3,
.calendar-d4,
.calendar-d5,
.calendar-d6 {
width: calc(100% / 7);
display: flex;
justify-content: center;
align-items: center;
}

#card-widget-schedule .item-content {
display: flex;
}

#schedule-area-left,
#schedule-area-right {
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#schedule-area-left {
width: 30%;
}

#schedule-area-right {
width: 70%;
padding: 0 5px;
}

.schedule-r0,
.schedule-r1,
.schedule-r2 {
height: 2rem;
width: 100%;
align-items: center;
display: flex;
}

.schedule-d0 {
width: 30px;
margin-right: 5px;
text-align: center;
font-size: 12px;
}

.schedule-d1 {
width: calc(100% - 35px);
height: 1.5rem;
align-items: center;
display: flex;
}

progress::-webkit-progress-bar {
background: linear-gradient(to right, rgba(var(--gavin-theme-color), .03), rgba(var(--gavin-theme-color), .05), rgba(var(--gavin-theme-color), .12));
border-radius: 5px;
overflow: hidden;
}

progress::-webkit-progress-value {
background: rgba(var(--gavin-theme-color), .24);
border-radius: 5px;
}

.aside-span1,
.aside-span2 {
height: 1rem;
font-size: 12px;
z-index: 1;
display: flex;
align-items: center;
position: absolute;
}

.aside-span1 {
margin-left: 5px;
}

.aside-span2 {
right: 20px;
color: rgba(var(--op-dis),.5);
}

.aside-span2 a {
margin: 0 3px;
}

#pBar_year,
#pBar_month,
#pBar_week {
width: 100%;
border-radius: 5px;
height: 100%;
}

#schedule-title,
#schedule-days,
#schedule-date {
display: flex;
align-items: center;
}

#schedule-title {
height: 25px;
line-height: 1;
font-size: 14px;
font-weight: bold;
}

#schedule-days {
height: 40px;
line-height: 1;
font-size: 30px;
font-weight: 900;
color: var(--gavin-highlight);
}

#schedule-date {
height: 20px;
line-height: 1;
font-size: 12px;
color: rgba(var(--op-dis),.5);
}

4.引入 CSS 和 JS 文件

在安知鱼主题的配置文件中搜索 inject ,就会找到如下代码

1
2
3
4
5
6
7
8
9
10
11
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 自定义css
# - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

bottom:
# 自定义js
# - <script src="/js/xxx"></script>

head 处进行自定义 CSS 的引入工作

1
- <link rel="stylesheet" href="/css/calendar.css" media="defer" onload="this.media='all'">

bottom 处进行自定义 js 的引入工作:

1
2
- <script src="/js/chinese-lunar.js"></script>
- <script src="/js/calendar.js"></script>

修改完之后的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 自定义css
# - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
- <link rel="stylesheet" href="/css/calendar.css" media="defer" onload="this.media='all'">

bottom:
# 自定义js
# - <script src="/js/xxx"></script>
- <script src="/js/chinese-lunar.js"></script>
- <script src="/js/calendar.js"></script>

5.结束语

最后 Hexo 三板斧,就可以在页面侧边栏查看效果。欢迎大家在评论区给予指正,让我们共同打造快节奏时代,不受算法牵制的属于我们自己的小空间!