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 文件，以下两个你 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

学如逆水行舟，不进则退

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

猜你喜欢