写在开始

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

效果演示

点击查看截图

发布日历

发布统计

标签统计

分类统计

分类雷达

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

发布日历

发布统计

标签统计

分类统计

分类雷达

特性

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

灵感来自 HEXO 主题 matery.

包含

发布统计图

发布日历图

标签统计图

分类统计图

分类雷达图

支持图表名称自定义配置

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

适配butterfly暗色模式(有瑕疵)

更新记录

点击查看更新日志

hexo-butterfly-charts更新日志

2021-07-26 1.1.0 -> 1.1.1

  1. 调整README.md,增加Demo页面

2021-07-24 1.1.0

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

当前根据主题自动切换颜色的功能,似乎受Pjax影响,加了data-pjax也不行,如果你解决了,欢迎在下面这里提交PR:

安装

请在主题项目根目录下,执行以下命令安装(安装过其他Charts插件,请先卸载):

1
npm i hexo-butterfly-charts --save

配置

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

参数默认值释义
enable【必填】开启或关闭,true or false
postsChart.Title发布统计的标题
postsChart.interval0坐标轴值得间隔数。0表示强制显示所有;可填写0以上的正整数,如1就是横坐标间隔1个再展示
postsCalendar_Title发布日历的标题
tagsChart.Title标签统计的标题
tagsChart.interval0坐标轴值得间隔数。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, 新添加的比上一行多缩进两个空格。

修改后如下:

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

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

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

1
<div id="posts-calendar"></div>

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

点击查看详情

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

修改后如下:

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

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

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

1
<div id="posts-chart"></div>

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

点击查看详情

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

修改后如下:

1
2
3
4
5
6
#tags-chart(data-length = "10")
.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"></div>

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

点击查看详情

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

修改后如下:

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

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

  • 分类统计(无标题)

    1
    <div id="categories-chart"></div>
  • 分类雷达图(无标题)

    1
    <div id="categories-radar"></div>

许可