前言

之前一直想用，但中途都會失敗，今天終於成功了！這篇文章主要是記錄如何在Hexo的文章中嵌入日曆。

步驟

1. 安裝插件

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

2. 下載並修改js檔案

下載以下兩個檔案

我自己是保存到source\self\目錄底下：

接下來修改js檔案添加以下內容在最後底部的部分

1
2
3

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

注意如果你有兩個版本的切換，是按照這篇文章Hexo - Butterfly 版本的語言切換功能設置。
js檔案要存放在source-en\self底下，並且我們要修改兩個地方：

3. 設定_config.yml

前往config-butterfly.yml，按照順序添加以下內容：
一定要下載jquery，不然日曆會無法顯示：

inject:
  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
    - <script data-pjax src="/self/calendar.js"></script>
    - <script data-pjax src="/self/languages.js"></script>

注意如果使雙語切換版本請修改以下內容要添加en：

然後添加以下內容如下圖，這用來控制是否顯示日曆：

1 2	card_calendar: enable: true

4. 寫入css樣式

新建calendar.styl文件，保存到themes\butterfly\source\css_layout目錄底下，可以複製以下代碼：

#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

5. 建立pug文件

新建card_calendar.pug文件，保存到themes/butterfly/layout/includes/widget/card_calendar.pug目錄底下，可以複製以下代碼：
第一行是判斷是否顯示日曆，第二行是日曆的標題，第三行是日曆的內容：

if theme.aside.card_calendar.enable 
  .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

然後我們要塞入我們製作的pug文件到themes/butterfly/layout/includes/widget/index.pug，塞入的順序會決定日曆的位置：