Butterfly主题外挂标签

此文章部分转载于

Hassan’s Blog

Tag Plugins Plus | Akilarの糖果屋

Butterfly美化——轮播置顶文章 | Jayhrnの糖衣阁

感谢大神的相关文章

小图标合集

😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙😚☺🙂🤗🤩🤔
🤨😐😑😶🙄😏😣😥😮🤐😯😪😫🥱😴😌😛😜😝🤤😒😓😔
🙃🤑😲☹🙁😖😞😟😤😢😭😦😧😨😩🤯😬😰😱🥵🥶😳🤓
🤪😵🥴😠😡🤬😷🤒🤕🤢🤮🤧😇🥳🥺🤡🤠🤥🤫🤭🧐😕
😈👿👹👺💀☠👻👽👾🤖💩

🍕🍔🍟🌭🧂🍿🥓🥚🍳🧇🥞🧈🍞🥐🥨🥯🥙🥪🌮🌯🥫🍖🍗🥩🍠 🥠
🥡🍱🍚🍛🍜🦪🍣🍤🍥🥮🍢🧆🥘🍲🍝🥣🍧🍦🍨🍩🍪🎂🍰🧁🍫🍬🍭
🍡🍮🍯🍼🥛🧃☕🍵🧉🍶🍾🍷🍸🍹🍺🍻🥂🥃🧊🥤🥢🍴🥄🏺🥝🥥🍇🍈🍉
🍊🍌🍋🍍🥭🍎🍏🍐🍑🍒🍓🍅🍆🌽🌶🍄🥑🥒🥬🥦🥔🧄🧅🥕🌰🥜💐🌸🏵
🌹🌺🌻🌼🌷🥀☘🌱🌲🌳🌴🌵🌾🌿🍀🍁🍂🍃

😺😸😹😻😼😽🙀😿😾🐱‍👤🐱‍🏍
🐱‍💻🐱‍🐉🐱‍👓🐱‍🚀🙈🙉🙊🐵🐶🐺🐱🦁🐯🦒🦊🦝🐮🐷🐗🐭🐹
🐰🐻🐨🐼🐸🦓🐴🦄🐔🐲🐽🐾🐒🦍🦧🦮🐕‍🦺🐩🐕🐈🐅🐆🐎🦌
🦏🦛🐂🐃🐄🐖🐏🐑🐐🐪🐫🦙🦘🦥🦨🦡🐘🐁🐀🦔🐇🐿🦎
🐊🐢🐍🐉🦕🦖🦦🦈🐬🐳🐋🐟🐠🐡🦐🦑🐙🦞🦀🐚🦆🐓🦃🦅🕊
🦢🦜🦩🦚🦉🐦🐧🐥🐤🐣🦇🦋🐌🐛🦟🦗🐜🐝🐞🦂🕷

🚗🚓🚕🛺🚙🚌🚎🚒🚚🚛🚜🚘🚔🚖🚍🦽🦼🛹🚲🛴🛵🏍🚄🚅🚈🚝🚞
🚃🚋🚆🛩🚉🪂🚊✈🚇🛫🚟🛬🚠💺🚡🚁🚀🚂🛸🛰⛵🚤🛥⛴🛳🚢⚓🌎🌏
🛤🏕🗺🏞🧭🛣🏔🏖⛰🏜🌋🏝🗻🏚🏙🏘🏗🏛🕋🕌🛕🕍⛩⛪去🏰🏯🗼🌉
🛁🌝🌤⛈⛅☁🌩🌨🌧🌦🌥🌜🌞⭐🌟🌈🌀🌬🌡☄🌠☔🌊⛱⚡❄☃⛄🔥

❤🧡💛💚💙💜🤎🖤🤍💔❣💕💞💓💗💖💘💝💟💌💥💤💦💨💫🕳💯🔅🔆⚜
〽❓❔❗❕〰➰✔💲💱➕➖✖➗💭🗯💬🗨👁‍🗨🕐🕑🕒🕧🕦🕥🕤🕝🕟🕠🕡🕢

