Butterfly 主题外挂标签的语法手册

本文主要内容来自 Jerry 的 Butterfly 主题文档和Akilar 的 Tag Plugins Plus 介绍，遵循 CC BY-NC-SA 4.0 许可协议。

外挂标签是Hexo独有的功能，既不是标准的Markdown格式，也不能在缺少支持的情况下转换为HTML语言。
以下的写法，只适用于Butterfly主题，用在其它主题上除了会报错外，不会有任何效果。

配置教程

设置 Butterfly 主题

修改 主题配置文件（_config.butterfly.yml）。

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: simple
  icons: false
  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

可选：使用 Tag Plugins Plus 插件

下载资源文件
将下载的Tag_Plugins.zip解压到主题所在文件夹进行覆盖，提示重复则选择替换。
修改 主题配置文件（_config.butterfly.yml）的inject配置项，添加CDN依赖项。由于issues写入timeline和site-card标签要用到jquery，请务必根据注释指示的版本决定是否添加。

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'">  #动画标签anima的依赖
  bottom:
    - <script defer src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
    # 自butterfly_v3.4.0+开始，主题基本实现去jquery化，需要自己添加引用，请读者根据版本自行决定是否添加这行引用。
    - <script defer src="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script>
    #数据集合标签issues的依赖

Butterfly 主题自带标签的语法手册

目前分栏（Tabs）标签暂未适配深色模式，在深色模式下阅读可能会带来不适。

Note 提示标签

Butterfly主题原生

方法一

{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

名称	用法
class	【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
no-icon	【可选】不显示 icon
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

{% note simple %}
默认 note 提示标签
{% endnote %}

{% note default simple %}
default note 提示标签
{% endnote %}

{% note primary simple %}
primary note 提示标签
{% endnote %}

{% note success simple %}
success note 提示标签
{% endnote %}

{% note info simple %}
info note 提示标签
{% endnote %}

{% note warning simple %}
warning note 提示标签
{% endnote %}

{% note danger simple %}
danger note 提示标签
{% endnote %}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% note modern %}
默认 note 提示标签
{% endnote %}

{% note default modern %}
default note 提示标签
{% endnote %}

{% note primary modern %}
primary note 提示标签
{% endnote %}

{% note success modern %}
success note 提示标签
{% endnote %}

{% note info modern %}
info note 提示标签
{% endnote %}

{% note warning modern %}
warning note 提示标签
{% endnote %}

{% note danger modern %}
danger note 提示标签
{% endnote %}

默认 note 提示标签

default note 提示标签

primary note 提示标签

success note 提示标签

info note 提示标签

warning note 提示标签

danger note 提示标签

{% note flat %}
默认 note 提示标签
{% endnote %}

{% note default flat %}
default note 提示标签
{% endnote %}

{% note primary flat %}
primary note 提示标签
{% endnote %}

{% note success flat %}
success note 提示标签
{% endnote %}

{% note info flat %}
info note 提示标签
{% endnote %}

{% note warning flat %}
warning note 提示标签
{% endnote %}

{% note danger flat %}
danger note 提示标签
{% endnote %}

默认 note 提示标签

default note 提示标签

primary note 提示标签

success note 提示标签

info note 提示标签

warning note 提示标签

danger note 提示标签

{% note disabled %}
默认 note 提示标签
{% endnote %}

{% note default disabled %}
default note 提示标签
{% endnote %}

{% note primary disabled %}
primary note 提示标签
{% endnote %}

{% note success disabled %}
success note 提示标签
{% endnote %}

{% note info disabled %}
info note 提示标签
{% endnote %}

{% note warning disabled %}
warning note 提示标签
{% endnote %}

{% note danger disabled %}
danger note 提示标签
{% endnote %}

默认 note 提示标签

default note 提示标签

primary note 提示标签

success note 提示标签

info note 提示标签

warning note 提示标签

danger note 提示标签

{% note no-icon %}
默认 note 提示标签
{% endnote %}

{% note default no-icon %}
default note 提示标签
{% endnote %}

{% note primary no-icon %}
primary note 提示标签
{% endnote %}

{% note success no-icon %}
success note 提示标签
{% endnote %}

{% note info no-icon %}
info note 提示标签
{% endnote %}

{% note warning no-icon %}
warning note 提示标签
{% endnote %}

{% note danger no-icon %}
danger note 提示标签
{% endnote %}

默认 note 提示标签

default note 提示标签

primary note 提示标签

success note 提示标签

info note 提示标签

warning note 提示标签

danger note 提示标签

方法二

支持 3.2.0 以上版本

语法：

