标签外挂tag plugins是hexo框架的一种功能，在本不懂技术的人眼里，基本上认为是hexo框架下用来扩展markdown语法的玩意儿。hexo本身自带它，butterfly主题和Akilar大佬写的插件又加入了更多的标签外挂。这东西记肯定是记不住的，所以就自己列一遍认为有用的，作为备查。完整的列表将会在文末的参考中标明。

常用front-matter

page

title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标籤、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块 (默认 true)
top_img 【可选】页面顶部图片

post

title 【必需】文章標題
date 【必需】文章創建日期
updated 【可選】文章更新日期
tags 【可選】文章標籤
categories 【可選】文章分類
keywords 【可選】文章關鍵字
description 【可選】文章描述
top_img 【可選】文章頂部圖片
cover 【可選】文章縮略圖(如果沒有設置top_img,文章頁頂部將顯示縮略圖，可設為false/圖片地址/留空)
comments 【可選】顯示文章評論模塊(默認 true)
toc 【可選】顯示文章TOC(默認為設置中toc的enable配置)
toc_number 【可選】顯示toc_number(默認為設置中toc的number配置)
copyright 【可選】顯示文章版權模塊(默認為設置中post_copyright的enable配置)
copyright_author 【可選】文章版權模塊的文章作者
copyright_author_href 【可選】文章版權模塊的文章作者鏈接
copyright_url 【可選】文章版權模塊的文章連結鏈接
copyright_info 【可選】文章版權模塊的版權聲明文字

Hexo自带的标签外挂

blockquote 引用块

在文章中插入引言，可包含作者、来源和标题。

标签语法：

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

Demo 1 没有提供参数，则只输出普通的 blockquote，相当于 Markdown 的引用语法 > +空格 + 文本
1
2
3
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

Demo 2 引用书上的句子

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Demo3 引用网络文章

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

codeblock 代码块

要调用代码块样式，可以分别使用三个点号（three backticks）一前一后包围代码块即可，并且在前面的三个点号后面紧跟语言的名称。使用 Markdown 的博主 99% 都非常熟悉这个语法，在此就不再赘述。

iframe 插入视频

标签语法：

1
2
3
4
5
6
{% iframe url [width] [height] %}

说明：
url		: 直接使用来自bilibili的视频链接
[width]		: 直接使用整数，单位是pixel。建议使用`100%`，即满屏。
[height]	: 直接使用整数，单位是pixel。建议使用`100%`，即满屏。

实例：实例不写了。

Butterfly的标签外挂

Butterfly 主题的原生标签外挂总共有8个，相关标签的js文件全部保存在 Blog/themes/butterfly/scripts/tag/ 目录下面，现只选取比较有用的。

Button 按钮

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

Inline

1
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
1
2
This is my website, click the button {% btn 'https://uchouten.top',有顶天 %}
This is my website, click the button {% btn 'https://uchouten.top',有顶天, outline %}

This is my website, click the button 有顶天
This is my website, click the button 有顶天

Block

1
2
3
This is my website, click the button  {% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,block larger %}
This is my website, click the button  {% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,block center larger %}
This is my website, click the button  {% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,block right blue larger %}

This is my website, click the button MaraPython
This is my website, click the button MaraPython
This is my website, click the button MaraPython

混用

不换行配置多个 btn 按钮，默认 inline，靠左对齐，溢出自动换行。

1
{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,larger %}{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,blue larger %}{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,pink larger %}{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,red larger %}{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,purple larger %}{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,orange larger %}{% btn 'https://marapython.com',MaraPython,far fa-hand-point-right,green larger %}

MaraPythonMaraPythonMaraPythonMaraPythonMaraPythonMaraPythonMaraPython

Hide 隐藏

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

注意：hide 标签似乎不能嵌套使用在 tabs 标签内部，所以本小节没有使用 tabs 标签的分栏设计，全部内容直接平铺开来。
有三种，hideToggle, hideInline, hideBlock.
只展示inline和block了！

标签语法：

inline：

1
2
3
4
5
6
{% hideInline content,display,bg,color %}

content: 文本内容
display: 按钮显示的文字（可选）
bg: 按鈕的背景顏色(可選)
color: 按鈕文字的顏色(可選)

block:

