Butterfly标签外挂指南
总结Butterfly主题博客常用的标签外挂使用方法，一来方便参考使用，二来加深印象。除了官方出的标签外挂使用方法，还有其他升级版的标签外挂用法，非常的Nice！
标签外挂是Hexo独有的功能，在标准的Markdown中是不可用的
Note
note标签在主题配置文件中有一些配置可以修改
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0配置中icons和light_bg_offset只对方法一生效
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
[class] : 可选参数，标识的类型，不同类型有不同配色。
(default / primary / success / info / warning / danger)
[no-icon] : 可选参数，表示不显示图标
[style] : 可选参数，可以覆盖配置中的style
(simple / modern / flat / disabled)simple
默认 提示块标签
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] : 可选参数，可以覆盖配置中的style
(simple / modern / flat / disabled)你是刷 Visa 还是 UnionPay
2021年快到了….
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
Gallery
相册图库暂时用不上，仅列出用法，没有示例，可以参考官方教程：Gallery相册图库
相册图库
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
name : 图库名称
description : 图库描述
link : 相册的地址
img-url : 图库封面地址相册
{% gallery %}
markdown 图片格式
{% endgallery %}图片格式是用markdown格式插入的图片链接。
Tag-hide
tag-hide内的标签外挂content内不建议有h1-h6标题，因为Toc会把隐藏的标题内容也显示出来，可能会出现Toc滚动异常
把一些文字、内容隐藏起来，需要点击按钮显示。
inline在文本里面添加按钮隐藏内容，只限文字。（content不能包含英文逗号，可用‚）
{% hideInline content, [display], [bg], [color] %}
content : 文本内容
[display] : 按钮显示的文字
[bg] : 按钮背景颜色
[color] : 按钮文字颜色示例：
{% hideInline 没什么, 看看隐藏了什么 %}block独立的block隐藏内容，可以隐藏很多内容，包括图片、代码块等。(display不能包含英文逗号，可用‚)
{% hideBlock [display], [bg], [color] %}
content
{% endhideBlock %}
content : 文本内容
[display] : 按钮显示的文字
[bg] : 按钮背景颜色
[color] : 按钮文字颜色示例：
{% hideBlock 一张图片 %}
{% inlineImg https://source.unsplash.com/random 600px %}
{% endhideBlock %}如果需要展示的内容很多，可以隐藏在收缩框中，需要时再展开。(display不能包含英文逗号，可用‚)
{% hideToggle [display], [bg], [color] %}
content
{% endhideToggle %}示例：
{% hideToggle 逻辑回归, #FF7242, #fff %}
采用Logit模型对新型教学的有效性进行探究。确定因变量为成绩是否提高（GRADE），取值范围是离散值0和1；自变量有个性化教学系统（PSI）、平均成绩（GPA）、测试成绩（TUCE）。
那么Logit模型可以写为：
$$
L_i=ln(\frac{P_i}{1-P_i})=\beta_1+\beta_2PSI+\beta_3GPA+\beta_4TUCE
$$
利用Python中statsmodels库的Logit，采用最大似然法估计参数。结果如下：
首先，从上述结果的LR统计量（0.0015<0.05）可以看出模型是显著的。其次，从参数的结果来看，PSI和GPA两个解释变量在5%的水平下是显著的，并且呈现正相关；而TUCE的影响不显著。评判新型教学方法对学生成绩的提升效应，依据Logit模型，对PSI的系数2.379取指数e，得到的OR值为10.79，这个值表明了PSI变量对学生成绩提高（GRADE）的效应大小。说明在其他条件不变的情况下，接受新型教学方法的学生成绩得到提高的可能性比没有接受新教学方法的学生高出了10.79倍。
相关代码：
```python
logit = sm.Logit(df['GRADE'], df.iloc[:, 2:]) # 建立Logit模型
res = logit.fit() # 模型拟合
print(res.summary()) # 输出拟合结果
```
{% endhideToggle %}逻辑回归
采用Logit模型对新型教学的有效性进行探究。确定因变量为成绩是否提高（GRADE），取值范围是离散值0和1；自变量有个性化教学系统（PSI）、平均成绩（GPA）、测试成绩（TUCE）。
那么Logit模型可以写为：
利用Python中statsmodels库的Logit，采用最大似然法估计参数。结果如下：
首先，从上述结果的LR统计量（0.0015<0.05）可以看出模型是显著的。其次，从参数的结果来看，PSI和GPA两个解释变量在5%的水平下是显著的，并且呈现正相关；而TUCE的影响不显著。评判新型教学方法对学生成绩的提升效应，依据Logit模型，对PSI的系数2.379取指数e，得到的OR值为10.79，这个值表明了PSI变量对学生成绩提高（GRADE）的效应大小。说明在其他条件不变的情况下，接受新型教学方法的学生成绩得到提高的可能性比没有接受新教学方法的学生高出了10.79倍。
相关代码：
logit = sm.Logit(df['GRADE'], df.iloc[:, 2:]) # 建立Logit模型
res = logit.fit() # 模型拟合
print(res.summary()) # 输出拟合结果Mermaid
mermaid标签不允许嵌套一些隐藏属性的标签外挂，例如tag-hide和tabs内的标签外挂，否则会导致mermaid图示无法正常显示。
并且不要压缩HTML代码。
使用mermaid绘制流程图、甘特图等
主题配置文件如下：
mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme: default用法：
{% mermaid %}
内容
{% endmermaid %}示例：
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Tabs
使用方法：
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
Unique name : 唯一的名称作为Tab的标签，并且没有逗号。只需要在当前页面中是唯一的
这个名称会被用作#id的前缀作为每个Tab的索引值。
如果名称中有空格，生成的#id所有的空格会被替换为-。
[index] : 可选参数，表示默认激活的Tab索引。如果没有指定，默认是第一个Tab(1)被选择。
如果索引是-1，则没有Tab被选择。
[Tab caption] : 当前Tab的标题。
如果没有指定标题，则使用带有标签索引后缀的唯一名称(Unique name)作为标签的标题。
如果没有指定标题，但指定了图标，标题将为空。
[@icon] : 可选参数，FontAwesome图标名示例：
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->
<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->
<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}tab名字为第一个Tab
只有图标 没有Tab名字
名字+icon
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/留空
示例：
{% btn 'https://butterfly.js.org/', Butterfly, far fa-hand-point-right, blue center larger %}InlineImg
主题中的图片都是默认以块级元素显示，如果想以内联元素显示，可以使用这个标签外挂。
{% inlineImg [src] [height] %}
[src] : 图片链接
[height] ： 图片高度限制【可选】示例：
{% inlineImg https://source.unsplash.com/random 600px %}
Label
给文字设置高亮显示。
{% label text [color] %}
text : 需要高亮的文字
[color] : 可选参数，背景颜色，默认为default
(default / blue / pink / red / purple / orange / green)示例：
{% label 爱国 blue %}{% label 敬业 pink %}{%label 诚信 purple %}{% label 友善 green %}以下的标签外挂是从Hexo官方文档中总结。参考：tag-plugins
BlockQuote
文本的引用
用法：
{% blockquote [author] [link] [source_link_title] %} content {% endblockquote %} [author]: 可选参数，作者 [link]: 可选参数，链接 [source_link_title]: 可选参数，链接的标题示例：
{% blockquote Akilar https://akilar.top/posts/615e2dec/ Tag Plugins Plus%} 引用内容。。。 {% endblockquote %}标签外挂效果：
引用内容。。。
嵌套引用
markdown效果：
引用内容。。。
嵌套引用
Akilar——Tag Plugins Plus
Akilar——Tag Plugins Plus
对比：
markdown可以使用
>来让一段内容作为引用，但我所知道的好像用法仅此而已，非常简单。而这个标签外挂则有更棒的效果，在外观上区别不大，但是用这个标签外挂可以设置引用的内容的作者、链接，这样应该说更符合需求了。也可能会说引用直接在末尾手动加上作者、链接就行了，这个也确实可以，总体来看并不麻烦，感觉两种方法都还行，但是外挂标签我觉得更灵活一些。
CodeBlock
添加代码片段的有用功能
用法：
{% codeblock [title] [lang:language] [url] [link text] [additional options] %} code snippet {% endcodeblock %} [title]: 可选参数，代码块的标题 [lang:language]: 可选参数，代码的语言 [url]: 可选参数，代码指向的链接 [link text]: 可选参数，链接的文本指示 [additional options]: 可选参数，额外的配置选项额外的配置选项包含如下：
| 选项 | 描述 | 默认 |
|---|---|---|
| line_number | 是否显示行编号 | true |
| highlight | 是否使代码高亮显示 | true |
| first_line | 指定第一行的编号 | 1 |
| mark | 指定的行高亮显示，用,分隔每个值，用-指定范围行 |
|
| wrap | 将代码块嵌入到< table >中 | true |
示例：
{% codeblock Bar() lang:python https://pyecharts.org/#/zh-cn/rectangular_charts?id=bar%ef%bc%9a%e6%9f%b1%e7%8a%b6%e5%9b%be%e6%9d%a1%e5%bd%a2%e5%9b%be class pyecharts.charts.Bar(RectChart) first_line:10 %} class Bar( #初始化配置项，参考 `global_options.InitOpts` init_opts: opts.InitOpts = opts.InitOpts() ) {% endcodeblock %}标签外挂效果：
class Bar( #初始化配置项，参考 `global_options.InitOpts` init_opts: opts.InitOpts = opts.InitOpts() )markdown效果：
class Bar( #初始化配置项，参考 `global_options.InitOpts` init_opts: opts.InitOpts = opts.InitOpts() )对比：
markdown本身可以使用```来添加代码块，在其后指定语言实现语法高亮，而这个标签外挂除了这些特性，还能更好的设置代码块的行号以及代码高亮设置，而且还有代码块出处链接和标题可以设置，这些都是其长处，但是实际使用的时候也会发现不方便的地方，即上述例子的代码块中第12行初始化配置项应当是注释，但是放到markdown中作为标签外挂时，会被直接识别为一级标题，会带来一些麻烦，同样其他语言也是，本想展示代码，但可能会直接执行其中的一些代码，违背了使用的初衷。所以最后还是建议看情况使用。
