第2篇博客：标签外挂

标签外挂属性是Hexo特有的功能，不是标准的Markdown语法格式，使用时要格外留意。

内容样式参考：

枫叶

https://blog.aqcoder.cn/posts/5dd3/

糖果屋教程贴

https://akilar.top/posts/615e2dec/

欢迎阅读第2篇博客，希望你有所收获！

选项卡(Tabs)

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

1. Unique name :
    - 选项卡块标签的唯一标识，使用时不带逗号
    - 在#id中用作每个标签及其索引号的前缀
    - 如果名称中包含空格，则对于生成#id，所有空格都将由破折号代替
    - 仅在当前帖子/页面的URL是唯一的

2. [index] : 
    - 活动选项卡的索引号
    - 可选参数

3. [Tab caption] : 
    - 当前选项卡的标题
    - 若未指定标题，则带有制表符索引后缀的唯一名称作为制表符的标题
    - 若未指定标题，但指定了图标，则标题为空
    - 可选参数

4. [@icon] : 
    - FontAwesome图标名称 (全名，如"fas fa-font")
    - 可选参数

李白（701年5月19日－762年11月30日），字太白，号青莲居士，中国唐朝诗人，自言祖籍陇西成纪（今甘肃省天水市秦安县），先世西凉武昭王李暠之后，与李唐皇室同宗。幼时内迁，寄籍剑南道绵州（今四川省江油市青莲镇）。另外，郭沫若研究认为李白出生于吉尔吉斯碎叶河上的碎叶城，属唐安西都护府（今楚河州托克马克市），该说有一定影响。有「诗仙」、「诗侠」、「酒仙」、「谪仙人」等称呼，活跃于盛唐，为杰出的浪漫主义诗人。与杜甫合称「李杜」。被贺知章惊呼为「天上谪仙」。

{% tabs message2_2 %}
<!-- tab 行路难 -->
金樽清酒斗十千，玉盘珍羞直万钱。

停杯投箸不能食，拔剑四顾心茫然。

欲渡黄河冰塞川，将登太行雪满山。

闲来垂钓碧溪上，忽复乘舟梦日边。

行路难，行路难，多歧路，今安在？

长风破浪会有时，直挂云帆济沧海。
<!-- endtab -->
<!-- tab 将进酒 -->
君不见，黄河之水天上来，奔流到海不复回。

君不见，高堂明镜悲白发，朝如青丝暮成雪。

人生得意须尽欢，莫使金樽空对月。

天生我材必有用，千金散尽还复来。

烹羊宰牛且为乐，会须一饮三百杯。

岑夫子，丹丘生，将进酒，杯莫停。

与君歌一曲，请君为我倾耳听。

钟鼓馔玉不足贵，但愿长醉不愿醒。

古来圣贤皆寂寞，惟有饮者留其名。

陈王昔时宴平乐，斗酒十千恣欢谑。

主人何为言少钱，径须沽取对君酌。

五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<!-- endtab -->
<!-- tab 清平调 -->
《清平调词三首》是唐代大诗人李白的组诗作品，共三首七言乐府诗。第一首从空间角度写，以牡丹花比杨贵妃的美艳；第二首从时间角度写，表现杨贵妃的受宠幸；第三首总承一、二两首，把牡丹和杨贵妃与君王糅合，融为一体。全诗构思精巧，辞藻艳丽，将花与人浑融在一起写，描绘出人花交映、迷离恍惚的景象，显示了诗人高超的艺术功力。

{% tabs message2_3 %}
<!-- tab 清平调(一) -->
云想衣裳花想容，春风拂槛露华浓。

若非群玉山头见，会向瑶台月下逢。
<!-- endtab -->
<!-- tab 清平调(二) -->
一枝秾艳露凝香，云雨巫山枉断肠。

借问汉宫谁得似，可怜飞燕倚新妆。
<!-- endtab -->
<!-- tab 清平调(三) -->
名花倾国两相欢，常得君王带笑看。

解释春风无限恨，沉香亭北倚栏杆。
<!-- endtab -->
{% endtabs %}
<!-- endtab -->
{% endtabs %}

