前言

我也是最近刚了解到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 %}

效果展示：

内容1

内容2

内容2.1

内容2.2

时间轴标签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 %}

效果展示：

2020

09

计算机小萌新

2021

03

尝试上云

09

第一次搭建个人博客

相册图库gallery

代码展示：

1
2
3
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/wallpaper' https://s2.loli.net/2022/06/26/N3stJIp175mnhKe.png %}
</div>

效果展示：

Group Image Gallery
壁纸

收藏的一些壁纸

相册gallery

代码展示：

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![Fze9jchtnyJXMHN.jpg](https://s2.loli.net/2022/06/26/kw5De2IHR4cQYXT.jpg)
![ryLVePaqkYm4TEK.jpg](https://s2.loli.net/2022/06/26/wIS4bgoJQYr3hxp.jpg)
![gEy5Zc1Ai6VuO4N.jpg](https://s2.loli.net/2022/06/26/pIJHtL8fbWOusBi.jpg)
![d6QHbytlSYO4FBG.jpg](https://s2.loli.net/2022/06/26/olsmebJWQnOZwDP.jpg)
![6nepIJ1xTgufatZ.jpg](https://s2.loli.net/2022/06/26/gQwUofn84JK2TFp.jpg)
![E7Jvr4eIPwUNmzq.jpg](https://s2.loli.net/2022/06/26/NPMGj9itsuAFdEy.jpg)
![mh19anwBSWIkGlH.jpg](https://s2.loli.net/2022/06/26/jGwW4iQOe5K3ZHq.jpg)
![2tu9JC8ewpBFagv.jpg](https://s2.loli.net/2022/06/26/QFhrtNowgmvejKb.jpg)
{% endgallery %}

效果展示：

[{"url":"https://s2.loli.net/2022/06/26/kw5De2IHR4cQYXT.jpg","alt":"Fze9jchtnyJXMHN.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/wIS4bgoJQYr3hxp.jpg","alt":"ryLVePaqkYm4TEK.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/pIJHtL8fbWOusBi.jpg","alt":"gEy5Zc1Ai6VuO4N.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/olsmebJWQnOZwDP.jpg","alt":"d6QHbytlSYO4FBG.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/gQwUofn84JK2TFp.jpg","alt":"6nepIJ1xTgufatZ.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/NPMGj9itsuAFdEy.jpg","alt":"E7Jvr4eIPwUNmzq.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/jGwW4iQOe5K3ZHq.jpg","alt":"mh19anwBSWIkGlH.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/QFhrtNowgmvejKb.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 %}
![Fze9jchtnyJXMHN.jpg](https://s2.loli.net/2022/06/26/kw5De2IHR4cQYXT.jpg)
![ryLVePaqkYm4TEK.jpg](https://s2.loli.net/2022/06/26/wIS4bgoJQYr3hxp.jpg)
![gEy5Zc1Ai6VuO4N.jpg](https://s2.loli.net/2022/06/26/pIJHtL8fbWOusBi.jpg)
![d6QHbytlSYO4FBG.jpg](https://s2.loli.net/2022/06/26/olsmebJWQnOZwDP.jpg)
![6nepIJ1xTgufatZ.jpg](https://s2.loli.net/2022/06/26/gQwUofn84JK2TFp.jpg)
![E7Jvr4eIPwUNmzq.jpg](https://s2.loli.net/2022/06/26/NPMGj9itsuAFdEy.jpg)
![mh19anwBSWIkGlH.jpg](https://s2.loli.net/2022/06/26/jGwW4iQOe5K3ZHq.jpg)
![2tu9JC8ewpBFagv.jpg](https://s2.loli.net/2022/06/26/QFhrtNowgmvejKb.jpg)
{% endgallery %}
{% endhideBlock %}

效果展示：

[{"url":"https://s2.loli.net/2022/06/26/kw5De2IHR4cQYXT.jpg","alt":"Fze9jchtnyJXMHN.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/wIS4bgoJQYr3hxp.jpg","alt":"ryLVePaqkYm4TEK.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/pIJHtL8fbWOusBi.jpg","alt":"gEy5Zc1Ai6VuO4N.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/olsmebJWQnOZwDP.jpg","alt":"d6QHbytlSYO4FBG.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/gQwUofn84JK2TFp.jpg","alt":"6nepIJ1xTgufatZ.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/NPMGj9itsuAFdEy.jpg","alt":"E7Jvr4eIPwUNmzq.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/jGwW4iQOe5K3ZHq.jpg","alt":"mh19anwBSWIkGlH.jpg","title":""},{"url":"https://s2.loli.net/2022/06/26/QFhrtNowgmvejKb.jpg","alt":"2tu9JC8ewpBFagv.jpg","title":""}]

折叠框hideToggle

代码展示：

1
2
3
4
5
6
{% hideToggle 我的博客信息 %}
- 博客名称: 葡萄
- 博客链接: https://blog.pushihao.com
- 博客头像: https://blog.pushihao.com/img/avatar.jpeg
- 博客描述: 没事写两句
{% 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://s2.loli.net/2022/06/26/jfdBkAeuPhwq5Fy.jpg 70px %}

效果展示：

计算机学生专属发型

代码展示：

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: https://img.pushihao.com/avatar.png
      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: 百度
      link: https://www.baidu.com
      avatar: https://www.baidu.com/favicon.ico
      descr: 中国最大的搜索平台
    - name: Github
      link: https://www.github.com
      avatar: /img/icon/github.ico
      descr: 全球最大的同性交友网站
{% endflink %}

效果展示：

友情链接
那些值得关注的网站~
披萨盒
披萨盒
热水比冷水更快结冰
Hexo
Hexo
快速、简单且强大的博客框架
常用网站
日常学习必用~
百度
百度
中国最大的搜索平台
Github
Github
全球最大的同性交友网站

引用标签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
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

语法：

1
2
3
{% mermaid %}
内容
{% endmermaid %}

后记

这么多语法参数也很琐碎，不可能看一遍就全记下来，随时用随时翻看即可。