给安知鱼博客主题侧边栏添加日历卡片

前两天给大家分享了一篇文章，给安知鱼主题侧边栏添加倒计时卡片 ，这篇文章只是给安知鱼主题的侧边栏添加了一个倒计时效果，还有一篇文章，给安知鱼主题侧边栏添加日后和倒计时卡片 ，添加的卡片之中既有日历，还有倒计时。今天我们把日历和倒计时分开调用。给侧边栏添加日历卡片。

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
bottom:
  - class_name: calendar
    id_name: card-widget-calendar
    name:
    icon:
    order: -1
    html: |
      <div id="calendar-area-left">
        <div id="calendar-week"></div>
        <div id="calendar-date" style="font-size: 48px;"></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>

2.引入 CSS 文件

在博客主题目录下的 /themes/anzhiyu/source/css 文件夹下创建 schedule.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
.card-widget {
    padding: 10px!important;
    max-height: calc(100vh - 100px);
}

.card-times a, .card-times div {
    color: var(--efu-fontcolor);
}

#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: 700;
    align-items: center;
    display: flex;
}

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

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

#calendar-solar {
    bottom: 2.1rem;
}

#calendar-lunar {
    bottom: 1rem;
    color: var(--efu-secondtext);
}

#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(--anzhiyu-main);
    color: var(--efu-card-bg);
}

#calendar-main .calendar-rh a {
    color: var(--efu-secondtext);
}

.calendar-r0, .calendar-r1, .calendar-r2, .calendar-r3, .calendar-r4, .calendar-r5, .calendar-rh {
    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, var(--anzhiyu-main-op-deep), var(--anzhiyu-main-op), var(--anzhiyu-main-op-light));
    border-radius: 5px;
    overflow: hidden;
}

progress::-webkit-progress-value {
    background: var(--anzhiyu-main);
    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: var(--efu-secondtext);
}

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

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

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

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

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

#schedule-date {
    height: 20px;
    line-height: 1;
    font-size: 12px;
    color: var(--efu-secondtext);
}

3.创建 js 文件

在博客主题目录下的 /themes/anzhiyu/source/js 文件夹下面新建 schedule.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("2027/02/05 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; //农历
    }
}

需要注意的问题，代码之中有一个时间设置

1
const newYearDate = new Date("2026/02/16 00:00:00");

需要自己设置好下一年的春节时间。

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/schedule.css" media="defer" onload="this.media='all'">

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

1
- <script src="/js/schedule.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/schedule.css" media="defer" onload="this.media='all'">

  bottom:
    # 自定义js
    # - <script src="/js/xxx"></script>
    - <script src="/js/schedule.js"></script>
    - <script src="https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script>

还需要有引入一个 JS 文件，chinese-lunar.js ，用途不详，但是不调用貌似出问题。

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

5.结束语

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