{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

参数：

名称	用法
color	【可选】颜色 (default / blue / pink / red / purple / orange / green)
icon	【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

Tag Plugins Plus 插件

方法一

{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

方法二

{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

class 【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
（modern/simple/flat/disabled）

示例

{% note modern %}默认 提示块标签{% endnote %}

{% note default modern %}default 提示块标签{% endnote %}

{% note primary modern %}primary 提示块标签{% endnote %}

{% note success modern %}success 提示块标签{% endnote %}

{% note info modern %}info 提示块标签{% endnote %}

{% note warning modern %}warning 提示块标签{% endnote %}

{% note danger modern %}danger 提示块标签{% endnote %}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% note simple %}默认 提示块标签{% endnote %}

{% note default simple %}default 提示块标签{% endnote %}

{% note primary simple %}primary 提示块标签{% endnote %}

{% note success simple %}success 提示块标签{% endnote %}

{% note info simple %}info 提示块标签{% endnote %}

{% note warning simple %}warning 提示块标签{% endnote %}

{% note danger simple %}danger 提示块标签{% endnote %}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

{% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

{% note primary flat %}primary 提示块标签{% endnote %}

{% note success flat %}success 提示块标签{% endnote %}

{% note info flat %}info 提示块标签{% endnote %}

{% note warning flat %}warning 提示块标签{% endnote %}

{% note danger flat %}danger 提示块标签{% endnote %}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

Gallery 相册和图集

相册标签在主题2.0.0以上提供，合集标签在主题2.2.0以上提供。

Gallery相册标签可以展示一系列图片，并自动根据图片长度进行排版。而图集则是将组图作为一个合集展示。

语法

{% gallery %}
markdown 图片格式
{% endgallery %}

示例

{% gallery %}
![](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)
{% endgallery %}

[{"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":""}]

语法

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

参数

name：图库名字
description：图库描述
link：连接到对应相册的地址
img-url：图库封面的地址

例如：

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

tag-hide 隐藏内容

2.2.0以上提供

请注意，tag-hide内的外挂标签content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。

可以把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个外挂标签。

inline 在文本里面添加按钮隐藏内容，只限文字

( content不能包含英文逗号，可用 &sbquo; )

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

content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)

示例

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

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

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

门里站着一个人? 闪

block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等

( display 不能包含英文逗号，可用&sbquo;)

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)

示例

查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

查看答案

傻子，怎么可能有答案

主题 2.3.0以上支持

如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。

( display 不能包含英文逗号，可用&sbquo;)

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

示例

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

{% 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 分栏标签

移植于Next主题。

使用方法

语法

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

**参数**

Unique name   : **必填项。**Unique name of tabs block tag without comma.
                将在 # id 中作为每个 Tab 标签的前缀。如果名称中有空格，对于 generate # id，所有空格都将被破折号替换。
                Only for current url of post/page must be unique!
[index]       : 默认展开的 Tab 数量。可选项。
                不填默认为“`1`”。
                如果该项为`-1`，所有标签都默认不展开（见示例 2）。
[Tab caption] : 当前 Tab 栏目的标题。可选项。
                如果没有指定标题，则使用 Unique name 加从1开始的数字作为栏目的标题。
                如果没有指定标题，但指定了图标，栏目标题将为空。
[@icon]       : FontAwesome icon 名称 (full-name, look like 'fas fa-font')。可选项。
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.

示例 1 - 默认

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

示例 2 - index值为-1

{% tabs test3, -1 %}
<!-- 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.

示例 3 - 自定义Tab名 + 只有icon + icon和Tab名

{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标没有Tab名字

名字+icon

Mermaid

Mermaid标签不允许嵌套于一些隐藏属性的标签外挂，例如: tag-hide内的标签外挂和tabs标签外挂，这会导致mermaid图标无法正常显示，使用时请留意。

请不要压缩html代码，不然会导致mermaid显示异常

使用Mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档

修改 主题配置文件

mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

写法：

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

例如：

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Button 按钮标签

主题3.0以上适用

使用方法：

{% 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 This is my website, click the button Butterfly This is my website, click the button Butterfly This is my website, click the button Butterfly This is my website, click the button Butterfly

{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}

Butterfly Butterfly Butterfly **more than one button in center**

{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

### inlineImage 行内图片主题中的图片都是默认以`块级元素`显示，如果你想以`内联元素`显示，可以使用这个标签外挂。

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

![image-20210319001204045](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-theme-butterfly-docs-inlineimg.png) ### Label 文字边框 > 主题3.7.5 及以上版本适用。高亮所需的文字

{% label text color %}

| 参数 | 解释 | | ----- | ------------------------------------------------------------ | | text | 文字 | | color | 【可选】背景颜色，默认为 `default`
default/blue/pink/red/purple/orange/green | **示例：**

臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。 ### 时间轴标签 > 主题4.0.0 及以上版本支持。

{% timeline title,color %}
<!-- timeline title -->
正文
<!-- endtimeline -->
<!-- timeline title -->
正文
<!-- endtimeline -->
{% endtimeline %}

| 参数 | 解释 | | ----- | ------------------------------------------------------------ | | title | 时间线的标题或日期 | | color | 【可选】时间轴颜色，默认为 `default`
default/blue/pink/red/purple/orange/green | **示例：**

{% timeline 2022年事件日历,red %}
<!-- timeline 01-02 -->
正文
<!-- endtimeline -->
<!-- timeline 01-01 -->
正文
<!-- endtimeline -->
{% endtimeline %}

2022年事件日历

01-02

正文

01-01

正文

具体应用可参考本站的[更新记录页面](/changelog/)。 ### 乐谱标签此标签可在页面上渲染乐谱，使用方式如下。乐谱的编写方式参见[abcjs项目文档](https://paulrosen.github.io/abcjs/)。（本站未启用，仅作介绍）

{% score %}
乐谱代码
{% endscore %}

## Tag Plugins Plus 插件增加标签的语法手册

以下标签需要 Tag Plugins Plus 插件才能实现。当然无论访客是否安装插件都能看到效果。

### 行内文本样式 **语法**

1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

**示例** 1. 带下划线的文本 2. 带着重号的文本 3. 带波浪线的文本 4. 带 ~~删除线~~ 的文本 5. 键盘样式的文本 command + D 6. 密码样式的文本：这里没有验证码- 彩色文字在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis A Wonderful Theme for Hexo ### 段落文本样式 **语法**

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

**示例** - 彩色文字在一段话中方便插入各种颜色的标签，包括：

红色

、

黄色

、

绿色

、

青色

、

蓝色

、

灰色

。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。

Volantis

A Wonderful Theme for Hexo

### 上标标签 **语法**

{% tip [icon，可选] %}文本内容{% endtip %}

**参数** - icon: success,error,warning,bolt,ban,home,sync,cogs,key,bell 此外还可以选择fontawesome V5作为icon参数。 **示例**

{% tip %}默认情况{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

### 动态标签不建议使用，因为语法较为复杂，还受限于外挂标签局限无法直接转换为HTML。因此我也不会在本站中使用，直接略过。如需使用，参见[Tag Plugins Plus 介绍的相关内容](https://akilar.top/posts/615e2dec/#%E5%8A%A8%E6%80%81%E6%A0%87%E7%AD%BE-anima) ### 单选列表 **语法**

{% radio color checked, text %}

**参数** - `color`: 选项框的颜色，默认可选“红色、黄色、绿色、青色、蓝色、灰色。” - `checked`表示选中状态，若表示未选中则无需添加。 - `text`: 选项文本，可使用简单的Markdown语法。 **示例**

{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

### 时间轴标签

Butterfly 4.0 以上版本中，主题已自带时间轴标签。此语法仅适用于 4.0 以下版本。

**语法**

{% timeline 时间线标题（可选） %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% endtimeline %}

时间线标题（可选）

时间节点（标题）

正文内容

时间节点（标题）

正文内容

### 按钮标签

Volantis的按钮使用的是btn和btns标签。btns和butterfly的button不冲突，但是btn会被强制渲染，导致部分参数失效,而且btn的效果还是butterfly的button更好看些。所以就只适配了btns。

**语法**

{% btns 参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

**参数** | 参数 | 含义 | |--------|---------------------| |rounded | 方角按钮 | |circle | 圆角按钮 | | wide | 宽一点的按钮 | | fill | 填充布局，自动铺满至少一行，多了会换行 | | center | 居中，按钮之间是固定间距 | | around | 居中分散 | | grid2 | 等宽最多2列，屏幕变窄会适当减少列数 | | grid3 | 等宽最多3列，屏幕变窄会适当减少列数 | | grid4 | 等宽最多4列，屏幕变窄会适当减少列数 | | grid5 | 等宽最多5列，屏幕变窄会适当减少列数 | **示例**

1. 如果需要显示类似「团队成员」之类的一组含有头像的链接：
   
   
   
   {% btns circle grid5 %}
   {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
   {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
   {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
   {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
   {% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
   {% endbtns %}

2. 或者含有图标的按钮：
   
   {% btns rounded grid5 %}
   {% cell 下载源码, /, fas fa-download %}
   {% cell 查看文档, /, fas fa-book-open %}
   {% endbtns %}

3. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
   
   {% btns circle center grid5 %}
   <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
     <i class='fab fa-apple'></i>
     <b>心率管家</b>
     {% p red, 专业版 %}
     <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
   </a>
   <a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
     <i class='fab fa-apple'></i>
     <b>心率管家</b>
     {% p green, 免费版 %}
     <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
   </a>
   {% endbtns %}

1. 如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu

或者含有图标的按钮：
下载源码查看文档
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
心率管家
专业版
 心率管家
免费版

折叠标签

语法

{% folding color open, 标题 %}

文字内容

{% endfolding %}

参数

可填写color参数：blue, cyan, green, yellow, red
状态：状态填写 open 代表默认打开。

示例

{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试

haha
hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

音频与视频

示例

1. 音频

{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

2. 100%宽度视频

{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

3. 50%宽度视频

{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

4. 25%宽度视频

{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

音频

100%宽度视频

3. 50%宽度视频

25%宽度视频

链接卡片

语法

{% link 标题, 链接, 图片链接（可选） %}

示例

{% link 艾米莉的蜂蜜屋, https://www.emiliabear.com/, https://www.emiliabear.com/img/avatar.jpg %}

艾米莉的后花园

https://www.emiliabear.com/

网站卡片

语法

{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

示例

xaoxuu简约风格

inkss这是一段关于这个网站的描述文字

MHuiG这是一段关于这个网站的描述文字

Colsrch这是一段关于这个网站的描述文字

Linhk1606这是一段关于这个网站的描述文字

xaoxuu简约风格

inkss这是一段关于这个网站的描述文字

MHuiG这是一段关于这个网站的描述文字

Colsrch这是一段关于这个网站的描述文字

Linhk1606这是一段关于这个网站的描述文字

注释和气泡注释

语法

{% nota [label] , [text] %}
或
{% bubble [label] , [text] ,[background-color] %}

参数

label: 注释词汇
text: 悬停显示的注解内容
background-color: 可选，气泡背景色，默认为 “#71a4e3”。
注意注释词汇和内容要以英文半角逗号分隔，否则会报错。

示例

* {% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}
* 最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

把鼠标移动到我上面试试
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

引用参考文献

考虑到锚点跳转的特性，不建议您将引用出处标签 referfrom 写在常隐外挂标签 (如 folding、tab、hideToggle) 中，这样能有效避免跳转失败。

语法

{% referto [id] , [literature] %}
{% referfrom [id] , [literature] , [url] %}

参数

referto 引用上标
id: 上标序号内容，需与 referfrom 标签的 id 对应才能实现跳转
literature: 引用的参考文献名称
referfrom 引用出处
id: 序号内容，需与 referto 标签的 id 对应才能实现跳转
literature: 引用的参考文献名称
url: 引用的参考文献链接，可省略

示例

Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %}，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架{% referto '[2]','Hexo中文文档' %}，Butterfly主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %}

本项目参考了Volantis{% referto '[4]','hexo-theme-volantis 标签插件' %}的标签样式。引入`[tag].js`，并针对`butterfly`主题修改了相应的`[tag].styl`。在此鸣谢`Volantis`主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档{% referto '[5]','Volantis文档:内置标签插件' %}
Butterfly主题的各个衍生魔改{% referto '[6]','Butterfly 安装文档:标签外挂（Tag Plugins' %}{% referto '[7]','小弋の生活馆全样式预览' %}{% referto '[8]','l-lin-font-awesome-animation' %}{% referto '[9]','小康的butterfly主题使用文档' %}


{% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?_wv=1027&k=pGLB2C0N' %}
{% referfrom '[2]','Hexo中文文档','https://hexo.io/zh-cn/docs/' %}
{% referfrom '[3]','Butterfly 安装文档(一) 快速开始','https://butterfly.js.org/posts/21cfbf15/' %}
{% referfrom '[4]','hexo-theme-volantis 标签插件','https://volantis.js.org/v5/tag-plugins/' %}
{% referfrom '[5]','Volantis文档:内置标签插件','https://volantis.js.org/tag-plugins/' %}
{% referfrom '[6]','Butterfly 安装文档:标签外挂（Tag Plugins','https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89' %}
{% referfrom '[7]','小弋の生活馆全样式预览','https://lovelijunyi.gitee.io/posts/c898.html' %}
{% referfrom '[8]','l-lin-font-awesome-animation','https://github.com/l-lin/font-awesome-animation' %}
{% referfrom '[9]','小康的butterfly主题使用文档','https://www.antmoe.com/posts/3b43914f/' %}

Akilarの糖果屋(akilar.top)是一个私人性质的博客^[1]Akilarの糖果屋群聊简介参考资料，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架^[2]Hexo中文文档参考资料，Butterfly主题^[3]Butterfly 安装文档(一) 快速开始参考资料

本项目参考了Volantis^[4]hexo-theme-volantis 标签插件参考资料的标签样式。引入[tag].js，并针对butterfly主题修改了相应的[tag].styl。在此鸣谢Volantis主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档^[5]Volantis文档:内置标签插件参考资料
Butterfly主题的各个衍生魔改^[6]Butterfly 安装文档:标签外挂（Tag Plugins参考资料^[7]小弋の生活馆全样式预览参考资料^[8]l-lin-font-awesome-animation参考资料^[9]小康的butterfly主题使用文档参考资料

Butterfly 安装文档(一) 快速开始

[4]

hexo-theme-volantis 标签插件

[5]

Volantis文档:内置标签插件

[6]

Butterfly 安装文档:标签外挂（Tag Plugins

[7]

小弋の生活馆全样式预览

[8]

l-lin-font-awesome-animation

[9]

小康的butterfly主题使用文档

诗词标签

因字库问题，一些繁体字以及异体字会有缺失，具体可见示例。不建议过多使用该标签。

语法

{% poem [title],[author] %}
诗词内容
{% endpoem %}

参数

title：诗词标题
author：作者，可以不写

示例

{% poem 水調歌頭·明月幾時有,蘇軾 %}
丙辰中秋，歡飲達旦，大醉，作此篇，兼懷子由。
明月幾時有？把酒問青天。
不知天上宮闕，今夕是何年？
我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。
起舞弄清影，何似在人間？

轉朱閣，低綺戶，照無眠。
不應有恨，何事長向別時圓？
人有悲歡離合，月有陰晴圓缺，此事古難全。
但願人長久，千裏共嬋娟。
{% endpoem %}

水調歌頭·明月幾時有

蘇軾

丙辰中秋，歡飲達旦，大醉，作此篇，兼懷子由。
明月幾時有？把酒問青天。
不知天上宮闕，今夕是何年？
我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。
起舞弄清影，何似在人間？

轉朱閣，低綺戶，照無眠。
不應有恨，何事長向別時圓？
人有悲歡離合，月有陰晴圓缺，此事古難全。
但願人長久，千裏共嬋娟。

进度条标签

语法


{% progress [width] [color] [text] %}

参数

width: 0 到 100 的阿拉伯数字
color: 颜色，取值有 red,yellow,green,cyan,blue,gray
text: 进度条上的文字内容

示例


{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

进度条样式预览

Github 卡片

用了 github-readme-stats 的 API，支持直接使用 markdown 语法。

语法

{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库名称, 其它参数（可选） %}

参数

使用 , 分割各个参数。写法为：“参数名=参数值”，
以下只写几个常用参数值。

参数名	取值	释义
hide	stars,commits,prs,issues,contribs	隐藏指定统计
count_private	true	将私人项目贡献添加到总提交计数中
show_icons	true	显示图标
theme	请查阅 Available Themes	主题
title_color	十六进制色码	卡片标题颜色
text_color	十六进制色码	内容文本颜色
icon_color	十六进制色码	图标颜色（如果可用）
bg_color	内容文本颜色。使用`DEG,COLOR1,COLOR2,COLOR3...COLOR10` 或者以 angle,start,end 的形式渐变	卡片背景颜色
locale	cn, de, es 等	设置卡片语言

更多参数可以参考：

示例

用户信息卡片

| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |
| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |
| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |

仓库信息卡片

| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |
| -- | -- |
| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

Github 徽标

语法

{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}

参数

参数	释义
left	徽标左边的信息，必选参数。
right	徽标右边的信息，必选参数。
logo	徽标图标，图标名称详见 simpleicons，可选参数。
color	徽标右边的颜色，可选参数。
link	指向的链接，可选参数。
title	徽标的额外信息，可选参数。主要用于优化 SEO，但 object 标签不会像 a 标签一样在鼠标悬停显示 title 信息。
option	自定义参数，支持 shields.io 的全部 API 参数支持，具体参数可以参看上文中的拓展写法示例。形式为 name1=value2&name2=value2。

示例

基本参数，定义徽标左右文字和图标

{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}

信息参数，定义徽标右侧内容背景色，指向链接

{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}

//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割

拓展参数，支持 shields 的 API 的全部参数内容

{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&logoWidth=20 %}
//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}

//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割