本文参考了Butterfly主题作者的文章:标签外挂
标签外挂是Hexo独有的功能,且只适用于Butterfly主题,在其他Hexo主题上使用可能会报错!个人认为这有助于美化文章页面,所以做一个学习记录,供以后查询使用!
1.tabs {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %} Unique name : Unique name of tabs block tag without comma. Will be used in #id's as prefix for each tab with their index numbers. If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes. Only for current url of post/page must be unique! [index] : Index number of active tab. If not specified, first tab (1) will be selected. If index is -1, no tab will be selected. It's will be something like spoiler. Optional parameter. [Tab caption] : Caption of current tab. If not caption specified, unique name with tab index suffix will be used as caption of tab. If not caption specified, but specified icon, caption will empty. Optional parameter. [@icon] : FontAwesome icon name (full-name, look like 'fas fa-font') Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'. Optional parameter.
{% tabs 测试 %} <!-- tab --> This is Tab 1. <!-- endtab --> <!-- tab --> This is Tab 2. <!-- endtab --> <!-- tab --> This is Tab 3. <!-- endtab --> {% endtabs %}
{% tabs 测试, 3 %} <!-- tab --> This is Tab 1. <!-- endtab --> <!-- tab --> This is Tab 2. <!-- endtab --> <!-- tab --> This is Tab 3. <!-- endtab --> {% endtabs %}
{% tabs 测试, -1 %} <!-- tab --> This is Tab 1. <!-- endtab --> <!-- tab --> This is Tab 2. <!-- endtab --> <!-- tab --> This is Tab 3. <!-- endtab --> {% endtabs %}
{% tabs 测试 %} <!-- tab 自定义Tab名 --> 自定义Tab名 <!-- endtab --> <!-- tab @fas fa-fan --> 只有icon <!-- endtab --> <!-- tab 大风车@fas fa-fan --> icon和Tab名 <!-- endtab --> {% endtabs %}
2.label
3.7.5 及以上版本适用
{% label text color %} text 文字 color 【可选】背景颜色(default/blue/pink/red/purple/orange/green),默认为 default
声声慢·寻寻觅觅 宋·李清照 {% label 寻寻觅觅,冷冷清清,凄凄惨惨戚戚 green %}。 乍暖还寒时候,最难将息。 {% label 三杯两盏淡酒,怎敌他、晚来风急 blue %}! 雁过也,正伤心,却是旧时相识。 {% label 满地黄花堆积,憔悴损,如今有谁堪摘 orange %}? 守着窗儿,独自怎生得黑! 梧桐更兼细雨,到黄昏、点点滴滴。 {% label 这次第,怎一个愁字了得 purple %}!
声声慢·寻寻觅觅 宋·李清照
寻寻觅觅,冷冷清清,凄凄惨惨戚戚 。
乍暖还寒时候,最难将息。
三杯两盏淡酒,怎敌他、晚来风急 !
雁过也,正伤心,却是旧时相识。
满地黄花堆积,憔悴损,如今有谁堪摘 ?
守着窗儿,独自怎生得黑! 梧桐更兼细雨,到黄昏、点点滴滴。
这次第,怎一个愁字了得 !
3.0以上适用
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} [url] : 链接 [text] : 按钮文字 [icon] : [可选] 图标 [color] : [可选] 按钮背景顔色(默认style时) 按钮字体和边框顔色(outline时) default/blue/pink/red/purple/orange/green [style] : [可选] 按钮样式 默认实心 outline/留空 [layout] : [可选] 按钮佈局 默认为line block/留空 [position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边 center/right/留空 [size] : [可选] 按钮大小 larger/留空
素履的博客 {% btn 'https://www.xyming108.top/',素履的博客 %} 素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right %} 素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,,outline %} 素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,outline %} 素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,larger %}
素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,block %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,block center larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,block right outline larger %}
素履的博客
素履的博客
素履的博客
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,blue larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,pink larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,red larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,purple larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,orange larger %} {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,green larger %}
素履的博客
素履的博客
素履的博客
素履的博客
素履的博客
素履的博客
素履的博客
<div class ="btn-center" > {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline larger %} {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline blue larger %} {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline pink larger %} {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline red larger %} {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline purple larger %} {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline orange larger %} {% btn 'https://butterfly.js.org/',素履的博客,far fa-hand-point-right,outline green larger %} </div >
4.Note (Bootstrap Callout) 修改主题配置文件
note: style: simple icons: false border_radius: 3 light_bg_offset: 0
icons和light_bg_offset只对方法一生效
{% note [class] [no-icon] [style] %} Any content (support inline tags too.io). {% endnote %} class 【可选】标识,不同的标识有不同的配色( default / primary / success / info / warning / danger ) no-icon 【可选】不显示 icon style 【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
simple
{% note simple %} 默认 提示块标籤 {% endnote %} {% note default simple %} default 提示块标籤 {% endnote %} {% note primary simple %} primary 提示块标籤 {% endnote %} {% note success simple %} success 提示块标籤 {% endnote %} {% note info simple %} info 提示块标籤 {% endnote %} {% note warning simple %} warning 提示块标籤 {% endnote %} {% note danger simple %} danger 提示块标籤 {% endnote %}
modern
{% note modern %} 默认 提示块标籤 {% endnote %} {% note default modern %} default 提示块标籤 {% endnote %} {% note primary modern %} primary 提示块标籤 {% endnote %} {% note success modern %} success 提示块标籤 {% endnote %} {% note info modern %} info 提示块标籤 {% endnote %} {% note warning modern %} warning 提示块标籤 {% endnote %} {% note danger modern %} danger 提示块标籤 {% endnote %}
flat
{% note flat %} 默认 提示块标籤 {% endnote %} {% note default flat %} default 提示块标籤 {% endnote %} {% note primary flat %} primary 提示块标籤 {% endnote %} {% note success flat %} success 提示块标籤 {% endnote %} {% note info flat %} info 提示块标籤 {% endnote %} {% note warning flat %} warning 提示块标籤 {% endnote %} {% note danger flat %} danger 提示块标籤 {% endnote %}
disabled
{% note disabled %} 默认 提示块标籤 {% endnote %} {% note default disabled %} default 提示块标籤 {% endnote %} {% note primary disabled %} primary 提示块标籤 {% endnote %} {% note success disabled %} success 提示块标籤 {% endnote %} {% note info disabled %} info 提示块标籤 {% endnote %} {% note warning disabled %} warning 提示块标籤 {% endnote %} {% note danger disabled %} danger 提示块标籤 {% endnote %}
3.2.0 以上版本支持
{% note [color] [icon] [style] %} Any content (support inline tags too.io). {% endnote %} color 【可选】顔色(default / blue / pink / red / purple / orange / green) icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) style 【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
simple
{% note 'fab fa-cc-visa' simple %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' simple %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' simple %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' simple%} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' simple %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' simple %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' simple %} 前端最讨厌的浏览器 {% endnote %}
modern
{% note 'fab fa-cc-visa' modern %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' modern %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' modern %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' modern%} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' modern %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' modern %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' modern %} 前端最讨厌的浏览器 {% endnote %}
flat
{% note 'fab fa-cc-visa' flat %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' flat %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' flat %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' flat%} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' flat %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' flat %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' flat %} 前端最讨厌的浏览器 {% endnote %}
disabled
{% note 'fab fa-cc-visa' disabled %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' disabled %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' disabled %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' disabled %} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' disabled %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' disabled %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' disabled %} 前端最讨厌的浏览器 {% endnote %}