披萨盒的赛博日志

披萨盒的博客

马上订阅 披萨盒的赛博日志 RSS 更新: https://blog.pushihao.com/atom.xml

Butterfly常用标签外挂

2022年6月24日 22:51

前言

我也是最近刚了解到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://img.pushihao.com/typora/202505281847210.png %}
</div>

效果展示：

Group Image Gallery
壁纸

收藏的一些壁纸

相册gallery

代码展示：

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![Fze9jchtnyJXMHN.jpg](https://img.pushihao.com/typora/202505281852188.jpg)...
剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章