🌸🕍🦄🦜🧿🤖📈💫📚📭📌🍺🥤🍋🟢🧿🎯🍓🌽🧉🍣💌🔍🎐🌀📐🕸

引用 Note

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

{% note no-icon %}少年心事当拂云{% endnote %}
{% note blue no-icon %}黄沙百战穿金甲，不破楼兰终不还{% endnote %}
{% note pink no-icon %}愿君学长松，慎勿作桃李{% endnote %}
{% note red no-icon %}日月之行，若出其中；星汉灿烂，若出其里{% endnote %}
{% note orange no-icon %}直如朱丝绳，清如玉壶冰{% endnote %}
{% note purple no-icon %}男儿何不带吴钩，收取关山五十州{% endnote %}
{% note green no-icon %}疾风知劲草，板荡识诚臣{% 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 %}

Simple样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

modern样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon样式

少年心事当拂云

黄沙百战穿金甲，不破楼兰终不还

愿君学长松，慎勿作桃李

日月之行，若出其中；星汉灿烂，若出其里

直如朱丝绳，清如玉壶冰

男儿何不带吴钩，收取关山五十州

疾风知劲草，板荡识诚臣

flat样式

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

语法 👇

1
{% link <链接名>, <链接地址>, <链接图像> %}

对应效果

实现源码

1
{% link 源码在这里，点击即可找到哦,Serious.涵,https://gitee.com/hyh2813842071/abweb-gltest %}

  • gallerygroup 相册库

    语法 👇

    1
    2
    3
    <div class="gallery-group-main">
    {% galleryGroup <相册名> <相册描述> '<相册地址>' <相册背景图地址> %}
    </div>

  • 语法 👇

    1
    2
    3
    4
    {% gallery %}
    ![](图片地址)
    ![](图片地址)
    {% endgallery %}

折叠框 Folding

1
2
3
4
5
颜色参数：[不填默认灰色]，cyan,green,yellow,red,blue
展开参数：[不填默认关闭]，open
{% folding [颜色参数] [展开参数], <标题> %}
<Cusotm>
{% endfolding %}

🍒颜色：Green ；展开参数：默认； 标题：《老子·德经·第六十四章》

《老子·德经·第六十四章》

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。

🍓 颜色：yellow ；展开参数：open； 标题：陆游《金错刀行》

陆游《金错刀行》

呜呼！楚虽三户能亡秦，岂有堂堂中国空无人！

1
2
3
4
5
6
7
8
9
10
11
🍒颜色：Green ；展开参数：默认； 标题：《老子·德经·第六十四章》

{% folding green, "《老子·德经·第六十四章》" %}
合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。
{% endfolding %}

🍓 颜色：yellow ；展开参数：open； 标题：陆游《金错刀行》

{% folding yellow open, "陆游《金错刀行》" %}
呜呼！楚虽三户能亡秦，岂有堂堂中国空无人！
{% endfolding %}

诗词标签 Poem

1
2
3
{% poem <标题>,<作者> %}
<诗词内容>
{% endpoem %}
南陵别儿童入京
李白

白酒新熟山中归，黄鸡啄黍秋正肥。

呼童烹鸡酌白酒，儿女嬉笑牵人衣。

高歌取醉欲自慰，起舞落日争光辉。

游说万乘苦不早，著鞭跨马涉远道。

会稽愚妇轻买臣，余亦辞家西入秦。

仰天大笑出门去，我辈岂是蓬蒿人。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% poem "南陵别儿童入京","李白" %}

白酒新熟山中归，黄鸡啄黍秋正肥。

呼童烹鸡酌白酒，儿女嬉笑牵人衣。

高歌取醉欲自慰，起舞落日争光辉。

游说万乘苦不早，著鞭跨马涉远道。

会稽愚妇轻买臣，余亦辞家西入秦。

仰天大笑出门去，我辈岂是蓬蒿人。

{% endpoem %}

