教程参考:

链接卡片

1
{% link 标题, 链接, 图片链接(可选) %}

行内文本样式

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

Unique name::分栏名

index:默认显示第几栏内容,-1都不显示,不指定就默认为1

Tab caption:分栏标题

@icon:图标,如 @fas fa-bomb

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

折叠框

1
2
3
4
{% folding 参数(可选), 标题 %}
![](图片链接)
内容
{% endfolding %}
标题
后面有惊喜
标题
标题
标题

诗词

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

进度条

1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

注释

1
{% nota [label] , [text] %}

把鼠标移动到我上面试试(label内容)

行内文本样式

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. 密码样式的文本:这里没有验证码

行内(段落)文本

1
2
3
4
5
6
7
- 彩色文字
{% 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 %}

段落文本只需将 span 改为 p 标签即可

  • 彩色文字
    红色黄色
    绿色青色
    蓝色灰色
  • 超大号文字

    A Wonderful Theme for Hexo

note标签

第一种

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

第二种

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

第一种
1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

class:图标,default / primary / success / info / warning / danger

no-icon:不显示图标

style:(边框)样式,simple/modern/flat/disabled

第二种
1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

class:配色 default / blue / pink / red / purple / orange / green

style:(边框)样式,simple/modern/flat/disabled

第一种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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 %}

第二种

上标标签

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

复(单)选列表

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

checked:选中状态

单选列表即将 checkbox 改为 radio 标签,且单选列表没有样式属性

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

影音

1
2
3
4
5
6
7
8
9
10
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

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

{% videos, 2 %}(50%宽度,4%为25%宽度)
{% 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 %}