tutorials website hexo markdown_demo markdown

主题外挂标签使用

gogongxt2023-01-232025-11-27

ref: https://butterfly.js.org/posts/ceeb73f/

gallery

把多张图片集中起来显示，排版好看一些

使用方法

{% gallery [button] %}
markdown 图片格式
{% endgallery %}

示例

![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)

![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)

![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]

tag hide

使用方法

{% hideInline content,display,bg,color %}

参数	解释
content	文本内容
display	【可选】按钮显示的文字
bg	【可选】按钮的背景颜色
color	【可选】按钮文字的颜色

示例

哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷？因为西装裤(C装酷)

门里站着一个人? 闪

分栏表格

使用方法

{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}

参数	解释
Unique name	tabs 区块标签的唯一名称，不包含逗号。将用于每个选项卡的 #id 前缀，并附加其索引号。若名称中有空格，生成 #id 时会将空格替换为短横线。仅对当前文章/页面的 URL 必须唯一！
[index]	【可选】活动选项卡的索引号。如果未指定，将选择第一个选项卡（1）。如果索引为 -1，则不会选择任何选项卡，类似于折叠内容。可选参数。
[Tab caption]	当前选项卡的标题。如果未指定标题，将使用唯一名称和选项卡索引后缀作为选项卡标题。如果未指定标题，但指定了图标，标题将为空。
[@icon]	【可选】FontAwesome 图标名称（全名，如 ‘fas fa-font’）。可以有或没有空格；例如 ‘Tab caption @icon’ 与 ‘Tab caption@icon’ 类似。

示例

{% tabs test1 %}

<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->

{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

添加按钮

使用方法

{% 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/留空

示例

This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

This is my website, click the button Butterfly

内嵌图像

使用方法

{% inlineImg [src] [height] %}

参数	解释
src	图片链接
height	【可选】图片高度限制

示例

你看她长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

你看她长得漂亮不

我觉得很漂亮

mermaid

使用方法

{% mermaid %}
内容
{% endmermaid %}

或者使用代码块包起来，如果需要支持代码块，首先要开启主题配置mermaid:code_wirte设置成true

另外默认这个会被代码高亮插件生成，所以我们需要对代码高亮插件取消mermaid

具体查看： https://github.com/jerryc127/hexo-theme-butterfly/issues/1479

因为我自己的插件也加入了exclude_languages支持，所以也可以一样设置

示例

{% 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

```mermaid
pie
title Key elements in Product X

"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```

pie
title Key elements in Product X

"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5

折叠

折叠主要依靠html元素和设置对应的css

外挂标签的源码位于hexo butterfly的 themes/butterfly/scripts/tag/hide.js

例如：

{% hideToggle "点击展开内容"%}
这是可展开的内容，用户可以点击按钮来查看。
{% endhideToggle %}

点击展开内容

这是可展开的内容，用户可以点击按钮来查看。