添加日历

安装 hexo-generator-calendar 插件

1
cnpm install --save git://github.com/howiefh/hexo-generator-calendar.git

下载 calendar.jslanguages.js 文件,保存到 themes/Butterfly/source/js/ 目录

编辑 calendar.js 文件,在文件最后}(jQuery)); 之前添加:

1
2
3
$(document).ready(function () {
$('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
});

具体位置参考下图:

编辑 butterfly.yml 文件, 在 inject->bottom 下面添加如下内容

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

新建 calendar.styl 文件,保存到 themes/Butterfly/source/css/_layout/ 目录下,内容如下:

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
#calendar
a
text-decoration none

.cal-head
margin-bottom: 15px
position relative
height 20px
padding 8px 6px 2px 6px

.cal-prev,.cal-next
position absolute
top 9px
width 16px
height 18px
padding 3px 4px
border 1px solid transparent
color #333
outline 0

.cal-prev
left 8px
&:before
border-right 9px solid #333

.cal-next
right 8px
&:before
border-left 9px solid #333

.cal-prev:before,.cal-next:before
content ''
display block
width 0
height 0
border-top 5px solid transparent
border-bottom 5px solid transparent

.cal-title
width 100px
margin 0 auto
color #333
font bold 14px/18px Arial
text-align center
a
border 1px solid transparent
color #9f9f9f

.cal,
.cal th,
.cal td
border 1px solid #d1d1d1

.cal
display: table
border-collapse separate
border-spacing 0
border-width 1px 0 0 1px
table-layout fixed
width 100%
margin 0
th
background #9f9f9f
color #fff
border-width 0 1px 1px 0
font-weight 700
td
border-width 0 1px 1px 0
tbody
a
background-color #007acc
color #fff
display block
font-weight 700
.cal-today
background-color #66ecfd
color #fff
.cal-gray
color #bbb8b8

[data-theme='dark'] .cal .cal-gray
color #505050

.cal th,
.cal td
font-weight normal
line-height 2.5625
padding 0
text-align center

[data-theme='dark'] .cal .cal-foot
color #9f9f9f

.cal .cal-foot
color #2ca6cb

.cal-title a:hover,
.cal-prev:hover,
.cal-next:hover,
.cal .cal-foot:hover,
.cal .cal-foot:focus,
.cal tbody a:hover,
.cal tbody a:focus
background-color #686868
color #fff
cursor pointer

themes/Butterfly/layout/includes/widget/ 文件夹新建 card_calendar.pug 文件,文件内容如下:

1
2
3
4
5
6
7
.card-widget.card-calendar
.card-content
.item-headline
i.far.fa-calendar-alt(aria-hidden="true")
span= _p('aside.card_calendar')
div.widget-wrap
div#calendar.widget

编辑 themes/Butterfly/layout/includes/widget/index.pug 文件,在你想要显示的位置插入以下代码:

1
2
if theme.aside.card_calendar
!=partial('includes/widget/card_calendar', {}, {cache:theme.fragment_cache})

具体位置参考下图:

github--lena

注意格式,放置位置,会影响顺序排版!

编辑 butterfly.yml 文件,在 card_webinfo 下面添加一行 card_calendar: true

github--lena

编辑 themes/Butterfly/languages/zh-CN.yml 文件 (请根据你的网站语言选择),找到 aside , 在下面添加一行 card_calendar: 日历 (后面的文本可自定义)

github--lena

如果不想显示,直接把 butterfly.yml 文件的 card_calendar: true 改为 card_calendar: false 即可

注意

因更新最新主题3.5.1版本出现以下报错

1
JQuery - $ is not defined

解决方式

引入以下js

示例

inject: -> bottom:

1
- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>

解决我了遇到的问题!