使用Charts插件给Butterfly增加统计图表

写在开始

之前就想给blog加上统计图表，查到的方法无奈要么太复杂，要么插件有bug，于是干脆自己插件化了一个hexo-butterfly-charts。

效果演示

点击查看Demo页面

/charts/

点击查看截图

发布日历

发布统计

标签统计

分类统计

分类雷达

点击查看暗色模式下的截图

发布日历

发布统计

标签统计

分类统计

分类雷达

特性

将 hexo poats、类别和标签的统计数据呈现到图表中。

灵感来自 HEXO 主题 matery.

包含

发布统计图

发布日历图

标签统计图

分类统计图

分类雷达图

支持图表名称自定义配置

支持标签/分类统计图横坐标间隔数自定义配置

适配butterfly暗色模式（有瑕疵）

更新记录

点击查看更新日志

hexo-butterfly-charts更新日志

2023-05-19 [1.1.4 -> 1.1.45]

插件默认 echarts_CDN 修改为：https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

新增配置项：echarts_CDN 解决原来使用的固定 CDN 资源失效问题。使用方法：

# 统计图表，支持发布文章统计、发布日历、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: # 设置分类雷达的标题，默认为空
+ echarts_CDN: # https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

2023-01-22 [1.1.1 -> 1.1.4]

调整分类统计图中，“# 文章分类”为 “✒️文章篇数”
更新 moment 到 2.29.4

2021-07-26 1.1.0 -> 1.1.1

调整README.md，增加Demo页面

2021-07-24 1.1.0

增加柱状图表横纵坐标轴名称
适配Butterfly暗色模式，自动切换
文章发布日历，坐标也换成中文
各图表标题支持配置
解决雷达图上，鼠标hover时，超出内容被画布吞掉的问题
解决分类雷达图未设置画布高度，导致无法显示的bug

安装

请在主题项目根目录下，执行以下命令安装（安装过其他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	空	分类雷达的标题
echarts_CDN	baomitu资源	echarts 自定义 CDN

# 统计图表，支持发布文章统计、发布日历、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: # 设置分类雷达的标题，默认为空
  echarts_CDN: # https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

用法

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

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

点击查看详情

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

修改后如下：

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, 新添加的比上一行多缩进两个空格。

修改后如下：

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 的标签。

修改后如下：

#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 2	<!-- "data-length" = how many tags to show, default 10 --> <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。

修改后如下：

.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()