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

學如逆水行舟，不進則退