更新记录

更新记录

202109

基于hexo-butterfly的基础上扩展自定义标签插件，标签插件开发基本内容参考hexo插件库，针对项目和日常应用引入自定义的外置标签，对部分标签内容做了相应的调整和优化

自定义标签库

项目源码

holic-x/hexo-butterfly-tags-extend

基于hexo-butterfly的扩展标签插件
JavaScript

配置说明

引入hexo-butterfly-tags-extend

1
npm install hexo-butterfly-tags-extend

配置站点配置文件_config.yml

1
2
3
4
5
tags_extend:
  enable: true # 配置开关
  tagList: # 默认加载所有插件配置;可限定加载指定标签组件[a,b,c]
  CDN: 
    tags_extend_css:  # css路径配置(标签组件中所引用的部分样式归整,如无调整需求可不配置)

bilibili

1
2
# 在原有插件下调整参数配置，直接可通过使用时指定进行配置，暂无需额外配置hexo参数
{% bilibili [av_id,page] [width,height] %} // 如果不指定则使用默认参数

​ b站视频提供了一个嵌入代码的按钮，可通过该url获取到关联的av_id和page信息。其中av_id定位视频源，而page则是针对一个视频源由多个视频组成的则可通过page来获取相应的视频内容

1
2
# 嵌入代码参考格式
<iframe src="//player.bilibili.com/player.html?aid=xxxx&bvid=xxx&cid=xxx&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
参数 说明
av_id 对应上述url的aid，指定视频源
page 对应上述url的page，指定该视频源的第几个子视频
width 嵌入宽度（可对应hexo.config.bilibili.width，自由调整）
height 嵌入长度（可对应hexo.config.bilibili.height，自由调整）

githubRepo

样例参考

  • 正常卡片展示

holic-x/hexo-butterfly-tags-extend

基于hexo-butterfly的扩展标签插件
JavaScript
  • 404展示
  • 正常卡片展示
1
{% githubRepo https://github.com/holic-x/hexo-butterfly-tags-extend %}
  • 404展示
1
{% githubRepo https://github.com/xxx/xxx %}
1
2
3
4
{% githubRepo 仓库路径 %}
# 可有两种形式引用
{% githubRepo https://github.com/username/reponame' %}
{% githubRepo username/reponame %}
参数 说明
username github用户名
reponame github仓库名

highcharts

样例参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{% highcharts %}
{
	title: {
		text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
	},
	subtitle: {
		text: '数据来源：thesolarfoundation.com'
	},
	yAxis: {
		title: {
			text: '就业人数'
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'middle'
	},
	plotOptions: {
		series: {
			label: {
				connectorAllowed: false
			},
			pointStart: 2010
		}
	},
	series: [{
		name: '安装，实施人员',
		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
	}, {
		name: '工人',
		data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
	}, {
		name: '销售',
		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
	}, {
		name: '项目开发',
		data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
	}, {
		name: '其他',
		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
	}],
	responsive: {
		rules: [{
			condition: {
				maxWidth: 500
			},
			chartOptions: {
				legend: {
					layout: 'horizontal',
					align: 'center',
					verticalAlign: 'bottom'
				}
			}
		}]
	}
}
{% endhighcharts %}
1
2
3
{% highcharts %}
	// highcharts options here
{% endhighcharts %}

​ content的填充主要结合实际需求，参考highcharts中文官网，选择需要的样例进行调整即可

chart

样例参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% chart 90%,300 %}
{
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
}
{% endchart %}
1
2
3
4
5
6
7
8
{% chart 90%,300 %}
	// config参数形式
	{
    type: 'line',
    data: data,
    options: {}
  }
{% endchart %}

​ Chartjs 是一款简单优雅的数据可视化工具，对比其他图表库如 ECharts、Highcharts、C3、Flot、amCharts 等，它的画面效果、动态效果都更精致，它的 文档首页 就透出一股小清新，基于 HTML5 Canvas，它拥有更好的性能且响应式，基本满足了一般数据展示的需要，包括折线图，条形图，饼图，散点图，雷达图，极地图，甜甜圈图等。

​ 参考chart.js官方说明

echarts

样例参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% echarts 400,'90%' %}
{
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
{% endecharts %}
1
2
3
{% echarts 90%,300 %}
	// 参数配置
{% endecharts %}

​ Apache ECharts，一个基于 JavaScript 的开源可视化图表库，快速入门、所有示例

asciinema

​ asciinema是Linux系统下一款终端会话记录和回放的神器, 它是一个在终端下录制分享软件，基于文本的录屏工具，对终端输入输出进行捕捉， 然后以文本的形式来记录和回放，且在观看过程中可随时暂停视频并执行复制代码或者其他操作。

  • 图片引入，点击跳转到视频页

  • 视频嵌入
1
2
{% asciinema [参数配置] [资源编号] %}
参数配置：1-图片方式嵌入网站;2-视频方式嵌入网站

原理分析

​ asciinema 项目由几个互补部分构成：

  • 基于命令行的终端会话记录器asciinema
  • 具有asciinema.org API的网站
  • javascript播放器

​ 将终端的操作记录成 JSON 格式，然后使用 JavaScript 解析，配合CSS展示，从而模拟视频播放器。但实际上对应的文件就是文本信息，且相比GIF和视频文件体积非常小，无需缓冲播放，便于分享、嵌入到个人网站中。

​ 因此需要相应获取到对应的资源编号，具体可参考文章asciinema-linux终端回放记录工具

待扩展

待后续扩展