Butterfly主题外挂标签
Butterfly主题外挂标签
黄雨涵此文章部分转载于
Butterfly美化——轮播置顶文章 | Jayhrnの糖衣阁
感谢大神的相关文章
小图标合集
😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙😚☺🙂🤗🤩🤔
🤨😐😑😶🙄😏😣😥😮🤐😯😪😫🥱😴😌😛😜😝🤤😒😓😔
🙃🤑😲☹🙁😖😞😟😤😢😭😦😧😨😩🤯😬😰😱🥵🥶😳🤓
🤪😵🥴😠😡🤬😷🤒🤕🤢🤮🤧😇🥳🥺🤡🤠🤥🤫🤭🧐😕
😈👿👹👺💀☠👻👽👾🤖💩
🍕🍔🍟🌭🧂🍿🥓🥚🍳🧇🥞🧈🍞🥐🥨🥯🥙🥪🌮🌯🥫🍖🍗🥩🍠 🥠
🥡🍱🍚🍛🍜🦪🍣🍤🍥🥮🍢🧆🥘🍲🍝🥣🍧🍦🍨🍩🍪🎂🍰🧁🍫🍬🍭
🍡🍮🍯🍼🥛🧃☕🍵🧉🍶🍾🍷🍸🍹🍺🍻🥂🥃🧊🥤🥢🍴🥄🏺🥝🥥🍇🍈🍉
🍊🍌🍋🍍🥭🍎🍏🍐🍑🍒🍓🍅🍆🌽🌶🍄🥑🥒🥬🥦🥔🧄🧅🥕🌰🥜💐🌸🏵
🌹🌺🌻🌼🌷🥀☘🌱🌲🌳🌴🌵🌾🌿🍀🍁🍂🍃
😺😸😹😻😼😽🙀😿😾🐱👤🐱🏍
🐱💻🐱🐉🐱👓🐱🚀🙈🙉🙊🐵🐶🐺🐱🦁🐯🦒🦊🦝🐮🐷🐗🐭🐹
🐰🐻🐨🐼🐸🦓🐴🦄🐔🐲🐽🐾🐒🦍🦧🦮🐕🦺🐩🐕🐈🐅🐆🐎🦌
🦏🦛🐂🐃🐄🐖🐏🐑🐐🐪🐫🦙🦘🦥🦨🦡🐘🐁🐀🦔🐇🐿🦎
🐊🐢🐍🐉🦕🦖🦦🦈🐬🐳🐋🐟🐠🐡🦐🦑🐙🦞🦀🐚🦆🐓🦃🦅🕊
🦢🦜🦩🦚🦉🐦🐧🐥🐤🐣🦇🦋🐌🐛🦟🦗🐜🐝🐞🦂🕷
🚗🚓🚕🛺🚙🚌🚎🚒🚚🚛🚜🚘🚔🚖🚍🦽🦼🛹🚲🛴🛵🏍🚄🚅🚈🚝🚞
🚃🚋🚆🛩🚉🪂🚊✈🚇🛫🚟🛬🚠💺🚡🚁🚀🚂🛸🛰⛵🚤🛥⛴🛳🚢⚓🌎🌏
🛤🏕🗺🏞🧭🛣🏔🏖⛰🏜🌋🏝🗻🏚🏙🏘🏗🏛🕋🕌🛕🕍⛩⛪去🏰🏯🗼🌉
🛁🌝🌤⛈⛅☁🌩🌨🌧🌦🌥🌜🌞⭐🌟🌈🌀🌬🌡☄🌠☔🌊⛱⚡❄☃⛄🔥
❤🧡💛💚💙💜🤎🖤🤍💔❣💕💞💓💗💖💘💝💟💌💥💤💦💨💫🕳💯🔅🔆⚜
〽❓❔❗❕〰➰✔💲💱➕➖✖➗💭🗯💬🗨👁🗨🕐🕑🕒🕧🕦🕥🕤🕝🕟🕠🕡🕢
🌸🕍🦄🦜🧿🤖📈💫📚📭📌🍺🥤🍋🟢🧿🎯🍓🌽🧉🍣💌🔍🎐🌀📐🕸
引用 Note
1 | ## Simple样式 |
Simple样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
modern样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
no-icon样式
flat样式
你是刷 Visa 还是 UnionPay
2021年快到了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
链接卡片 Link
语法 👇
1 | {% link <链接名>, <链接地址>, <链接图像> %} |
对应效果
实现源码
1 | {% link 源码在这里,点击即可找到哦,Serious.涵,https://gitee.com/hyh2813842071/abweb-gltest %} |
相册 Gallery
gallerygroup 相册库
语法 👇
1
2
3<div class="gallery-group-main">
{% galleryGroup <相册名> <相册描述> '<相册地址>' <相册背景图地址> %}
</div>gallery 相册
语法 👇
1
2
3
4{% gallery %}


{% endgallery %}
折叠框 Folding
1 | 颜色参数:[不填默认灰色],cyan,green,yellow,red,blue |
🍒颜色:Green ;展开参数:默认; 标题:《老子·德经·第六十四章》
《老子·德经·第六十四章》
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。
🍓 颜色:yellow ;展开参数:open; 标题:陆游《金错刀行》
陆游《金错刀行》
呜呼!楚虽三户能亡秦,岂有堂堂中国空无人!
1 | 🍒颜色:Green ;展开参数:默认; 标题:《老子·德经·第六十四章》 |
诗词标签 Poem
1 | {% poem <标题>,<作者> %} |
白酒新熟山中归,黄鸡啄黍秋正肥。
呼童烹鸡酌白酒,儿女嬉笑牵人衣。
高歌取醉欲自慰,起舞落日争光辉。
游说万乘苦不早,著鞭跨马涉远道。
会稽愚妇轻买臣,余亦辞家西入秦。
仰天大笑出门去,我辈岂是蓬蒿人。
1 | {% poem "南陵别儿童入京","李白" %} |
复选列表 checkbox
1 | {% checkbox 样式参数(可选), 文本(支持简单md) %} |
- 样式: plus, minus, times
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
1 | {% checkbox 纯文本测试 %} |
单选列表 radio
1 | {% radio 样式参数(可选), 文本(支持简单md) %}{% checkbox 样式参数(可选), 文本(支持简单md) %} |
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
1 | {% radio 纯文本测试 %} |
时间轴 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 | {% timeline 时间轴样式,blue %} |
进度条 progress
1 | {% progress [width] [color] [text] %} |
1.width: 0到100的阿拉伯数字
2.color: 颜色,取值有red,yellow,green,cyan,blue,gray
3.text:进度条上的文字内容
1 | {% progress 10 red 进度条样式预览 %} |
上标标签 tip
1 | {% tip [参数,可选] %}文本内容{% endtip %} |
- 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
- 自定义图标: 支持fontawesome。
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
1 | {% tip %}default{% endtip %} |
行内文本样式 text
1 | {% u 文本内容 %} |
- 带 下划线 的文本
- 带
着重号 的文本 - 带
波浪线 的文本 - 带
删除线的文本 - 键盘样式的文本 command + D
- 密码样式的文本:
这里没有验证码
1 | 1. 带 {% u 下划线 %} 的文本 |
行内文本 span
1 | {% span 样式参数(参数以空格划分), 文本内容 %} |
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
Volantis
A Wonderful Theme for Hexo
1 | - 彩色文字 |
按钮 btns
1 | {% btns 样式参数 %} |
- 圆角样式:rounded, circle
- 增加文字样式:可以在容器内增加
<b>标题</b>
和<p>描述文字</p>
- 布局方式:
默认为自动宽度,适合视野内只有一两个的情况。
参数 | 含义 |
---|---|
wide | 宽一点的按钮 |
fill | 填充布局,自动铺满至少一行,多了会换行 |
center | 居中,按钮之间是固定间距 |
around | 居中分散 |
grid2 | 等宽最多2列,屏幕变窄会适当减少列数 |
grid3 | 等宽最多3列,屏幕变窄会适当减少列数 |
grid4 | 等宽最多4列,屏幕变窄会适当减少列数 |
grid5 | 等宽最多5列,屏幕变窄会适当减少列数 |
1 | {% btns rounded grid5 %} |
Label
1 | {% label text color %} |
参数 | 解释 |
---|---|
text | 文字 |
color | 【可选】背景颜色,默认为 default default/blue/pink/red/purple/orange/green |
臣亮言:先帝 创业未半,而中道崩殂 。今天下三分,益州疲敝 ,此诚危急存亡之秋 也!然侍衞之臣,不懈于内;忠志之士 ,忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中、府中,俱为一体;陟罚臧否,不宜异同。若有作奸 、犯科 ,及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。
1 | 臣亮言:{% label 先帝 %}创业未半,而{% label 中道崩殂 blue %}。今天下三分,{% label 益州疲敝 pink %},此诚{% label 危急存亡之秋 red %}也!然侍衞之臣,不懈于内;{% label 忠志之士 purple %},忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。 |
相册 gallery
1 | <div class="gallery-group-main"> |
- gallerygroup 相册图库
参数名 | 释义 |
---|---|
name | 图库名字 |
description | 图库描述 |
link | 链接到对应相册的地址 |
img-url | 图库封面 |
思维拓展一下,相册图库的实质其实就是个快捷方式,可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册,完全可以作为一个链接卡片,链接到视频、QQ、友链都是不错的选择。
- gallery 相册
区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕)
1 | https://sevenestudio-hexo.oss-cn-hangzhou.aliyuncs.com/img/Bright_Resign_Two_FirstPic.png |
Mermaid
1 | {% mermaid %} |
使用 mermaid 标籤可以绘製 Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和 Pie Chart(圆形图),具体可以查看 mermaid 文档
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5
1 | {% mermaid %} |
音频 audio
1 | {% audio 音频链接 %} |
1 | {% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} |
网站卡片 sites
1 | {% sitegroup %} |
1 | {% sitegroup %} |