Hexo Butterfly 主題：添加文章日曆插件 (hexo-generator-calendar)

前言

成功在 Hexo Butterfly 主題的側欄添加文章日曆了！

感謝這位 HCLonely 大大的教學文檔

• Hexo添加小部件(Butterfly主题) | HCLonely Blog

---

過程中作了一些修改，記錄一下：

---

效果

以下是我的文章日曆的樣子，可以到我的主頁左側欄查看實際效果。

---

步驟

1. 安裝 hexo-generator-calendar 插件

在博客根目錄 GitBash：

bash

npm install hexo-generator-calendar --save

2. 下載 calendar.js、languages.js

下載以下兩個 js 檔，並把它們放在 .\themes\Butterfly\source\js 裡。

• calendar.js
• languages.js

3. 修改 calendar.js

在 calendar.js 裡最底部添加以下 code：

Javascript

$(document).ready(function () {
    $('#calendar').aCalendar('zh-TW');
});

4. 修改語言檔

修改 themes\Butterfly\languages\zh-TW.yml （根據你的網站語言），在 card_announcement: 公告 下面添加一行：

yml

card_calendar: 文章日曆

5. 修改 Butterfly config 配置

1. 在這個文件裡 .\themes\Butterfly\_config.yml，在CDN_USE:>js: 那裡，添加：

   yml

   - /js/calendar.js
   - /js/languages.js

2. 在 card_webinfo 下面添加：

   yml

   card_calendar: true

6. 創建 calendar.styl

在 .\themes\Butterfly\source\css\_layout folder，創建 calendar.styl 檔。

以下是我的樣式（藍色），內容如下：

styl

#calendar
  a
    text-decoration none

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

.cal-prev,.cal-next
  position absolute
  top 9px
  width 9px
  height 10px
  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 color-theme

.cal,
.cal th,
.cal td
  border none

.cal
  border-collapse collapse
  border-spacing 0
  table-layout fixed
  width 100%
  margin 0
  th
    background white
    color black
    font-weight 900 !important
  tbody
    a
      background-color #42d3d8
      color white
      display block
      font-weight 700
    .cal-today
      background-color #eaf4f3
      color #26a2a4
  .cal-gray
    color #ddd

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

.cal-title a:hover,
.cal-prev:hover,
.cal-next:hover,
.cal .cal-foot:hover,
.cal .cal-foot:focus
  cursor pointer

.cal tbody a:hover,
.cal tbody a:focus
  background-color #A1E4E6
  color #fff
  cursor pointer

2020.03 更新：
雖然單獨看的話藍色比較好看，但好像深粉色比較 match 我這整個的配色，所以改了一下。
更改後的 code 如下，備份一下。

styl

#calendar
  a
    text-decoration none

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

.cal-prev,.cal-next
  position absolute
  top 9px
  width 9px
  height 10px
  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 #f76b61

.cal,
.cal th,
.cal td
  border none

.cal
  border-collapse collapse
  border-spacing 0
  table-layout fixed
  width 100%
  margin 0
  th
    background white
    color black
    font-weight 900 !important
  tbody
    a
      background-color #f76b61
      color white
      display block
      font-weight 700
      border 1px solid white
    .cal-today
      background-color #ffdfdd
      color #f76b61
  .cal-gray
    color #ddd

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

.cal-title a:hover,
.cal-prev:hover,
.cal-next:hover,
.cal .cal-foot:hover,
.cal .cal-foot:focus
  cursor pointer
  background-color transparent
  cursor pointer
  color #42d3d8

.cal tbody a:hover,
.cal tbody a:focus
  background-color #ffdfdd
  color #fff
  cursor pointer

7. 創建 card_calendar.pug

在 .\themes\Butterfly\layout\includes\widget folder，創建 card_calendar.pug，内容如下：

Code

.card-widget.card-calendar
  .card-content
    .item-headline
      i.fa.fa-calendar(aria-hidden="true")
      span= _p('aside.card_calendar')
    div.widget-wrap
    div#calendar.widget

8. 修改 index.pug

修改 .\themes\Butterfly\layout\includes\widget\index.pug，在你想要顯示的位置插入以下 code：

Code

if theme.aside.card_calendar
  include ./card_calendar.pug

9. calendar.json

到 .\public folder，你應該會看到一個叫 calendar.json 的文件已自動生成。如沒有，hexo clean 再 hexo g 試試。

bash

hexo clean
hexo g

---

大功告成

---