李白（701年5月19日－762年11月30日），字太白，号青莲居士，中国唐朝诗人，自言祖籍陇西成纪（今甘肃省天水市秦安县），先世西凉武昭王李暠之后，与李唐皇室同宗。幼时内迁，寄籍剑南道绵州（今四川省江油市青莲镇）。另外，郭沫若研究认为李白出生于吉尔吉斯碎叶河上的碎叶城，属唐安西都护府（今楚河州托克马克市），该说有一定影响。有「诗仙」、「诗侠」、「酒仙」、「谪仙人」等称呼，活跃于盛唐，为杰出的浪漫主义诗人。与杜甫合称「李杜」。被贺知章惊呼为「天上谪仙」。

金樽清酒斗十千，玉盘珍羞直万钱。

停杯投箸不能食，拔剑四顾心茫然。

欲渡黄河冰塞川，将登太行雪满山。

闲来垂钓碧溪上，忽复乘舟梦日边。

行路难，行路难，多歧路，今安在？

长风破浪会有时，直挂云帆济沧海。

君不见，黄河之水天上来，奔流到海不复回。

君不见，高堂明镜悲白发，朝如青丝暮成雪。

人生得意须尽欢，莫使金樽空对月。

天生我材必有用，千金散尽还复来。

烹羊宰牛且为乐，会须一饮三百杯。

岑夫子，丹丘生，将进酒，杯莫停。

与君歌一曲，请君为我倾耳听。

钟鼓馔玉不足贵，但愿长醉不愿醒。

古来圣贤皆寂寞，惟有饮者留其名。

陈王昔时宴平乐，斗酒十千恣欢谑。

主人何为言少钱，径须沽取对君酌。

五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

《清平调词三首》是唐代大诗人李白的组诗作品，共三首七言乐府诗。第一首从空间角度写，以牡丹花比杨贵妃的美艳；第二首从时间角度写，表现杨贵妃的受宠幸；第三首总承一、二两首，把牡丹和杨贵妃与君王糅合，融为一体。全诗构思精巧，辞藻艳丽，将花与人浑融在一起写，描绘出人花交映、迷离恍惚的景象，显示了诗人高超的艺术功力。

云想衣裳花想容，春风拂槛露华浓。

若非群玉山头见，会向瑶台月下逢。

一枝秾艳露凝香，云雨巫山枉断肠。

借问汉宫谁得似，可怜飞燕倚新妆。

名花倾国两相欢，常得君王带笑看。

解释春风无限恨，沉香亭北倚栏杆。

折叠栏(Folding)

