侧边栏组件 - 日历
在你的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
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-31</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>
|
引入js
lunar.js
从链接地址下载 lunar.js文件放在你要引入的 资源文件夹(source/js) 的路径下。
calendar.js
在你的 资源文件夹(source/js) 下 新建 calendar.js文件 可以从链接地址下载calendar.js。
引入css样式
calendar.css
在资源路径 source/css 下新建 calendar.css 文件
当然可以从链接地址下载calendar.css文件
应用js和css
在你的_config.anzhiyu.yml或_config.yml的主题配置里面
bottom引入lunar.js和calendar.js；
在head里面引入calendar.css以完成应用。
