预览

侧边栏的开发空间很大，一些使用频率很高的功能可以集成在这里，方便我们的使用。所以我做了一个日历的小组件，样式参考的是 TOP WIDGETS。

2024-03-10：更新：样式全新设计，布局更规整，背景层级减少，更契合侧边栏样式；整体高度缩减、字号缩小，更节省空间。

新版实现

以下为新版本（包含倒计时）

新建 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
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">2024-12-20</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>

引入 lunar.js

从链接地址下载 lunar.js 文件放在source/js路径下

calendar.js

路径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("2024/12/20 08:30:00");
        var countDown = Math.floor((anniversary - now) / 1e3 / 60 / 60 / 24);
        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; //农历
    }
}

calendar.css

路径source/css下新建calendar.css文件

css代码不一定全（比如部分公共样式），遗漏的可以自行F12调试补充

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

: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);
}

旧版实现

以下为旧版本，可以跳过。

感谢Leonus大佬提醒，漏了 lunar.js 和 css 代码，部分 js 另作修改，现已更正。

更新

  • lunar.js
    lunar.js 是 ChatGPT 在 Github 上找的。
    原作仓库地址

  • demo.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
    // 刷新时钟时间
    function cardRefreshTimes() {
        var now = new Date();
        var a_t_r = document.getElementById("aside-time-right");
        if (a_t_r) a_t_r.innerHTML = now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0') + ":" + now.getSeconds().toString().padStart(2, '0');
    }
    // 设置重复执行函数，周期1000ms
    setInterval(() => {
        cardRefreshTimes();
    }, 1000);
    // 侧边栏日历卡片
    function cardTimes() {
        var now = new Date(),
            year = now.getFullYear(),
            month = now.getMonth(),
            week = now.getDay(),
            date = now.getDate(), dates, weekStr, monthStr, asideTime, asideDay, asideDayNum, animalYear, ganzhiYear, lunarMon, lunarDay;
        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 = "一月"; dates = 31; break;
            case 1: monthStr = "二月"; dates = year_flag ? 29 : 28; break;
            case 2: monthStr = "三月"; dates = 31; break;
            case 3: monthStr = "四月"; dates = 30; break;
            case 4: monthStr = "五月"; dates = 31; break;
            case 5: monthStr = "六月"; dates = 30; break;
            case 6: monthStr = "七月"; dates = 31; break;
            case 7: monthStr = "八月"; dates = 31; break;
            case 8: monthStr = "九月"; dates = 30; break;
            case 9: monthStr = "十月"; dates = 31; break;
            case 10: monthStr = "十一月"; dates = 30; break;
            case 11: monthStr = "十二月"; 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 = document.getElementById("calendar-main");
        var gap = document.getElementById("calendar-date");
        switch (rows) {
            case 4: gap.style.marginBottom = ""; break;
            case 5: gap.style.marginBottom = "1.2rem"; break;
            case 6: gap.style.marginBottom = "2.4rem"; break;
            default: gap.style.marginBottom = "2.4rem";
        }
        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"); //日期
        asideTime = new Date("2023/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);
        var c_m = document.getElementById("calendar-month");
        var c_w = document.getElementById("calendar-week");
        var c_d = document.getElementById("calendar-date");
        var c_a = document.getElementById("calendar-animal");
        var c_l = document.getElementById("calendar-lunar");
        var a_t_l = document.getElementById("aside-time-left");
        if (c_m) c_m.innerHTML = monthStr; //月份
        if (c_w) c_w.innerHTML = weekStr; //星期
        if (c_d) c_d.innerHTML = date.toString().padStart(2, '0'); //日期
        if (c_a) c_a.innerHTML = ganzhiYear + animalYear + "年"; //年份
        if (c_l) c_l.innerHTML = lunarMon + lunarDay; //农历
        if (a_t_l) a_t_l.innerHTML = year + "&nbsp;&nbsp;<a style='font-size:1.1rem;font-weight:bold;'>第</a>&nbsp;" + asideWeekNum + "&nbsp;<a style='font-size:1.1rem;font-weight:bold;'>周</a>";
    }

  • demo.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
    .card-widget.card-times .item-headline {
        display: none;
    }

    .card-widget.card-times {
        --calendar-bg: rgb(244 244 244 / 70%);
        padding: .8rem !important
    }

    [data-theme='dark'] .card-widget.card-times {
        --calendar-bg: rgba(46, 48, 51, 0.7);
    }

    .card-times a {
        color: var(--font-color)
    }

    #calendar-main .calendar-rh a {
        color: var(--font-color);
        opacity: 0.7;
    }

    #aside-calendar {
        height: fit-content;
        display: flex
    }

    #aside-calendar {
        background: var(--calendar-bg);
        border-radius: 8px;
        padding: .8rem
    }

    #aside-area-top {
        display: flex
    }

    #aside-calendar {
        margin-top: .5rem
    }

    #aside-time-left,
    #aside-time-right {
        background: var(--calendar-bg);
        border-radius: 8px;
        padding: .5rem;
        display: flex;
        justify-content: center;
        font-size: 1.3rem;
        line-height: 2rem
    }

    #aside-time-left {
        width: 64%
    }

    #aside-time-right {
        width: 36%;
        margin-left: .5rem
    }

    #calendar-area-left {
        height: 100%;
        width: 30%
    }

    #calendar-area-right {
        height: 100%;
        width: 70%
    }

    #calendar-month,
    #calendar-week {
        height: 1.1rem;
        font-size: 1.1rem;
        color: #0096ff;
        font-weight: 700;
        margin-bottom: .5rem;
        align-items: center;
        display: flex
    }

    #calendar-month {
        margin-left: calc(7.14% - .5rem)
    }

    #calendar-date {
        height: 3rem;
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1.2rem;
        align-items: center;
        display: flex
    }

    #calendar-animal,
    #calendar-lunar {
        height: 1.5rem;
        font-size: .9rem;
        align-items: center;
        display: flex
    }

    #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: #0096ff;
        color: #fff
    }

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

    .calendar-d0,
    .calendar-d1,
    .calendar-d2,
    .calendar-d3,
    .calendar-d4,
    .calendar-d5,
    .calendar-d6 {
        width: 14.28%;
        display: flex;
        justify-content: center;
        align-items: center
    }