{% folding 图片测试 %}
![](https://s2.loli.net/2024/03/25/Cg4I62extU89MkF.jpg)
{% endfolding %}

{% folding yellow open, 默认打开 %}
默认打开的折叠框
{% endfolding %}

{% folding green, 代码测试 %}
代码块
{% endfolding %}

{% folding red, 列表测试 %}
- 测试1
- 测试2
{% endfolding %}

{% folding blue, 嵌套测试1 %}
{% folding green, 嵌套测试2 %}
{% folding red, 嵌套测试3 %}
![](https://s2.loli.net/2024/03/25/Cg4I62extU89MkF.jpg)
{% endfolding %}
{% endfolding %}
{% endfolding %}

图片测试

默认打开

默认打开的折叠框

代码测试

![](https://s2.loli.net/2024/03/25/Cg4I62extU89MkF.jpg)

列表测试

测试1
测试2

嵌套测试1

嵌套测试2

嵌套测试3

引导标注(Note)

方法一

标签样式：

{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

名称	可选项
class	default/ primary/ success/ info/ warning/ danger
no-icon	不显示icon
style	simple/ modern/ flat/ disabled

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

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% note disabled %}
默认 提示块标签
{% endnote %}

{% note default no-icon %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

{% note success no-icon %}
success 提示块标签
{% endnote %}

{% note info no-icon %}
info 提示块标签
{% endnote %}

{% note warning no-icon %}
warning 提示块标签
{% endnote %}

{% note danger no-icon %}
danger 提示块标签
{% endnote %}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

方法二

标签样式：

{% 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	simple/ modern/ flat/ disabled

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

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue no-icon %}
2021年快到了....
{% endnote %}

{% note pink no-icon %}
小心开车 安全至上
{% endnote %}

{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}

{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple no-icon %}
剪刀石头布
{% endnote %}

{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

上标标签(Tip)

在着重标注相关内容时可以使用，该样式参考自Akilar大佬编写的渲染标签。

{% tip info %}info{% endtip %}

{% tip success %}success{% endtip %}

{% tip error %}error{% endtip %}

{% tip warning %}warning{% endtip %}

{% tip bolt %}bolt{% endtip %}

{% tip ban %}ban{% endtip %}

{% tip home %}home{% endtip %}

{% tip sync %}sync{% endtip %}

{% tip cogs %}cogs{% endtip %}

{% tip key %}key{% endtip %}

{% tip bell %}bell{% endtip %}

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

动态标签(anima)

动态标签的实质是引用了font-awesome-animation的css样式，不一定局限于tip标签，也可以是其他标签。

On DoM load (当页面加载时显示动画)

{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}

调整动画速度

{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}

On hover (当鼠标悬停时显示动画)

{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}

On parent hover（当鼠标悬停在父级元素时显示动画）

{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
{% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

On DoM load (当页面加载时显示动画)

warning

ban

调整动画速度

warning

ban

On hover (当鼠标悬停时显示动画)

warning

ban

On parent hover（当鼠标悬停在父级元素时显示动画）

warning

ban

相册(gallery)

Butterfly自带gallery相册，而且可以根据图片的大小自动调整排版，效果比Volantis的gallery更好，因此不再收录Volantis的gallery标签。

gallery相册内的图片在加入时，会因为不同的浏览器兼容问题而出现图片不断抖动问题，本质是图片不停的调整大小。可行的方案就是调整图片的宽高，但是就丧失了gallery本身的意义。

对于gallerygroup和gallery相册的链接问题。一般使用相册图库时，可以在导航栏加入gallery的page页(指令hexo new page gallery)。然后在[Blog]/source/gallery/index.md中放相册图库的封面图片。然后在[Blog]/source/gallery/下新建相应的文件夹，如新建文件夹test-photos，之后新建[Blog]/source/gallery/test-photos/index.md，并在里面填入gallery相册内容。

gallerygroup 相册图库

<div class="gallery-group-main">
{% galleryGroup '漫威壁纸' '收集到的一些壁纸' '/photos/test-photos' https://s2.loli.net/2024/03/27/IOe2BJVTEg54WmU.jpg %}
</div>

gallery 相册

{% gallery %}
![](https://api.aqcoder.cn/random?w=1024&h=768)
![](https://api.aqcoder.cn/random?w=1024&h=768)
![](https://api.aqcoder.cn/random?w=1024&h=768)
![](https://api.aqcoder.cn/random?w=1024&h=768)
![](https://api.aqcoder.cn/random?w=1024&h=768)
![](https://api.aqcoder.cn/random?w=1024&h=768)
{% endgallery %}

gallerygroup 相册图库

之后在[Blog]/source/gallery/test-photos/index.md中加入gallery相册内容即可。

gallery 相册

[{"url":"https://api.aqcoder.cn/random?w=1024&h=768","alt":""},{"url":"https://api.aqcoder.cn/random?w=1024&h=768","alt":""},{"url":"https://api.aqcoder.cn/random?w=1024&h=768","alt":""},{"url":"https://api.aqcoder.cn/random?w=1024&h=768","alt":""},{"url":"https://api.aqcoder.cn/random?w=1024&h=768","alt":""},{"url":"https://api.aqcoder.cn/random?w=1024&h=768","alt":""}]

按钮(button)

标签样式：

{% 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/留空

This is my website, click the button {% btn 'https://imagitionbest.github.io/',aqcoder %}
This is my website, click the button {% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://imagitionbest.github.io/',aqcoder,,outline %}
This is my website, click the button {% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,larger %}

This is my website, click the button aqcoder
This is my website, click the button aqcoder
This is my website, click the button aqcoder
This is my website, click the button aqcoder
This is my website, click the button aqcoder

{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,block %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,block center larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,block right outline larger %}

aqcoder
aqcoder
aqcoder

{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,blue larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,pink larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,red larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,purple larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,orange larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,green larger %}

aqcoder
aqcoder
aqcoder
aqcoder
aqcoder
aqcoder
aqcoder

<div class="btn-center">
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline blue larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline pink larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline red larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline purple larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline orange larger %}
{% btn 'https://imagitionbest.github.io/',aqcoder,far fa-hand-point-right,outline green larger %}
</div>

aqcoder aqcoder aqcoder aqcoder aqcoder aqcoder aqcoder

标记(label)

标签样式：

{% label text color %}

text: 文字
color: [可选] 背景颜色，默认为default (blue/pink/red/purple/orange/green)

臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。