本文主要记述Markdown的基本语法以及店长的butterfly外挂标签插件中常用部分的基本使用和演示，用于熟悉博客文章的撰写

前言

章前哔哔

不知道你有没有经历过这样一段心路历程，废了好大的劲终于把博客的基本配置做完了，兴致冲冲地准备动手写博客了，回过头来却发现，博客的语法要怎么写来着？
由于先前一直有用obsidian做学习笔记的习惯，我自以为已经具备了写博客的前提条件，但实际上手才发现其中的差别还是相当大的，一个是用obsidian做笔记只要面向自己就可以了，不用在意格式规划啥的，一切只需要自己能看懂就好，这和博客的需求是完全不同的，更不用说butterfly要写出优雅的博客还要关注各种外挂标签啥的。
因此打算自己写一篇作为对markdown以及butterfly外观标签的总结，也就当熟悉博客的写法了。

注：本文仅供熟悉博客文章使用，故外挂标签部分介绍并不全面，仅给出部分比较常用的部分，如有具体需求，建议参考原文，具体教程链接均在文前给出

点击查看参考教程
作者教程原帖
FomalhautMarkdown语法与外挂标签写法汇总
店长AkilarTag Plugins Plus
JerryButterfly 文档(四) 标签外挂

Markdown基本语法

Markdown为hexo集成的标记语言，可以直接使用，butterfly外挂标签则为butterfly插件，需要手动导入

当然，butterfly的外挂标签插件只能供butterfly主题使用，别的主题还需使用专门的插件

注意：在原生Markdown（如表格）中使用某些外挂标签可能存在兼容性问题，例如显示闭合标签等问题，仍需要自己调整

标题

1
2
3
4
5
# h1
## h2
### h3
#### h4
##### h5

见文章标题

段落

没什么好多讲的，唯一值得注意的地方就是不要随便缩进

1
2
3
4
5
I really like using Markdown.

I think I'll use it to format all of my documents from now on.

> 我是引用语法，我引用了我自己

I really like using Markdown.

I think I’ll use it to format all of my documents from now on.

我是引用语法，我引用了我自己

  • 1、段落保持顶格缩进，不要在段前使用space空格和tab换行符进行缩进
  • 2、换行相当于使用html中的<\br>标签进行渲染，避免在结尾使用\符号
  • 3、Markdown支持两个或多个空格进行换行
  • 4、引用语法支持嵌套使用

代码块

善用不同形式的代码块来标识用途

1
2
3
4
- 旧代码行
+ 新代码行 
未更改的代码行
! 修改的代码行
  1. 使用diff来标识区分代码块，+标识添加，-标识删除，！标识修改
  2. 使用编程语言来表示对应编程语言代码块
1
2
3
4
- 旧代码行
+ 新代码行 
未更改的代码行
! 修改的代码行

文字强调

行内文字在外挂标签中有更优的写法，反正不到万不得已不要用html嵌入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<u>下划线演示</u>

文字**加粗**演示

文字*斜体*演示

文本`高亮`演示

文本~~删除~~线演示

// 使用html标签实现特定字体设置
<font size = 5>5号字</font>
<font face="黑体">黑体</font>
<font color=blue>蓝色</font>

<table><tr><td bgcolor=MistyRose>这里的背景色是：MistyRosen，此处输入任意想输入的内容</td></tr></table>

下划线演示

文字加粗演示

文字斜体演示

文本高亮演示

文本删除线演示

5号字 黑体 蓝色
这里的背景色是：MistyRosen，此处输入任意想输入的内容
  • 1、使用星号*或下划线_均可实现加粗或斜体
  • 2、如要同时使用加粗和斜体，使用三个标识符

列表

有序列表

1
2
3
4
5
6
1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item
  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

无序列表

1
2
3
4
5
6
- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item
  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item
  • 1、使用+*-均可实现无序列表
  • 2、若要在列表中插入非列表段落，缩进4个空格或一个制表符，否则将被当作列表

分割线

1
2
3
4
5
----

****

------------
  • 1、为兼容性考虑，在分割线前后加一段空白段落

链接语法