1
2
3
4
5
6
7
8
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

content: 文本內容
display: 按鈕顯示的文字(可選)
bg: 按鈕的背景顏色(可選)
color: 按鈕文字的顏色(可選)

inlineimg 行内图片

主题内的图片默认都是以 block 格式显示，如果你想以 inline 格式显示，可以使用这个标签外挂。

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    圖片鏈接
[height]   ：   圖片高度限制【height=40px适宜】

label 行内色块

1
2
{% label [text] [color=default] %}
color can be default / blue / pink / red / purple / orange / green
1
We practice {% label "Being ethical, respectful, creative, and collaborative." %}

We practice Being ethical, respectful, creative, and collaborative.

Note 备注

这一部分介绍的备注样式，有个名称叫做 Bootstrap Callout，在主题配置文件_config.butterfly.yml 中已经有作如下默认设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note (Bootstrap Callout)
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: flat
  icons: true
  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

note 标签外挂有两种方法，icons 和 light_bg_offset 只对方法一生效。

方法一：

方法一内置了七种颜色，五个图标，但常用的样式有三个：绿色对勾表示肯定 / 赞同 / 成功，蓝色叹号表示提示 / 信息 / 备注，红色横杠表示否定 / 禁止 / 失败。

语法和预览(只列出常用的！)：

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 %}
With `class` missing, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

{% note default simple %}
With `class` = default, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

{% note primary simple %}
With `class` = primary, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

{% note success simple %}
With `class` = success, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

{% note info simple %}
With `class` = info, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

{% note warning simple %}
With `class` = warning, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

{% note danger simple %}
With `class` = danger, `no-icon` missing, `style` = simple, and this is how the text area would look like.
{% endnote %}

With class missing, no-icon missing, style = simple, and this is how the text area would look like.

With class = default, no-icon missing, style = simple, and this is how the text area would look like.

With class = primary, no-icon missing, style = simple, and this is how the text area would look like.

With class = success, no-icon missing, style = simple, and this is how the text area would look like.

With class = info, no-icon missing, style = simple, and this is how the text area would look like.

With class = warning, no-icon missing, style = simple, and this is how the text area would look like.

With class = danger, no-icon missing, style = simple, and this is how the text area would look like.

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 modern %}
With `class` missing, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

{% note default modern %}
With `class` = default, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

{% note primary modern %}
With `class` = primary, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

{% note success modern %}
With `class` = success, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

{% note info modern %}
With `class` = info, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

{% note warning modern %}
With `class` = warning, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

{% note danger modern %}
With `class` = danger, `no-icon` missing, `style` = modern, this removes left_border_color while adds background_color.
{% endnote %}

With class missing, no-icon missing, style = modern, this removes left_border_color while adds background_color.

With class = default, no-icon missing, style = modern, this removes left_border_color while adds background_color.

With class = primary, no-icon missing, style = modern, this removes left_border_color while adds background_color.

With class = success, no-icon missing, style = modern, this removes left_border_color while adds background_color.

With class = info, no-icon missing, style = modern, this removes left_border_color while adds background_color.

With class = warning, no-icon missing, style = modern, this removes left_border_color while adds background_color.

With class = danger, no-icon missing, style = modern, this removes left_border_color while adds background_color.

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 flat %}
With `class` missing, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

{% note default flat %}
With `class` = default, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

{% note primary flat %}
With `class` = primary, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

{% note success flat %}
With `class` = success, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

{% note info flat %}
With `class` = info, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

{% note warning flat %}
With `class` = warning, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

{% note danger flat %}
With `class` = danger, `no-icon` missing, `style` = flat, this combines left_border_color and a lighter background_color.
{% endnote %}

With class missing, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

With class = default, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

With class = primary, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

With class = success, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

With class = info, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

With class = warning, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

With class = danger, no-icon missing, style = flat, this combines left_border_color and a lighter background_color.

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 disabled %}
With `class` missing, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

{% note default disabled %}
With `class` = default, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

{% note primary disabled %}
With `class` = primary, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

{% note success disabled %}
With `class` = success, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

{% note info disabled %}
With `class` = info, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

{% note warning disabled %}
With `class` = warning, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

{% note danger disabled %}
With `class` = danger, `no-icon` missing, `style` = disabled, this just leaves the icon plus plain text.
{% endnote %}

