hexo-butterfly添加日历插件
添加日历
安装 hexo-generator-calendar 插件
cnpm install --save git://github.com/howiefh/hexo-generator-calendar.git下载 calendar.js 和 languages.js 文件，保存到 themes/Butterfly/source/js/ 目录
- calendar.js 下载地址
- languages.js 下载地址
编辑 calendar.js 文件，在文件最后}(jQuery)); 之前添加:
$(document).ready(function () {
$('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
});具体位置参考下图：
编辑 butterfly.yml 文件, 在 inject->bottom 下面添加如下内容
- <script src="/js/calendar.js"></script>
- <script src="/js/languages.js"></script>新建 calendar.styl 文件，保存到 themes/Butterfly/source/css/_layout/ 目录下,内容如下：
#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 文件，文件内容如下：
.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 文件，在你想要显示的位置插入以下代码：
if theme.aside.card_calendar
!=partial('includes/widget/card_calendar', {}, {cache:theme.fragment_cache})具体位置参考下图：
注意格式，放置位置，会影响顺序排版！
编辑 butterfly.yml 文件，在 card_webinfo 下面添加一行 card_calendar: true
编辑 themes/Butterfly/languages/zh-CN.yml 文件 (请根据你的网站语言选择)，找到 aside , 在下面添加一行 card_calendar: 日历 (后面的文本可自定义)
如果不想显示，直接把 butterfly.yml 文件的 card_calendar: true 改为 card_calendar: false 即可
注意
因更新最新主题3.5.1版本出现以下报错
JQuery - $ is not defined解决方式
引入以下js
https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js
示例
在inject: -> bottom:
- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>解决我了遇到的问题！
腾讯云开发者
