Hexo添加小部件(Butterfly主题) 日历

安装 hexo-generator-calendar 插件

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

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

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

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

具体位置参考下图:

编辑 butterfly.yml 文件,以下两个你 butterfly.yml文件里有哪个就用那个,不要都用!选择一个即可

  • CDN_USE->js 下面添加如下内容(本人采用这种方式):
- /js/calendar.js
- /js/languages.js

具体位置参考下图:

  • inject->bottom下面添加如下内容(如果用了上述方法就不要用了):
- <script src="/js/calendar.js"></script>
- <script src="/js/languages.js"></script>

新建 calendar.styl文件,保存到 themes\Butterfly\source\css\_layout 目录下

源文件传送门

原下载处使用会有bug,你可以直接复制如下我改好的代码即可

#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 120px
  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文件 (请根据你的网站语言选择),找到 card_announcement: 公告 , 在下面添加一行 card_calendar: 日历 (后面的文本可自定义)

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

参考博客:

作者: HCLonely
链接: https://blog.hclonely.com/
来源: HCLonely Blog

学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 博客之星 前端开发攻城狮
JS,TS,LeetCode,Vue,React,算法爱好者。
主要分享前端知识,立志成为优秀前端博主。
座右铭:学如逆水行舟,不进则退!
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值