复选列表 checkbox

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

单选列表 radio

1
{% radio 样式参数（可选）, 文本（支持简单md） %}{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 颜色: red,yellow,green,cyan,blue,gray
  2. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

时间轴 timeline

1
{% radio 样式参数（可选）, 文本（支持简单md） %}{% checkbox 样式参数（可选）, 文本（支持简单md） %}
参数 解释
title 标题/时间线
color timeline颜色:default(留空) / blue / pink / red / purple / orange / green

时间轴样式

2019-07-24

第一次成为哈信息游戏专业的学生

2020-9-12

第一次尝试做游戏，并且坚持了1年有余，将《光明辞决》转化为现实

2021-11-27

结束了美丽的故事，路漫漫其修远兮，无疆大路而求索

1
2
3
4
5
6
7
8
9
10
11
{% timeline 时间轴样式,blue %}
<!-- timeline 2019-07-24  -->
第一次成为哈信息游戏专业的学生
<!-- endtimeline -->
<!-- timeline 2020-9-12 -->
第一次尝试做游戏，并且坚持了1年有余，将《光明辞决》转化为现实
<!-- endtimeline -->
<!-- timeline 2021-11-27  -->
结束了美丽的故事，路漫漫其修远兮，无疆大路而求索
<!-- endtimeline -->
{% endtimeline %}

进度条 progress

1
{% progress [width] [color] [text] %}

1.width: 0到100的阿拉伯数字
2.color: 颜色，取值有red,yellow,green,cyan,blue,gray
3.text:进度条上的文字内容

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

上标标签 tip

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% 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 %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本：这里没有验证码
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

按钮 btns

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：rounded, circle
  2. 增加文字样式：可以在容器内增加 <b>标题</b>和<p>描述文字</p>
  3. 布局方式：
    默认为自动宽度，适合视野内只有一两个的情况。
参数 含义
wide 宽一点的按钮
fill 填充布局，自动铺满至少一行，多了会换行
center 居中，按钮之间是固定间距
around 居中分散
grid2 等宽最多2列，屏幕变窄会适当减少列数
grid3 等宽最多3列，屏幕变窄会适当减少列数
grid4 等宽最多4列，屏幕变窄会适当减少列数
grid5 等宽最多5列，屏幕变窄会适当减少列数
下载源码 查看文档 
1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

Label

1
{% label text color %}
参数 解释
text 文字
color 【可选】背景颜色，默认为 default default/blue/pink/red/purple/orange/green

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

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

{% gallery %}
markdown 圖片格式
{% endgallery %}
  • gallerygroup 相册图库
参数名 释义
name 图库名字
description 图库描述
link 链接到对应相册的地址
img-url 图库封面

思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。

  • gallery 相册
    区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）
Group Image Gallery
光明辞决2

留一个足迹

1
https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/Bright_Resign_Two_FirstPic.png

Mermaid

1
2
3
{% mermaid %}
内容
{% endmermaid %}

使用 mermaid 标籤可以绘製 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看 mermaid 文档

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

音频 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
Photon2
哔哩哔哩
力扣
哈尔滨信息工程学院
1
2
3
4
5
6
{% sitegroup %}
{% site Photon2, url=https://www.photonengine.com/en-US/Photon, screenshot=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/photon2_1660545986.jpg, avatar=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/PunIcon-128.png, description=联网框架，值得拥有 %}
{% site 哔哩哔哩, url=https://www.bilibili.com/, screenshot=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/bilibili_1660545941.jpg, avatar=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/bilibilipiclofo.png, description=一个神秘的网站 %}
{% site 力扣, url=https://leetcode.cn/, screenshot=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/likou_1660545976.jpg, avatar=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/pic_likou.png, description=程序员的必备 %}
{% site 哈尔滨信息工程学院, url=https://www.hxci.com.cn/, screenshot=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/haxinxi_1660545961.jpg, avatar=https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/hxx_blue.png, description=我的母校 %}
{% endsitegroup %}