自定义标签库:hexo-butterfly-tags-extend

更新记录

202109

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

自定义标签库

项目源码

holic-x/hexo-butterfly-tags-extend

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

JavaScript 0

配置说明

引入hexo-butterfly-tags-extend

代码语言：javascript复制

npm install hexo-butterfly-tags-extend

配置站点配置文件_config.yml

代码语言：javascript复制

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

bilibili

样例参考

视频地址：https://www.bilibili.com/video/av245769098

语法规则

代码语言：javascript复制

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

参数说明

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

代码语言：javascript复制

# 嵌入代码参考格式
<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

代码语言：txt复制

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

JavaScript 0

404展示
样例参考
语法规则
参数说明
正常卡片展示

代码语言：javascript复制

{% githubRepo https://github.com/holic-x/hexo-butterfly-tags-extend %}

404展示

代码语言：javascript复制

{% githubRepo https://github.com/xxx/xxx %}

代码语言：javascript复制

{% githubRepo 仓库路径 %}
# 可有两种形式引用
{% githubRepo https://github.com/username/reponame' %}
{% githubRepo username/reponame %}

参数	说明
username	github用户名
reponame	github仓库名

highcharts

样例参考

样例参考
语法规则
参数说明

代码语言：javascript复制

{% 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 %}

代码语言：javascript复制

{% highcharts %}
	// highcharts options here
{% endhighcharts %}

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

chart

样例参考

样例参考
语法规则
参数说明

代码语言：javascript复制

{% 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 %}

代码语言：javascript复制

{% chart 90%,300 %}
	// config参数形式
	{
    type: 'line',
    data: data,
    options: {}
  }
{% endchart %}

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

参考chart.js官方说明

echarts

样例参考

样例参考
语法规则
参数说明

代码语言：javascript复制

{% 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 %}

代码语言：javascript复制

{% echarts 90%,300 %}
	// 参数配置
{% endecharts %}

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

asciinema

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

样例参考
语法规则
参数说明
图片引入，点击跳转到视频页

视频嵌入

代码语言：javascript复制

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

原理分析

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

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

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

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

hexo javascript 编程算法 github git

0 人点赞