前言

感謝這位 guole 大大的插件和教學文檔

使用Charts插件给Butterfly增加统计图表 | guole’s Blog

由於我的 Butterfly 主題是超舊版(2.1.0)（現在已經是 3.8.4 😂），所以有些代碼的插入地方會不同，記錄一下：

效果

在歸檔和分類頁面加了。（標籤頁面個人覺得沒需要加，就沒加）

步驟

1. 安裝 hexo-butterfly-charts 插件

bash

npm install hexo-butterfly-charts --save

2. 修改 Butterfly config 配置

在這個文件裡 .\themes\Butterfly\_config.yml，添加：

yml

#see https://www.npmjs.com/package/hexo-butterfly-charts
charts:
  enable: true
  postsChart:
    title: 文章發佈統計 
    interval: 1
  tagsChart:
    title: Top 10 tags 
    interval: 1 
  postsCalendar_Title: 文章發佈日曆
  categoriesChart_Title: 分類統計
  categoriesRadar_Title: 分類雷達

2. 分類頁面

在這個文件裡 .\themes\Butterfly\layout\page.pug，
div!= list_categories()上方添加這兩行：

Code

#categories-chart
#categories-radar

我的整個page.pug是這樣的：

Code

extends includes/layout.pug

block content
  if page.type === 'tags'
    .tag-cloud
      .tag-cloud__title= _p('page.tag')
        |  - 
        span.tag-cloud__amount= site.tags.length
      .tag-cloud-tags
        include includes/page_tag.pug
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
      include includes/widget/index.pug

  else if page.type === 'link'
    include flink.pug
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
      include includes/widget/index.pug
  else if page.type === 'categories'    
    #post-content.category-content
      .category-lists
        .category__title= _p('page.category')
          |  - 
          span.category__amount= site.categories.length
        #categories-chart
        #categories-radar
        div!= list_categories()
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
      include includes/widget/index.pug
  else
    article#page
      h1= page.title
      .article-container!= page.content
      include includes/pagination.pug
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
      include includes/widget/index.pug

3. 歸檔頁面

在這個文件裡 .\themes\Butterfly\layout\archive.pug，
.article-sort-title上方添加這兩行：

Code

#posts-chart
#posts-calendar

我的整個archive.pug是這樣的：

Code

extends includes/layout.pug

block content
  include ./includes/mixins/article-sort.pug
  #archive
    #posts-chart
    #posts-calendar
    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
    +articleSort(page.posts)
    include includes/pagination.pug
  #aside_content.aside_content
    include includes/widget/index.pug

完成