回到文章目录

Hexo 标签外挂仅适用于 Hexo 框架内，在其他应用、平台均不适用，如果您没有使用 Hexo 标签外挂的需求请绕道。另外，不要在任何标签外挂中使用标题，不要在标签外挂的声明中使用英文逗号。

本文参考官方文档 Butterfly 安裝文檔(三) 主題配置-1，更多标签外挂相关内容见文档。本文仅介绍几种比较常用的。

Note 提示框

Note 提示框支持所有行级语法，不支持块级语法。

我是 Note 提示框

配置文件

配置位于 _config.butterfly.yml ，实际上通常只修改 note.style 。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note (Bootstrap Callout)
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: flat                                                # 默认风格
  icons: true
  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

默认选项

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
  • class：可选，标签类型，支持 default（跳转）、primary（重点）、success（成功）、info（提示）、warning（警告）、danger（错误），默认使用无类型（与 default 不同）。
  • no-icon：可选，去除图标，默认使用与 class 对应图标。
  • style：可选，支持 simple、modern、flat、disabled，默认与配置文件一致。

演示用风格为 flat。

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
{% note %}
成功提示 Success Note
{% endnote %}

{% note default %}
跳转提示 Linked Note
{% endnote %}

{% note primary %}
重点提示 Primary Note
{% endnote %}

{% note success %}
成功提示 Success Note
{% endnote %}

{% note info %}
信息提示 Infomation Note
{% endnote %}

{% note warning %}
警告提示 Warning Note
{% endnote %}

{% note danger %}
错误提示 Error Note
{% endnote %}

演示用风格为 flat。

默认提示 Success Note

跳转提示 Linked Note

重点提示 Primary Note

成功提示 Success Note

信息提示 Infomation Note

警告提示 Warning Note

错误提示 Error Note

演示用类型为 info。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% note info simple %}
简约风标签 Simple Style
{% endnote %}

{% note info modern %}
现代风标签 Modern Style
{% endnote %}

{% note info flat %}
平滑风标签 Flat Style
{% endnote %}

{% note info disabled %}
无风格标签 Disabled Style
{% endnote %}

演示用类型为 info。

简约风标签 Simple Style

现代风标签 Modern Style

平滑风标签 Flat Style

无风格标签 Disabled Style

演示用风格为 flat。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% note default no-icon %}
跳转提示 Linked Note
{% endnote %}

{% note primary no-icon %}
重点提示 Primary Note
{% endnote %}

{% note success no-icon %}
成功提示 Success Note
{% endnote %}

{% note info no-icon %}
信息提示 Infomation Note
{% endnote %}

{% note warning no-icon %}
警告提示 Warning Note
{% endnote %}

{% note danger no-icon %}
错误提示 Error Note
{% endnote %}

演示用风格为 flat。

跳转提示 Linked Note

重点提示 Primary Note

成功提示 Success Note

信息提示 Infomation Note

警告提示 Warning Note

错误提示 Error Note

自定义选项

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
  • color：可选，颜色，支持默认、blue、pink、red、purple、orange、green。
  • icon：可选，自定义图标，仅支持 fontawesome 图标，这是 Font Awesome 官网。
  • style：可选，见默认选项。
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
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' simple %}
暑假快结束了....
{% endnote %}

{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' simple %}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' simple %}
电量不足...
{% endnote %}

