原文出自：使用 Charts 插件给 Butterfly 增加统计图表

效果演示

浅色模式下效果图
深色模式下效果图

安装

请在主题项目根目录下，执行以下命令安装（安装过其他 Charts 插件，请先卸载）：

1
npm i hexo-butterfly-charts --save

配置

在主题配置文件_config.butterfly.yml 或 hexo 配置文件_config.yml 中增加以下内容：

参数 默认值 释义
enable 无 【必填】开启或关闭，true or false
postsChart.Title 空 发布统计的标题
postsChart.interval 0 坐标轴值得间隔数。0 表示强制显示所有；可填写 0 以上的正整数，如 1 就是横坐标间隔 1 个再展示
postsCalendar_Title 空 发布日历的标题
tagsChart.Title 空 标签统计的标题
tagsChart.interval 0 坐标轴值得间隔数。0 表示强制显示所有；可填写 0 以上的正整数，如 1 就是横坐标间隔 1 个再展示
categoriesChart_Title 空 分类统计的标题
categoriesRadar_Title 空 分类雷达的标题 
1
2
3
4
5
6
7
8
9
10
11
12
13
# 统计图表，支持发布文章统计、发布日历、Top标签统计、分类统计、分类雷达。
# see https://www.npmjs.com/package/hexo-butterfly-charts
charts:
  enable: true # 是否启用功能
  postsChart:
    title: 文章发布统计 # 设置文章发布统计的标题，默认为空
    interval: 1 # 横坐标间隔
  tagsChart:
    title: Top 10 标签统计 # 设置标签统计的标题，默认为空
    interval: 1 # 横坐标间隔
  postsCalendar_Title: #文章发布日历 # 设置发布日历的标题，默认为空
  categoriesChart_Title: # 设置分类统计的标题，默认为空
  categoriesRadar_Title: # 设置分类雷达的标题，默认为空

用法

由于标签 / 分类 / 归档页面结构太相似，npm 插件配置添加较难实现，因此安装插件后，还需主题源代码中添加节点 ID。（好吧 是我菜……）

将发布日历添加到 归档 页面

点击查看详情

安装插件后，在 /Butterfly/layout/archive.pug 文件中，#archive 下面添加一行#posts-calendar.js-pjax, 新添加的比上一行多缩进两个空格。

修改后如下：

1
2
3
4
5
6
7
8
9
extends includes/layout.pug

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

其他页面，只需 md 文件中插入这个标签：

1
<div id="posts-calendar" class="js-pjax"></div>

将 发布统计 添加到 归档 页面

点击查看详情

安装插件后，在 /Butterfly/layout/archive.pug 文件中，#archive 下面添加一行#posts-chart.js-pjax, 新添加的比上一行多缩进两个空格。

修改后如下：

1
2
3
4
5
6
7
8
9
extends includes/layout.pug

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

其他页面，只需 md 文件中插入这个标签：

1
<div id="posts-chart" class="js-pjax"></div>

将 标签统计 插入到 标签 页面

点击查看详情

编辑主题目录 /Butterfly/layout/includes/page/tags.pug 文件，在开头添加一行#tags-chart(data-length = "10").js-pjax，data-length = "10" 表示显示 Top 10 的标签。

修改后如下：

1
2
3
4
5
6
#tags-chart(data-length = "10").js-pjax
.tag-cloud-title.is-center= _p('page.tag')
  |  - 
  span.tag-cloud-amount= site.tags.length
.tag-cloud-list.is-center
  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

其他页面，只需 md 文件中插入这个标签：

1
<div id="tags-chart" data-length="10" class="js-pjax"></div>

将 分类统计（无标题）和 分类雷达图（无标题） 添加到 分类 页面。

点击查看详情

编辑主题目录 /Butterfly/layout/includes/page/categories.pug 文件，在第 5 行添加#categories-chart.js-pjax 和#categories-radar.js-pjax。

修改后如下：

1
2
3
4
5
6
7
.category-lists
  .category-title.is-center= _p('page.category')
    |  - 
    span.category-amount= site.categories.length
  #categories-chart.js-pjax
  #categories-radar.js-pjax
  div!= list_categories()

其他页面，只需 md 文件中插入这个标签：

  • 分类统计（无标题）
1
<div id="categories-chart" class="js-pjax"></div>
  • 分类雷达图（无标题）
1
<div id="categories-radar" class="js-pjax"></div>