1
这是一个链接 [Markdown语法](https://markdown.com.cn)。

这是一个链接 Markdown语法。

  • 在链接URL后面增加title可实现鼠标悬浮时出现提示词
  • 链接文本可使用文本增强符强调

图片

1
2
3
![这是图片](/img/bg4.jpg "Magic Gardens")

[![这是带链接的图片](/img/bg4.jpg "Magic Gardens")](https://markdown.com.cn)

这是图片

这是带链接的图片

表格

1
2
3
4
5
6
7
8
9
10
11
#默认表格
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

#自定义对齐表格
| Syntax(right) | Description(center) |
| --------: | :-----------: |
| Header      | Title       |
| Paragraph   | Text        |
Syntax Description
Header Title
Paragraph Text
Syntax(right) Description(center)
Header Title
Paragraph Text

butterfly外挂标签

引自店长的外挂标签插件，标签npm引入和配置详情见店长Tag Plugins Plus

行内文本样式 text

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

行内文本 span

对Markdown行内样式的补充，可以更简洁地修改行内样式

基本使用技巧就是注意字体、颜色、大小和对齐方式四个属性

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体：logo，code
  2. 颜色：红色、黄色、绿色、青色、蓝色、灰色
  3. 大小：small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐：left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo
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 %}

段落文本 p

对段落文本的扩展，使用方式和场景基本等同于行内文本

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：

    红色

    、

    黄色

    、

    绿色

    、

    青色

    、

    蓝色

    、

    灰色

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

    A Wonderful Theme for Hexo

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

引用 note

在外挂标签中，note算得上是最常用的模块之一了，插件提供了两种note的配置语法，第一种为butterfly自带语法，可基于主题配置文件进行配置，第二种为外部引入图标方式，支持自定义引入font-awesome V5图标

通用配置用以修改默认参数，不过使用时建议还是对每个引用框都手动进行配置

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
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

方式一 
1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
方式二 
1
2
3
{% note [color] [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）|

方式二
参数用法
class【可选】标识，不同的标识有不同的配色

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

方法一

  1. simple样式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  2. modern样式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  3. flat样式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  4. disabled样式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  5. no-icon样式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

方法二

  1. simple样式

    你是刷 Visa 还是 UnionPay

    2021年快到了….

    小心开车 安全至上

    这是三片呢？还是四片？

    你是刷 Visa 还是 UnionPay

    剪刀石头布

    前端最讨厌的浏览器

  2. modern样式

    你是刷 Visa 还是 UnionPay

    2021年快到了….

    小心开车 安全至上

    这是三片呢？还是四片？

    你是刷 Visa 还是 UnionPay

    剪刀石头布

    前端最讨厌的浏览器

  3. flat样式

    你是刷 Visa 还是 UnionPay

    2021年快到了….

    小心开车 安全至上

    这是三片呢？还是四片？

    你是刷 Visa 还是 UnionPay

    剪刀石头布

    前端最讨厌的浏览器

  4. disabled样式

    你是刷 Visa 还是 UnionPay

    2021年快到了….

    小心开车 安全至上

    这是三片呢？还是四片？

    你是刷 Visa 还是 UnionPay

    剪刀石头布

    前端最讨厌的浏览器

  5. no-icon样式

    你是刷 Visa 还是 UnionPay

    2021年快到了….

    小心开车 安全至上

    这是三片呢？还是四片？

    你是刷 Visa 还是 UnionPay

    剪刀石头布

    前端最讨厌的浏览器

方法一
  1. simple样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  2. modern样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  3. flat样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  4. disabled样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note disabled %}默认 提示块标签{% endnote %}

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

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

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

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

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

    {% note danger disabled %}danger 提示块标签{% endnote %}
  5. no-icon样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note no-icon %}默认 提示块标签{% endnote %}

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

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

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

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

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

    {% note danger no-icon %}danger 提示块标签{% endnote %}
方法二
  1. simple样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  2. modern样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  3. flat样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  4. disabled样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}
  5. no-icon样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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 %}

上标标签 tip

在大多数情况下上标标签和引用note的功能相似，两者基本可以无缝切换

另外值得注意的一点是note引用自定义图标是直接引入，需要加引号；而上标标签tip则是控制类型，因此无需加引号

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标：支持fontawesome

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

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 %}
1
{% link 标题, 链接, 图片链接（可选） %}

糖果屋教程贴

https://akilar.top/posts/615e2dec/

1
{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, /img/siteicon/favicon.ico %}

时间线 TimeLine

为避免原生butterfly与外挂标签插件的冲突，本时间线引用的是原生butterfly的教程TimeLine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline title,color %}

<!-- timeline title -->

xxxxx

<!-- endtimeline -->
<!-- timeline title -->

xxxxx

<!-- endtimeline -->

{% endtimeline %}

  1. title：标题
  2. color：时间线颜色

2022

01-02

这是测试页面

1
2
3
4
5
6
7
8
9
{% timeline 2022,pink %}

<!-- timeline 01-02 -->

这是测试页面

<!-- endtimeline -->

{% endtimeline %}

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
xaoxuu简约风格
inkss这是一段关于这个网站的描述文字
MHuiG这是一段关于这个网站的描述文字
Colsrch这是一段关于这个网站的描述文字
Linhk1606这是一段关于这个网站的描述文字
1
2
3
4
5
6
7
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}
{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}

音频 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

视频 video

1
{% video 视频链接 %}
  1. 100%宽度
  2. 50%宽度
  3. 25%宽度
  1. 100%宽度
    1
    {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
  2. 50%宽度
    1
    2
    3
    4
    5
    6
    {% 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 %}
  3. 25%宽度
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {% 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 %}

折叠框 folding

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：open表示默认打开
查看图片测试

查看默认打开的折叠框

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

查看代码测试

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

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha 

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

分栏 tab

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


  1. Unique name :
    选项卡块标签的唯一名称，不带逗号。
    将在#id中用作每个标签及其索引号的前缀。
    如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
    仅当前帖子/页面的URL必须是唯一的！
  2. [index]:
    活动选项卡的索引号。
    如果未指定，将选择第一个标签（1）。
    如果index为-1，则不会选择任何选项卡。
    可选参数。
  3. [Tab caption]:
    当前选项卡的标题。
    如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
    如果未指定标题，但指定了图标，则标题将为空。
    可选参数。
  4. [@icon]:
    FontAwesome图标名称（全名，看起来像“ fas fa-font”）
    可以指定带空格或不带空格；
    例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
    可选参数。

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

数据图标 icon

1
{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx：表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
  2. font-size：表示图标大小，直接填写数字即可，单位为em。图标大小默认值为1em。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% icon icon-rat_zi %}{% icon icon-rat,2 %}

{% icon icon-ox_chou,3 %}{% icon icon-ox,4 %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

{% icon icon-rabbit_mao,1 %}{% icon icon-rabbit,2 %}

{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %}

{% icon icon-snake_si,5 %}{% icon icon-snake,6 %}

{% icon icon-horse_wu %}{% icon icon-horse,2 %}

{% icon icon-goat_wei,3 %}{% icon icon-goat,4 %}

{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %}

{% icon icon-rooster_you %}{% icon icon-rooster,2 %}

{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %}

{% icon icon-boar_hai,5 %}{% icon icon-boar,6 %}