With class missing, no-icon missing, style = disabled, this just leaves the icon plus plain text.

With class = default, no-icon missing, style = disabled, this just leaves the icon plus plain text.

With class = primary, no-icon missing, style = disabled, this just leaves the icon plus plain text.

With class = success, no-icon missing, style = disabled, this just leaves the icon plus plain text.

With class = info, no-icon missing, style = disabled, this just leaves the icon plus plain text.

With class = warning, no-icon missing, style = disabled, this just leaves the icon plus plain text.

With class = danger, no-icon missing, style = disabled, this just leaves the icon plus plain text.

方法二

方法二在图标使用上有了扩展，有了 font awesome icons 加持，图标数量直接冲上了 1000+。

语法：

1
2
3
4
5
6
7
8
9
{% note [color] [icon] [style] %}
Any content (support inline tags too)
{% endnote %}

[color]:	Optional. 
		(default / blue / pink / red / purple / orange / green)
[icon]: 	Optional. Either font awesome icons or `no-icon`
[style]: 	Optional. Configuration here overrides setting in `_config_butterfly.yml`
		(simple/modern/flat/disabled)

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' simple %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' modern %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' flat %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled  %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' disabled  %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled  %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled  %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled  %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' disabled  %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

tabs 分栏

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% 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.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

在 tabs 标签头设置当前分栏的名称，同时设置默认展示栏位
在每个 tab 子标签内设置每个栏位的名称
栏位名称可以只有图标，没有名称
栏位名称可以是图标 + 名称

tab名字为第一个Tab

tab只有图标 沒有Tab名字

因为tabs标签头设置了默认展示栏位2，所以优先展示这一栏，即第2栏

tab名字+icon

参考资料

Butterfly 官网：Butterfly 安裝文檔 (三) 主題配置 - 1：標籤外掛（Tag Plugins）

akilar 所开发的标签外挂

最初的插件名称为 hexo-tag-plugins，后来出了个升级版 hexo-butterfly-tag-plugins-plus，再后来插件中的个别 tag 例如 timeline 被移除，原因是 Butterfly 主题 4.5.1 已经支持 timeline 功能，并且语法更自然。原文链接在此

插件安装和主题配置如下：

1
npm install hexo-butterfly-tag-plugins-plus --save

考虑到 hexo 自带的 markdown 渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差，建议您将其替换成 hexo-renderer-kramed

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

配置文件中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

hexo-butterfly-tag-plugins-plus 安装成功以后，可以在路径 \MaraPython\node_modules\ 文件夹内找到。本文中将要介绍的各个 tag 的脚本文件保存在 \MaraPythong\node_modules\hexo-butterfly-tag-plugins-plus\lib\scripts\ 文件夹下，样式文件保存在 \MaraPython\node_modules\hexo-butterfly-tag-plugins-plus\lib\style\ 文件夹下，总计 20 个标签，此处只展示常用的。

btns 第二种按钮

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

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

圆角样式：rounded, circle

增加文字样式：可以在容器内增加标题和描述文字

布局方式：默认为自动宽度，适合视野内只有一两个的情况。

wide: 宽一点的按钮
fill: 填充布局，自动铺满至少一行，多了会换行
center: 居中，按钮之间是固定间距
around: 居中分散
grid2: 等宽最多 2 列，屏幕变窄会适当减少列数
grid3: 等宽最多 3 列，屏幕变窄会适当减少列数
grid4: 等宽最多 4 列，屏幕变窄会适当减少列数
grid5: 等宽最多 5 列，屏幕变窄会适当减少列数

