前言
我也是最近刚了解到Hexo的标签外挂，同时也觉得他很方便。于是想写一篇笔记记录一下它的基本语法，看了一些网上的教程，结果hexo g的时候控制台一阵爆红。果然，看教程还是看官方文档比较靠谱。
本文参考：標籤外掛（Tag Plugins）
什么是标签外挂？
标签外挂也叫外挂标签，我的理解就是Hexo对于markdown的扩展语法（其实就是通过CSS代码修改文章特定语法的文字的样式），它是Hexo博客框架所独有的。通过使用标签外挂，可以让markdown语法具备更强的表达能力。一般不同的主题或者CSS样式提供的标签外挂语法也是不一样的。我这里介绍的主要是Butterfly主题所提供的标签外挂语法。
常用标签外挂语法
分区标签tabs
代码展示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {% tabs Tags %}
<!-- tab 标题1 -->
内容1
<!-- endtab -->
<!-- tab 标题2 -->
内容2
{% tabs Tags %}
<!-- tab 标题2.1 -->
内容2.1
<!-- endtab -->
<!-- tab 标题2.2 -->
内容2.2
<!-- endtab -->
{% endtabs %}
<!-- endtab -->
{% endtabs %}
|
效果展示：
时间轴标签timeline
代码展示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| {% timeline 2020, green %}
<!-- timeline 09 -->
计算机小萌新
<!-- endtimeline -->
{% endtimeline %}
{% timeline 2021, green %}
<!-- timeline 03 -->
尝试上云
<!-- endtimeline -->
<!-- timeline 09 -->
第一次搭建个人博客
<!-- endtimeline -->
{% endtimeline %}
|
效果展示：
相册图库gallery
代码展示：
1
2
3
| <div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/wallpaper' https://img.pushihao.com/typora/202505281847210.png %}
</div>
|
效果展示：
壁纸
收藏的一些壁纸
相册gallery
代码展示：
1
2
3
4
5
6
7
8
9
10
| {% gallery %}
{% endgallery %}
|
效果展示：
[{"url":"https://img.pushihao.com/typora/202505281852188.jpg","alt":"Fze9jchtnyJXMHN.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290840741.jpg","alt":"ryLVePaqkYm4TEK.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290840937.jpg","alt":"gEy5Zc1Ai6VuO4N.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290840435.jpg","alt":"d6QHbytlSYO4FBG.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839102.jpg","alt":"6nepIJ1xTgufatZ.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839657.jpg","alt":"E7Jvr4eIPwUNmzq.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839323.jpg","alt":"mh19anwBSWIkGlH.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839254.jpg","alt":"2tu9JC8ewpBFagv.jpg","title":""}]
标签隐藏标签
行内隐藏hideInline
代码展示：
1
| 门里站着一个人? {% hideInline 闪, 查看答案, orange, white %}
|
效果展示：
上辈子如果你是一种饮料，那一定是碳酸饮料 因为我一看见你就开心得冒泡呀
门里站着一个人? 闪
块隐藏hideBlock
代码展示：
1
2
3
4
5
6
7
8
9
10
11
12
| {% hideBlock 查看隐藏内容, green, white %}
{% gallery %}
{% endgallery %}
{% endhideBlock %}
|
效果展示：
[{"url":"https://img.pushihao.com/typora/202505281852188.jpg","alt":"Fze9jchtnyJXMHN.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290840741.jpg","alt":"ryLVePaqkYm4TEK.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290840937.jpg","alt":"gEy5Zc1Ai6VuO4N.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290840435.jpg","alt":"d6QHbytlSYO4FBG.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839102.jpg","alt":"6nepIJ1xTgufatZ.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839657.jpg","alt":"E7Jvr4eIPwUNmzq.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839323.jpg","alt":"mh19anwBSWIkGlH.jpg","title":""},{"url":"https://img.pushihao.com/typora/202505290839254.jpg","alt":"2tu9JC8ewpBFagv.jpg","title":""}]
折叠框hideToggle
代码展示：
1
2
3
4
5
6
| {% hideToggle 我的博客信息 %}
- 博客名称: 葡萄
- 博客链接: https://blog.pushihao.com
- 博客头像: https://blog.pushihao.com/img/avatar.webp
- 博客描述: 没事写两句
{% endhideToggle %}
|
效果展示：
我的博客信息
按钮标签btn
参数说明：
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
| 这是我的博客 {% btn https://blog.pushihao.com, 葡萄, far fa-hand-point-right, green %}
|
效果展示：
这是我的博客 葡萄
高亮文字标签label
代码展示：
1
2
3
| 对 {% label 潇潇暮雨洒江天 %}，一番{% label 洗清秋 blue %}。渐霜风凄紧，{% label 关河冷落 pink %}，{% label 残照当楼 red %}。是处红衰翠减，苒苒物华休。惟有长江水，无语东流。
{% label 不忍登高临远 purple %}，望故乡渺邈，归思难收。叹年来踪迹，{% label 何事苦淹留 orange %}？想佳人、{% label 妆楼颙望 green %}，误几回、天际识归舟。争知我，倚栏杆处，正恁凝愁！
|
效果展示：
对 潇潇暮雨洒江天，一番洗清秋。渐霜风凄紧，关河冷落，残照当楼。是处红衰翠减，苒苒物华休。惟有长江水，无语东流。
不忍登高临远，望故乡渺邈，归思难收。叹年来踪迹，何事苦淹留？想佳人、妆楼颙望，误几回、天际识归舟。争知我，倚栏杆处，正恁凝愁！
行内图片标签inlineImg
代码展示：
1
| 计算机学生专属发型 {% inlineImg https://img.pushihao.com/typora/202505290843430.jpg 70px %}
|
效果展示：
计算机学生专属发型
链接卡片标签flink
代码展示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| {% flink %}
- class_name: 友情链接
class_desc: 那些值得关注的网站~
link_list:
- name: 披萨盒
link: https://blog.pushihao.com
avatar: /img/avatar.webp
descr: 热水比冷水更快结冰
- name: Hexo
link: https://hexo.io/zh-cn/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、简单且强大的博客框架
- class_name: 常用网站
class_desc: 日常学习必用~
link_list:
- name: Google
link: https://www.google.com
avatar: /img/icon/google.ico
descr: 搜索平台
- name: Github
link: https://www.github.com
avatar: /img/icon/github.ico
descr: 全球最大的同性交友网站
{% endflink %}
|
效果展示：
友情链接
那些值得关注的网站~
常用网站
日常学习必用~
引用标签note
参数说明：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| {% note [参数一] [参数二] %}
{% endnote %}
[参数一]:
- 不填
- default
- primary
- success
- info
- warning
- danger
- [颜色] + 图标 如: blue 'fas fa-bullhorn'
[参数二]:
- simple
- modern
- flat
- disable
- no-icon
|
代码展示：
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
| {% note simple %}
参数一不填，参数二simple效果
{% endnote %}
{% note default modern %}
参数一默认，参数二modern效果
{% endnote %}
{% note primary flat %}
参数一primary，参数二flat效果
{% endnote %}
{% note success disable %}
参数一success，参数二disable效果
{% endnote %}
{% note info no-icon %}
参数一info，参数二no-icon效果
{% endnote %}
{% note warning flat %}
参数一warning，参数二flat效果
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
参数一blue 'fas fa-bullhorn'，参数二flat效果
{% endnote %}
|
效果展示：
参数一不填，参数二simple效果
参数一默认，参数二modern效果
参数一primary，参数二flat效果
参数一success，参数二disable效果
参数一info，参数二no-icon效果
参数一warning，参数二flat效果
参数一blue ‘fas fa-bullhorn’，参数二flat效果
画图标签mermaid
通过使用mermaid标签可以绘制Flowchart（流程图）、Sequence Diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（饼状图）等，具体可以查看 memaid文档
在使用之前需要修改主题配置文件：
1
2
3
4
5
6
7
8
|
mermaid:
enable: true
theme:
light: default
dark: dark
|
语法：
1
2
3
| {% mermaid %}
内容
{% endmermaid %}
|
后记
这么多语法参数也很琐碎，不可能看一遍就全记下来，随时用随时翻看即可。
