自定义标签库:hexo-butterfly-tags-extend
自定义标签库:hexo-butterfly-tags-extend
更新记录
更新记录
202109
基于hexo-butterfly的基础上扩展自定义标签插件，标签插件开发基本内容参考hexo插件库，针对项目和日常应用引入自定义的外置标签，对部分标签内容做了相应的调整和优化
自定义标签库
项目源码
holic-x/hexo-butterfly-tags-extend
基于hexo-butterfly的扩展标签插件
JavaScript 0
配置说明
引入hexo-butterfly-tags-extend
npm install hexo-butterfly-tags-extend配置站点配置文件_config.yml
tags_extend:
enable: true # 配置开关
tagList: # 默认加载所有插件配置;可限定加载指定标签组件[a,b,c]
CDN:
tags_extend_css: # css路径配置(标签组件中所引用的部分样式归整,如无调整需求可不配置)bilibili
- 样例参考
视频地址：https://www.bilibili.com/video/av245769098
- 语法规则
# 在原有插件下调整参数配置，直接可通过使用时指定进行配置，暂无需额外配置hexo参数
{% bilibili [av_id,page] [width,height] %} // 如果不指定则使用默认参数- 参数说明
b站视频提供了一个嵌入代码的按钮，可通过该url获取到关联的av_id和page信息。其中av_id定位视频源，而page则是针对一个视频源由多个视频组成的则可通过page来获取相应的视频内容
# 嵌入代码参考格式
<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 0
- 404展示
- 样例参考
- 语法规则
- 参数说明
- 正常卡片展示
{% githubRepo https://github.com/holic-x/hexo-butterfly-tags-extend %}- 404展示
{% githubRepo https://github.com/xxx/xxx %}{% githubRepo 仓库路径 %}
# 可有两种形式引用
{% githubRepo https://github.com/username/reponame' %}
{% githubRepo username/reponame %}参数 | 说明 |
|---|---|
username | github用户名 |
reponame | github仓库名 |
highcharts
样例参考
- 样例参考
- 语法规则
- 参数说明
{% 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 %}{% highcharts %}
// highcharts options here
{% endhighcharts %} content的填充主要结合实际需求，参考highcharts中文官网，选择需要的样例进行调整即可
chart
样例参考
- 样例参考
- 语法规则
- 参数说明
{% 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 %}{% chart 90%,300 %}
// config参数形式
{
type: 'line',
data: data,
options: {}
}
{% endchart %} Chartjs 是一款简单优雅的数据可视化工具，对比其他图表库如 ECharts、Highcharts、C3、Flot、amCharts 等，它的画面效果、动态效果都更精致，它的 文档首页 就透出一股小清新，基于 HTML5 Canvas，它拥有更好的性能且响应式，基本满足了一般数据展示的需要，包括折线图，条形图，饼图，散点图，雷达图，极地图，甜甜圈图等。
参考chart.js官方说明
echarts
样例参考
- 样例参考
- 语法规则
- 参数说明
{% 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 %}{% echarts 90%,300 %}
// 参数配置
{% endecharts %} Apache ECharts，一个基于 JavaScript 的开源可视化图表库，快速入门、所有示例
asciinema
asciinema是Linux系统下一款终端会话记录和回放的神器, 它是一个在终端下录制分享软件，基于文本的录屏工具，对终端输入输出进行捕捉， 然后以文本的形式来记录和回放，且在观看过程中可随时暂停视频并执行复制代码或者其他操作。
- 样例参考
- 语法规则
- 参数说明
- 图片引入，点击跳转到视频页
- 视频嵌入
{% asciinema [参数配置] [资源编号] %}
参数配置：1-图片方式嵌入网站;2-视频方式嵌入网站原理分析
asciinema 项目由几个互补部分构成：
- 基于命令行的终端会话记录器asciinema
- 具有asciinema.org API的网站
- javascript播放器
将终端的操作记录成 JSON 格式，然后使用 JavaScript 解析，配合CSS展示，从而模拟视频播放器。但实际上对应的文件就是文本信息，且相比GIF和视频文件体积非常小，无需缓冲播放，便于分享、嵌入到个人网站中。
因此需要相应获取到对应的资源编号，具体可参考文章asciinema-linux终端回放记录工具