前言 butterfly3.0 的更新note有冲突这里就不展示啦！butterfly主题添加Volantis主题标签
参考： 官方文档
文本文字 彩色文字： 在一段话中方便插入各种颜色的标签，包括：红色 、黄色 、绿色 、青色 、蓝色 、灰色 。
超大文字 文档「开始」页面中的标题部分就是超大文字。
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 %}
tab容器
这里这里面写内容，支持的语法格式有限，请尽量不要 写太过复杂的东西。
1 2 3 4 5 6 7 8 {% tabs tab-id %} <!-- tab 标签名 --> tab容器所展示的内容 <!-- endtab --> <!-- tab 标签名 --> 这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。 <!-- endtab --> {% endtabs %}
tab-id
tab-name
标签文本。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 {% tabs tab-id %} <!-- tab tab-name --> {% note success %} 这里这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。 {% endnote %} <!-- endtab --> <!-- tab tab-name --> tab容器所展示的内容 <!-- endtab --> {% endtabs %}
复选框
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, 蓝色 %}
—以上为常用—
Folding折叠容器 查看图片测试
查看默认打开的折叠框
查看代码测试
查看列表测试
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha
1 2 3 {% 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, 查看代码测试 %} hello world! {% endfolding %} {% folding yellow, 查看列表测试 %} - hello - world {% endfolding %} {% folding red, 查看嵌套测试 %} {% folding blue, 查看嵌套测试2 %} {% folding 查看嵌套测试3 %} hahaha <span><img src='https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/2.jpg' style='height:24px'></span> {% endfolding %} {% endfolding %} {% endfolding %} {% tabs tab-id %}
按钮
1 2 3 4 {% btns 样式参数 %} {% cell 标题, 链接, 图片或者图标 %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %}
样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。
默认为方形
布局方式
默认为自动宽度，适合视野内只有一两个的情况。
参数
含义
wide
宽一点的按钮
fill
填充布局，自动铺满至少一行，多了会换行。
center
居中，按钮之间是固定间距。
around
居中分散
grid2
等宽最多2列，屏幕变窄会适当减少列数。
grid3
等宽最多3列，屏幕变窄会适当减少列数。
grid4
等宽最多4列，屏幕变窄会适当减少列数。
grid5
等宽最多5列，屏幕变窄会适当减少列数。
增加文字样式
可以在容器内增加 标题 描述文字
第一排
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 %}
Fancybox组图 一行一个图片
一行多个图片（不换行）
多行多个图片（每行2～8个图片）
1 2 3 {% 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. Your browser does not support the audio tag. Your browser does not support the audio tag. 视频 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)=\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|}$$
采用的是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|}$$
emoji表情 butterfly主题无需安装插件直接兼容Markdown的emojione表情
因为是mkdocs的语法，并不是全部支持，这里只列出部分参考，该表格为emojione-3.1.2(pymdownx-4.0集成)的全名和短名映射表，共2666个
全名
短名
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
👶
xaoxuu
