结合原生butterfly主题，部分参考Volantis主题标签样式，不断更新中
这里部分样式仅适用于会飞的小弋博客，原生的butterfly主题并不适用，需要进行适配。主要是要对主题进行一定修改，如有需要，可以参考我的主题修改记录，也可以给我留言
在一段话中方便插入各种颜色的标签，包括：红色 、黄色 、绿色 、青色 、蓝色 、灰色 。
文档「开始」页面中的标题部分就是超大文字。
Volantis
A Wonderful Theme for Hexo
样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。
字体
颜色
1 red, yellow, green, cyan, blue, gray
大小
1 small, h4, h3, h2, h1, large, huge, ultra
对齐方向
1 2 3 4 5 6 在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。 文档「开始」页面中的标题部分就是超大文字。 {% p center logo large, Volantis %} {% p center small, A Wonderful Theme for Hexo %}
小标题
Windows 10不是為所有人設計,而是為每個人設計
嵌套测试
Folding 测试
点击查看更多
普通标签
块状标签
1 2 3 4 5 {% noteblock 样式参数 %} 文本段落 {% endnoteblock %}
彩色的图标
1 2 3 4 5 6 7 8 9 quote, info, warning, done/success, error/danger quote 蓝色引号 info 蓝色叹号 warning 黄色叹号 done 绿色打钩 success 绿色打钩 error 红色禁止 danger 红色打叉
灰色的图标
也可以指定颜色
1 2 3 4 5 6 7 8 9 10 11 12 13 radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo radiation 核标记 bug 爬虫 idea 电灯泡 link 锁链 paperclip 回形针 todo 勾选框 msg 向右箭头 guide 指路牌 download 下载标记 up 上传标记 undo 回转箭头标记
颜色
1 clear, light, gray, red, yellow, green, cyan, blue
有颜色标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 {% note red, 为简单的一句话提供的简便写法。 %} {% note quote, 为简单的一句话提供的简便写法。 %} {% note info, 为简单的一句话提供的简便写法。 %} {% note warning, 为简单的一句话提供的简便写法。 %} {% note done, 支持同样丰富的参数。 %} {% note success, 支持同样丰富的参数。 %} {% note danger, 支持同样丰富的参数。 %} {% note error, 支持同样丰富的参数。 %}
灰色标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 {% note radiation, 支持同样丰富的参数。 %} {% note bug, 支持同样丰富的参数。 %} {% note idea, 支持同样丰富的参数。 %} {% note link, 支持同样丰富的参数。 %} {% note paperclip, 支持同样丰富的参数。%} {% note todo, 支持同样丰富的参数。 %} {% note msg, 支持同样丰富的参数。 %} {% note guide, 支持同样丰富的参数。 %} {% note download, 支持同样丰富的参数。 %} {% note up, 支持同样丰富的参数。 %} {% note undo, 支持同样丰富的参数。 %}
块标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 {% noteblock quote %} {% p subtitle, 小标题 %} Windows 10不是為所有人設計,而是為每個人設計 {% p subtitle, 嵌套测试 %} {% noteblock %} 请坐和放宽，我正在帮你搞定一切... {% endnoteblock %} {% p subtitle, Folding 测试 %} {% folding 点击查看更多 %} {% note warning, 不要说我们没有警告过你 %} {% noteblock bug red %} 我们都有不顺利的时候 {% endnoteblock %} {% endfolding %} {% endnoteblock %} {% tabs tab-id %}
1 2 3 4 空 蓝色叹号上标 success 绿色打钩上标 error 红色叉上标 warning 黄色叹号上标
1 2 3 4 {% tip, 为简单的一句话提供的简便写法。 %} {% tip success, 为简单的一句话提供的简便写法。 %} {% tip error, 为简单的一句话提供的简便写法。 %} {% tip warning, 为简单的一句话提供的简便写法。 %}
剩下标签没做兼容，为HTML写法
1 2 3 4 5 6 7 8 <div class="tip wtgo"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip ban"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip home"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip important"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip ref"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip ffa"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip key"><p>为简单的一句话提供的简便写法。</p><p></p></div> <div class="tip socd"><p>为简单的一句话提供的简便写法。</p><p></p></div>
各种标签也可以用html的方式配合上动画，变成动画标签 ，效果还是比较夸张的！！！
示例代码
具体的样式，见动画图标
1 2 3 4 <div class ='tip faa-horizontal animated' > <p > 默认情况<p > </div > <div class ='tip success faa-flash animated' > <p > success<p > </div > <div class ='tip error faa-spin animated' > <p > error<p > </div > <div class ='tip warning faa-shake animated' > <p > warning<p > </div >
1 {% checkbox 样式参数（可选）, 文本（支持简单md） %}
颜色
1 red, yellow, green, cyan, blue
样式
选中状态
checkbox
1 2 3 4 5 6 7 8 9 10 {% checkbox 纯文本测试 %} {% checkbox checked, 支持简单的 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 2 3 4 5 6 7 {% radio 纯文本测试 %} {% radio checked, 支持简单的 markdown 语法 %} {% radio red, 支持自定义颜色 %} {% radio green, 绿色 %} {% radio yellow, 黄色 %} {% radio cyan, 青色 %} {% radio blue, 蓝色 %}
This is my website, click the button
JerryC
JerryC
1 {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {% 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/留空
文内按钮
1 2 3 4 5 This is my website, click the button {% btn 'http://www.jerryc.me',JerryC %} This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right %} This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,,outline %} This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline %} This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}
独占一行的按钮
1 2 3 {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block center larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block right outline larger %}
一行多个实心按钮
1 2 3 4 5 6 7 {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}
一行多个空心按钮
1 2 3 4 5 6 7 8 9 <div class="btn-center"> {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline blue larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline pink larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline red larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline purple larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline orange larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline green larger %} </div>
1 2 3 4 {% btns 样式参数 %} {% cell 标题, 链接, 图片或者图标 %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %}
样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。
圆角样式
默认为方形
布局方式
默认为自动宽度，适合视野内只有一两个的情况。
参数
含义
wide
宽一点的按钮
fill
填充布局，自动铺满至少一行，多了会换行。
center
居中，按钮之间是固定间距。
around
居中分散
grid2
等宽最多2列，屏幕变窄会适当减少列数。
grid3
等宽最多3列，屏幕变窄会适当减少列数。
grid4
等宽最多4列，屏幕变窄会适当减少列数。
grid5
等宽最多5列，屏幕变窄会适当减少列数。
增加文字样式
可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>
第一排
1 2 3 4 5 6 7 {% btns circle grid5 %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %} {% endbtns %}
第二排
1 2 3 4 {% btns rounded grid5 %} {% cell 下载源码, /, fa fa-download %} {% cell 查看文档, /, fa fa-download %} {% endbtns %}
第三排
1 2 3 4 5 6 7 8 9 10 11 12 13 14 {% btns circle center grid5 %} <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fa fa-apple'></i> <b>心率管家</b> {% p red, 专业版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'> </a> <a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fa fa-apple'></i> <b>心率管家</b> {% p green, 免费版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'> </a> {% endbtns %}
哪个英文字母最酷？ 查看答案
因为西装裤(C装酷)
门里站着一个人? Click
闪
inline 在文本里面添加按钮隐藏内容，只限文字
( content不能包含英文逗号，可用‚)
1 {% hideInline content,display,bg,color %}
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
1 2 3 哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %} 门里站着一个人? {% hideInline 闪 %}
block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等
( display 不能包含英文逗号，可用‚)
1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
1 2 3 4 5 6 7 8 9 10 11 12 {% hideBlock 查看答案 %} {% gallery %}         {% endgallery %} {% endhideBlock %}
这里面写内容，支持的语法格式有限，请尽量不要 写太过复杂的东西。
这里面写内容，支持的语法格式有限，请尽量不要 写太过复杂的东西。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 {% tabs tab-id %} <!-- tab 标签名 -->  <!-- endtab --> <!-- tab 标签名 --> 这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。 <!-- endtab --> {% endtabs %}
tab-id
必填，如果一个页面有多个 tabs 时，tab-id 不能重复。
tab-name
标签文本。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 {% tabs tab-id %} <!-- tab tab-name -->  <!-- endtab --> <!-- tab tab-name --> 这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。 <!-- endtab --> {% endtabs %}
查看图片测试
查看默认打开的折叠框
查看代码测试
查看列表测试
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha
1 2 3 4 5 {% folding 参数（可选）, 标题 %}  {% endfolding %}
参数位置可以填写颜色和状态，多个参数用空格隔开。
颜色
1 blue, cyan, green, yellow, red
状态
状态填写 open 代表默认打开。
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 34 35 36 37 38 {% folding 查看图片测试 %}  {% endfolding %} {% folding cyan open, 查看默认打开的折叠框 %} 这是一个默认打开的折叠框。 {% endfolding %} {% folding green, 查看代码测试 %} {% endfolding %} {% folding yellow, 查看列表测试 %} - haha - hehe {% endfolding %} {% folding red, 查看嵌套测试 %} {% folding blue, 查看嵌套测试2 %} {% folding 查看嵌套测试3 %} hahaha <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span> {% endfolding %} {% endfolding %} {% endfolding %} {% tabs tab-id %}
一行一个图片
一行多个图片（不换行）
多行多个图片（每行2～8个图片）
1 2 3 4 {% fancybox 参数, 列数 %}   {% endfancybox %}
对齐方向
缩放
列数
逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。
一行一个图片
1 2 3 {% fancybox %}  {% endfancybox %}
一行多个图片（不换行）
1 2 3 4 5 {% fancybox %}    {% endfancybox %}
多行多个图片（每行2～8个图片）
1 2 3 4 5 6 7 8 9 10 {% fancybox stretch, 4 %}         {% endfancybox %}
Your browser does not support the audio tag. 1 {% audio https://github.com/xaoxuu/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
100%宽度
Your browser does not support the video tag.
50%宽度
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
25%宽度
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
Your browser does not support the video tag.
单个视频
多个视频
1 2 3 4 5 {% videos 对齐方向, 列数 %} {% video 视频链接 %} {% video 视频链接 %} {% video 视频链接 %} {% endvideos %}
对齐方向
列数
逗号后面直接写列数，支持 1 ～ 4 列。
100%宽度
1 {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
50%宽度
1 2 3 4 5 6 {% videos, 2 %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% endvideos %}
25%宽度
1 2 3 4 5 6 7 8 9 10 {% videos, 4 %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %} {% endvideos %}
E ( A ) = ∑ j = 1 v s 1 j + s 2 j + . . . . s m j s I ( s 1 j + s 2 j + . . . . s m j ) E(A)=\sum_{j=1}^v \frac {s_{1j}+s_{2j}+....s_{mj}} sI(s_{1j}+s_{2j}+....s_{mj})
E ( A ) = j = 1 ∑ v s s 1 j + s 2 j + . . . . s m j I ( s 1 j + s 2 j + . . . . s m j )
I ( s 1 j + s 2 j + . . . . s m j ) = − ∑ i = 1 m p i j l o g ( p i j ) p i j = s i j ∣ s j ∣ I(s_{1j}+s_{2j}+....s_{mj})=-\sum_{i=1}^mp_{ij}log(p_{ij})\\p_{ij}=\frac {s_{ij}} {|s_j|}
I ( s 1 j + s 2 j + . . . . s m j ) = − i = 1 ∑ m p i j l o g ( p i j ) p i j = ∣ s j ∣ s i j
采用的是KaTeX 渲染公式，使用时需在文章顶部加入katex: true，支持右键直接复制为latex格式公式
1 2 3 $$E(A)=\sum_{j=1}^v \frac {s_{1j}+s_{2j}+....s_{mj}} sI(s_{1j}+s_{2j}+....s_{mj})$$ $$I(s_{1j}+s_{2j}+....s_{mj})=-\sum_{i=1}^mp_{ij}log(p_{ij})\\p_{ij}=\frac {s_{ij}} {|s_j|}$$
butterfly主题无需安装插件直接兼容Markdown的emojione表情
因为是mkdocs的语法，并不是全部支持，这里只列出部分参考，该表格为emojione-3.1.2(pymdownx-4.0集成)的全名和短名映射表，共2666个，具体参考的是我的emojione全名短名映射表
全名
短名
100
💯
1234
🔢
8ball
🎱
a
🅰️
ab
🆎
abc
🔤
abcd
🔡
accept
🉑
kissing_smiling_eyes
😙
smile
😄
slightly_smiling_face
🙂
smile_cat
😸
pig
🐷
bowing_woman
🙇♀
aerial_tramway
🚡
airplane
✈️
small_airplane
🛩
dash
💨
blonde_woman
👱♀
alarm_clock
⏰
alembic
⚗️
alien
👽
ambulance
🚑
amphora
🏺
anchor
⚓️
jack_o_lantern
🎃
zap
⚡️
baby
👶
注意：如果使用 On parent hover 需要向父级元素添加 class 名 faa-parent animated-hover。其余两个不需要。另外可以通过添加faa-fast动画加速，faa-slow动画减速！！！
xaoxuu