{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

暑假快结束了…

小心开车 安全至上

这是三片呢？还是四片？

电量不足…

剪刀石头布

前端最讨厌的浏览器

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
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' flat %}
暑假快结束了....
{% endnote %}

{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' flat %}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' flat %}
电量不足...
{% endnote %}

{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

暑假快结束了…

小心开车 安全至上

这是三片呢？还是四片？

电量不足…

剪刀石头布

前端最讨厌的浏览器

Hide Toggle 折叠栏

Hide Toggle 内支持任意语法嵌套。

猜猜这是啥！

我是 Hide Toggle，没见过吧。

1
2
3
{% hideToggle [title], [bg], [fg] %}
content
{% endhideToggle %}
  • title：折叠栏标题。
  • bg：栏头背景颜色，可以使用 # 颜色，默认 white。
  • fg：栏头字体颜色，可以使用 # 颜色，默认 black。
1
2
3
4
5
6
7
8
9
10
11
{% hideToggle Butterfly安装方法, white, black %}
在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}

Butterfly安装方法

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

Tabs 平行标签

Tabs 平行标签同样支持任意语法嵌套。

这篇文章其实已经大量用到了平行标签，比如说标题上的 折叠栏演示与折叠栏预览 。

平行标签可以大幅减少阅读篇幅，虽然它的语法对写作者不是很友好。

1
2
3
4
5
{% tabs [TabGroupName] %}
<!-- tab [TabName] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  • TabGroupName：可选，标签组名称。
  • TabName：可选，子标签名称，默认继承自标签组名称。
  • icon：可选，自定义图标，仅支持 fontawesome 图标，这是 Font Awesome 官网。

如果子标签未命名，其显示继承自标签组命名。

1
2
3
4
5
6
7
8
9
10
11
{% tabs 标签 %}
<!-- tab -->
这是一个标签。
<!-- endtab -->
<!-- tab -->
这又是一个标签。
<!-- endtab -->
<!-- tab 子标签 -->
这个标签有自己的名字。
<!-- endtab -->
{% endtabs %}

如果子标签命名，标签组命名将不显示，因此 tabs 和 tab 通常只需设置一个有名。

1
2
3
4
5
6
7
8
{% tabs 演示 %}
<!-- tab 平行标签演示 -->
这里是代码。
<!-- endtab -->
<!-- tab 平行标签预览 -->
这里是效果。
<!-- endtab -->
{% endtabs %}

如果子标签未命名，其显示继承自标签组命名。

这是一个标签。

这又是一个标签。

这个标签有自己的名字。

如果子标签命名，标签组命名将不显示。

这里是代码。

这里是效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
只有 tab 命名
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
只有图标
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
既有 tab 命名，又有图标
<!-- endtab -->
{% endtabs %}

只有 tab 命名

只有图标

既有 tab 命名，又有图标

Mermaid

在上一个章节 Markdown 学习笔记(三) - Mermaid 绘图 我们已经介绍了 Mermaid 的基本使用，但是 Hexo 虽然同样支持 Mermaid，但对其的支持不太一样。

将我们上个章节学到的：

1
2
3
``` mermaid
% code
```

替换为：

1
2
3
{% mermaid %}
% code
{% endmermaid %}

即可。

虽然有一说一，我也觉得这样做挺愚蠢的，但是我也没有找到相关插件可以直接解决这个问题。

Timeline 时间线

去你的分类和归档页面看看，那个就是时间线。

时间线同样支持元素嵌套，但是可能会变得非常丑。

1
2
3
4
5
6
7
8
{% timeline [title], [color] %}
<!-- timeline title -->
event
<!-- endtimeline -->
<!-- timeline title -->
event
<!-- endtimeline -->
{% endtimeline %}
  • title：可选，标题。
  • color：可选，颜色，支持默认、blue 、pink、red、purple、orange、green。

相邻的时间线会自动拼接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% timeline 2022, green %}

<!-- timeline 12-06 -->
第一次了解到 Markdown，并逐渐开始接触。
<!-- endtimeline -->

{% endtimeline %}

{% timeline 2023, blue %}

<!-- timeline 07-28 -->
系列 Markdown 学习笔记 开始发布于我的个人博客。
<!-- endtimeline -->

<!-- timeline 08-06 -->
文章 Markdown 学习笔记(四) - Hexo 标签外挂 发布于我的个人博客。
<!-- endtimeline -->

{% endtimeline %}

哎呦，效果不错。

2022

12-06

第一次了解到 Markdown，并逐渐开始接触。

2023

07-28

系列 Markdown 学习笔记 开始发布于我的个人博客。

08-06

文章 Markdown 学习笔记(四) - Hexo 标签外挂 发布于我的个人博客。