预览

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

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

实现

感谢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加载完成(切换页面)后再执行一次