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

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

参考：

https://blog.guole.fun/posts/18158/index.html

一. 安装

1 2	# 安装 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

_config.butterfly.yml

# 统计图表，支持发布文章统计、发布日历、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

二. 使用

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

安装插件后，在 /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>

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

安装插件后，在 /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>

`3.` 将标签统计插入到标签页面

编辑主题目录 /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>

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

编辑主题目录 /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()