1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell GitHub, https://github.com/, https://cdn.jsdelivr.net/gh/cpddo/p_img@450ea647ca67bd386416a689f3eb1bc6a508b3b9/2021/01/23/f7ac7b26db76ada1704f6af09bedacbe.webp %}
{% cell 哔哩哔哩, https://www.bilibili.com/, https://cdn.jsdelivr.net/gh/cpddo/p_img@e642ee265c8ae2bbd0994716aa12b3adbe07f2c4/2021/01/23/2ceca69a212d3b9988bbd2c41edc636c.webp %}
{% cell Pixiv, https://www.pixiv.net/, https://cdn.jsdelivr.net/gh/cpddo/p_img@5c4fc20944c706aa452c31d1bddbdcc672e8c6ab/2021/01/23/7658d06315d32bcf0c954b3d8e8879e0.webp %}
{% cell YouTube, https://www.youtube.com/, https://cdn.jsdelivr.net/gh/cpddo/p_img@ff4781678ea6227f5824e3c8bfd5cc27441db4da/2021/01/23/f4e292c780275465c9150eb3cb0785a4.webp %}
{% cell 今日热榜, https://tophub.today/, https://cdn.jsdelivr.net/gh/cpddo/p_img@11fff6ed270722d709eb0ac88ce47f468c21d2ba/2021/01/23/cd22cd9d34d7d7bd58114d7d7a195822.webp %}
{% endbtns %}
GitHub 哔哩哔哩 Pixiv YouTube 今日热榜

bubble 气泡注释

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

label: 注释词汇
text: 悬停显示的注解内容
background-color: 可选，气泡背景色。默认为“#71a4e3”
内容中不可以有英文逗号

1
{% bubble 王羲之, 南北朝时期的书法家。,#1db675 %}

王羲之 南北朝时期的书法家。</span>
注意，如果出现span，主要是因为标签嵌套，md插件渲染出错的缘故。请避免嵌套，如果必须嵌套，可以先在文章外写标签内容，然后hexo s预览，把这块的html代码复制出来，再在要嵌套的标签内写。
如果bubble语法失效，需要将CDN.tag_plugins_css的@latest换为具体版本号，如：@1.0.17。

checkbox 复选列表

1
{% checkbox [style], [color], [unchecked], [text]（支持简单md） %}

样式: plus, minus, times
颜色: red,yellow,green,cyan,blue,gray
选中状态: checked

1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Folding 折叠框

功能和hexo自带的hidetoggle类似。

标签语法：

1
2
3
{% folding [color] [status], 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

color：[default=gray], blue, cyan, green, yellow, red
status：[defalut=close], open

示例代码

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
28
29
30
31
32
33
34
35
36
{% 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

inline-labels 行内文本样式

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

Hexo 具有有原生的 link 标签，官方文档仅提供了简单的使用语法，但是没有给出具体的代码示例和样式预览，插件将会覆盖它。

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

media 媒体链接

1
2
3
4
5
6
7
8
9
10
11
音频：{% audio 音频链接 %}

100%宽度视频：{% video 视频链接 %}

少于100%宽度的视频：
{% videos, 2 %}
{% video 链接 %}
{% video 链接 %}
{% endvideos %}
对其方向：left, center, right
列数：逗号后面直接写列数，支持 1 ～ 4 列。

progress 进度条

1
2
{% progress [width] [color] [text] %}
{% progress 10 red what?! %}

网站卡片

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

span 行内文本

语法：

1
2
3
4
5
6
{% span 样式参数(参数以空格划分), 文本内容 %}

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

示例代码：

1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% 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 %}

预览：

  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。 A Wonderful Theme for Hexo

段落文本

和上一条类似，但是会直接让文字变成单独一个段落。

1
{% p 样式参数(参数以空格划分), 文本内容 %}

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

timeline 时间线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 怪话合集,blue %}

<!-- timeline **格式示例** -->
**最上侧的这部分总是示例与置顶消息。**
<!-- endtimeline -->

<!-- timeline 2024年1月6日 -->
Test
试试看能不能用inlineimage的标签外挂
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。
卧槽，真的可以！
<!-- endtimeline -->


{% endtimeline %}

inlineimage 行内图片

1
{% inlineimage 图片链接, height=高度（可选） %}

image 图片

语法：

1
2
3
4
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
图片宽度高度：width=300px, height=32px
图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
占位背景色：bg=#f2f2f2

reference 引用文献

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

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

referfrom 引用出处，写在章节末很不错。
id: 序号内容，需与referto标签的id对应才能实现跳转
literature: 引用的参考文献名称
url: 引用的参考文献链接，可省略

tip 上标标签

1
{% tip [参数，可选] %}文本内容{% endtip %}

样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
自定义图标: 支持fontawesome。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% 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 %}

default


info


success


error


warning


bolt


ban


home


sync


cogs


key


bell


自定义font awesome图标