以下是旧版文章

新建 widget.yml

在source/_data路径下新建一个widget.yml文件

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
top:
  - class_name: card-times
    id_name: 
    name:
    icon:
    html:
      <div id="aside-area-top">
        <div id="aside-time-left"></div>
        <div id="aside-time-right"></div>
      </div>
      <div id="aside-calendar">
        <div id="calendar-area-left">
          <div id="calendar-week"></div>
          <div id="calendar-date"></div>
          <div id="calendar-animal"></div>
          <div id="calendar-lunar"></div>
        </div>
        <div id="calendar-area-right">
          <div id="calendar-month"></div>
          <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>
      </div>

runtime.js

路径source/js下新建runtime.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var now = new Date();
var year, month, week, date, dates, weekStr, monthStr;
var asideTime, asideDay, asideDayNum;
var animalYear, ganzhiYear, lunarMon, lunarDay;
cardTimes();
// 刷新时钟时间
function cardRefreshTimes() {
    var a_t_r = document.getElementById("aside-time-right");
    if(a_t_r)a_t_r.innerHTML = now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0') + ":" + now.getSeconds().toString().padStart(2, '0');
}
// 设置重复执行函数，周期1000ms
setInterval(() => {
    cardRefreshTimes();
}, 1000);

calendar.js

路径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
// 侧边栏日历卡片
function cardTimes() {
    year = now.getFullYear();
    month = now.getMonth();
    week = now.getDay();
    date = now.getDate();
    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 = "一月"; dates = 31; break;
        case 1: monthStr = "二月"; dates = year_flag ? 29 : 28; break;
        case 2: monthStr = "三月"; dates = 31; break;
        case 3: monthStr = "四月"; dates = 30; break;
        case 4: monthStr = "五月"; dates = 31; break;
        case 5: monthStr = "六月"; dates = 30; break;
        case 6: monthStr = "七月"; dates = 31; break;
        case 7: monthStr = "八月"; dates = 31; break;
        case 8: monthStr = "九月"; dates = 30; break;
        case 9: monthStr = "十月"; dates = 31; break;
        case 10: monthStr = "十一月"; dates = 30; break;
        case 11: monthStr = "十二月"; 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 = document.getElementById("calendar-main");
    var gap = document.getElementById("calendar-date");
    switch (rows) {
        case 4: gap.style.marginBottom = "";break;
        case 5: gap.style.marginBottom = "1.2rem";break;
        case 6: gap.style.marginBottom = "2.4rem";break;
        default: gap.style.marginBottom = "2.4rem";
    }
    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"); //日期
    asideTime = new Date("2023/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);
    var c_m = document.getElementById("calendar-month");
    var c_w = document.getElementById("calendar-week");
    var c_d = document.getElementById("calendar-date");
    var c_a = document.getElementById("calendar-animal");
    var c_l = document.getElementById("calendar-lunar");
    var a_t_l = document.getElementById("aside-time-left");
    if (c_m) c_m.innerHTML = monthStr; //月份
    if (c_w) c_w.innerHTML = weekStr; //星期
    if (c_d) c_d.innerHTML = date.toString().padStart(2, '0'); //日期
    if (c_a) c_a.innerHTML = ganzhiYear + animalYear + "年"; //年份
    if (c_l) c_l.innerHTML = lunarMon + lunarDay; //农历
    if (a_t_l) a_t_l.innerHTML = year + "&nbsp;&nbsp;<a style='font-size:1.1rem;font-weight:bold;'>第</a>&nbsp;" + asideWeekNum + "&nbsp;<a style='font-size:1.1rem;font-weight:bold;'>周</a>";
}

pjax适配

在whenDOMReady()里加入cardTimes()函数

1
2
3
4
5
6
7
8
9
function whenDOMReady() {
    // pjax加载完成（切换页面）后需要执行的函数和代码
    cardTimes();
}
// ***********
// 其他代码放中间
// ***********
whenDOMReady(); // 打开网站先执行一次
document.addEventListener("pjax:complete", whenDOMReady); // pjax加载完成（切换页面）后再执行一次