前言

一開始是看到網路上一位名為 ouoholly 的 教學文章，看著覺得效果不錯便也想跟著修改，不過似乎是因為 Butterfly 3.0 大改版的關係，原文章的修改方法會一直出問題。 本文章為紀錄 3.0 改版後 (當前示範版本: 3.8.1) 要如何在 Butterfly 主題中的側邊欄位上加入日曆插件。

成果圖

日曆的介面基本和 ouoholly 的內容是一樣的，感謝原文章分享！

操作步驟

1. 安裝 Hexo generator calendar

原文中的 hexo-generator-calendar 似乎沒辦法用了 (測試 Butterfly 版本: 3.8.1)，上網搜尋後改使用 howiefh 的 hexo-generator-calendar

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

2. 設定 hexo-generator-calendar

於 Hexo _config.yml (root) 中添加設定

1
2
3
calendar:
  single: true
  root: calendar/

3. 下載 calendar.js 和 languages.js

分別下載 js 檔案後將它們放在 .\themes\butterfly\source\js 資料夾中。

4. 修改 calendar.js

在 calendar.js 的最下方添加 code

1
2
3
$(document).ready(function () {
  $("#calendar").aCalendar("zh-TW");
});

5. 新增語言設定

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

1
card_calendar: 文章日曆

6. Butterfly config 設定

Butterfly 3.0 改版後支持自訂側邊欄內容，和原文章的修改方式有些微不同。

請至 .\themes\butterfly\_config.yml 檔案中找到 Inject 項目，並在 buttom 中添加 script

1
2
3
- <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
- <script src="/js/calendar.js"></script>
- <script src="/js/languages.js"></script>

添加 jQuery 的原因是因為不知為何原 CDN 中的 jQuery 並沒有載入，若您的 jQuery 原本就正常載入就可以直接忽略第一行

接著請在 aside > card_announcement 下方加上

1
2
card_calendar:
  enable: true

7. 建立 calendar.styl

請至 .\themes\butterfly\source\css\_layout 資料夾建立 calendar.styl 檔案。

此處採用 ouoholly 分享的 CSS Style：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
#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

8. 建立 card_calendar.pug

在 .\themes\butterfly\layout\includes\widget 資料夾中建立 card_calendar.pug檔案：

1
2
3
4
5
6
7
.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

9. 修改 index.pug

修改 .\themes\butterfly\layout\includes\widget\index.pug 檔案。同樣的，3.0 改版後 index.pug 寫法有變，這邊有稍作修正。

請在想要顯示日曆插件的位置加上一行

1
!=partial('includes/widget/card_calendar', {}, {cache: true})

譬如我希望在 最新文章 的上方顯示，此時我的 code 會如圖所示

10. 建立 calendar.json

我們必須先 clean 後再重新 generate 已生成 calendar.json 檔案

1
2
hexo clean
hexo g

收工！ 重新啟動 Hexo Server 便能看到側邊欄現在也有日曆插件囉！

References