抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

此文主要记录volantis主题内置标签插件的用法,以及常用的md语法,方便写文章时查阅

1 文本类

1.1 行内文本样式

下划线
1
{% u 下划线 %}

着重号的文本

1
带{% emp 着重号 %}的文本

波浪线 的文本

1
带 {% wavy 波浪线 %} 的文本

删除线 的文本

1
带 {% del 删除线 %} 的文本

键盘样式的文本 command + D

1
键盘样式的文本 {% kbd command %} + {% kbd D %}

密码样式的文本:这里没有验证码

1
密码样式的文本:{% psw 这里没有验证码 %}

1.2 行内文本

彩色文字:红色黄色绿色青色蓝色灰色

1
{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}

超大号文字:

1
{% span center logo large, Volantis %}

可以支持的参数
样式参数位置可以写颜色、大小和对齐方向,多个样式参数用空格隔开。
字体

1
logo, code

颜色

1
red, yellow, green, cyan, blue, gray

大小

1
small, h4, h3, h2, h1, large, huge, ultra

对齐方向

1
left, center, right

1.3 引用

经典用法

可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。

note quote 适合引用一段话

note info 默认主题色,适合中性的信息

note warning 默认黄色,适合警告性的信息

note error/danger 默认红色,适合危险性的信息

note done/success 默认绿色,适合正确操作的信息

更多图标

这些都是默认样式,可以手动加上颜色:

note radiation 默认样式

note radiation yellow 可以加上颜色

note bug red 说明还存在的一些故障

note paperclip blue 放置一些附件链接

note todo 待办事项

note guide clear 可以加上一段向导

note download 可以放置下载链接

note message gray 一段消息

note up 可以说明如何进行更新

note undo light 可以说明如何撤销或者回退

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
#### 经典用法

{% note::可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。 %}
{% note quote::note quote 适合引用一段话 %}
{% note info::note info 默认主题色,适合中性的信息 %}
{% note warning::note warning 默认黄色,适合警告性的信息 %}
{% note danger::note error/danger 默认红色,适合危险性的信息 %}
{% note success::note done/success 默认绿色,适合正确操作的信息 %}

#### 更多图标

这些都是默认样式,可以手动加上颜色:

{% note radiation::note radiation 默认样式 %}
{% note radiation yellow::note radiation yellow 可以加上颜色 %}
{% note bug red::note bug red 说明还存在的一些故障 %}
{% note link green::note link green 可以放置一些链接 %}
{% note paperclip blue::note paperclip blue 放置一些附件链接 %}
{% note todo::note todo 待办事项 %}
{% note guide clear::note guide clear 可以加上一段向导 %}
{% note download::note download 可以放置下载链接 %}
{% note message gray::note message gray 一段消息 %}
{% note up::note up 可以说明如何进行更新 %}
{% note undo light::note undo light 可以说明如何撤销或者回退 %}

1.4 note

绿色

红色

黄色

灰色

蓝色

1
2
3
4
5
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>

1.5 小tag标签

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

1
2
3
4
5
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

1.6 引用块

可以在区块中放置一些复杂的结构,支持嵌套。

标题(可选)

Windows 10不是為所有人設計,而是為每個人設計

嵌套测试: 请坐和放宽,我正在帮你搞定一切…

Folding 测试: 点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% noteblock, 标题(可选) %}

Windows 10不是為所有人設計,而是為每個人設計

{% noteblock done %}
嵌套测试: 请坐和放宽,我正在帮你搞定一切...
{% endnoteblock %}

{% folding yellow, Folding 测试: 点击查看更多 %}

{% note warning, 不要说我们没有警告过你 %}
{% noteblock bug red %}
我们都有不顺利的时候
{% endnoteblock %}

{% endfolding %}
{% endnoteblock %}

1.7 复选列表

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

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

1.8 单选列表

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

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

1.9 时间线

时间线标题(可选)

时间节点(标题)

正文内容

时间节点(标题)

正文内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 时间线标题(可选) %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% endtimeline %}

2 链接、按钮、菜单

2.1 链接卡片

1
{% link 如何参与项目, https://volantis.js.org/contributors/, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %}

2.2 按钮

2.2.1 行内按钮

不设置任何参数的 按钮 适合融入段落中。

1
不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。

2.2.2 空心按钮

示例博客
1
{% btn regular, 示例博客, https://xaoxuu.com, fas fa-play-circle %}

2.2.3 居中显示

开始使用
1
{% btn center large, 开始使用, https://volantis.js.org/v3/getting-started/, fas fa-download %}

2.2.4 富文本按钮

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

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

或者含有图标的按钮:

1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

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

2.5 下拉菜单

1
2
3
4
5
6
7
8
9
10
{% menu 下拉菜单 %}
{% menuitem 主题源码, https://github.com/volantis-x/hexo-theme-volantis/, fas fa-file-code %}
{% menuitem 更新日志, https://github.com/volantis-x/hexo-theme-volantis/releases/, fas fa-clipboard-list %}
{% menuitem hr %}
{% submenu 有疑问?, fas fa-question-circle %}
{% menuitem 看 FAQ, /faqs/ %}
{% menuitem 看 本站源码, https://github.com/volantis-x/volantis-docs/ %}
{% menuitem 提 Issue, https://github.com/volantis-x/hexo-theme-volantis/issues/ %}
{% endsubmenu %}
{% endmenu %}

3 容器类

3.1 分栏

。。。

!!!

1
2
3
4
5
6
7
8
{% tabs tab-id %}
<!-- tab 标签名 -->
。。。
<!-- endtab -->
<!-- tab 标签名 -->
!!!
<!-- endtab -->
{% endtabs %}

3.2 折叠框

查看图片测试

1
2
3
4
5
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/2.jpg)

{% endfolding %}
查看默认打开的折叠框

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

1
2
3
4
5
{% folding cyan open, 查看默认打开的折叠框 %}

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

{% endfolding %}
查看代码测试

hello world!

1
2
3
{% folding green, 查看代码测试 %}
hello world!
{% endfolding %}
查看列表测试
  • hello
  • world
1
2
3
4
5
6
{% folding yellow, 查看列表测试 %}

- hello
- world

{% endfolding %}
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

1
2
3
4
5
6
7
8
9
10
11
12
13
{% folding red, 查看嵌套测试 %}

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

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

hahaha

{% endfolding %}

{% endfolding %}

{% endfolding %}

4 多媒体类

4.1 行内图片

这是 This is a picture without description 一段话。

这又是 This is a picture without description 一段话。

1
2
3
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

4.2 单张图片

添加描述:

每天下课回宿舍的路,没有什么故事。
每天下课回宿舍的路,没有什么故事。

指定宽度:

image

指定宽度并添加描述:

每天下课回宿舍的路,没有什么故事。
每天下课回宿舍的路,没有什么故事。

设置占位背景色:

优化不同宽度浏览的观感
优化不同宽度浏览的观感
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
添加描述:

{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路,没有什么故事。 %}

指定宽度:

{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

指定宽度并添加描述:

{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路,没有什么故事。 %}

设置占位背景色:

{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

4.3 相册、组图

4.3.1 一行一个图片

1
2
3
{% gallery %}
![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

4.3.2 一行多个图片(不换行)

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endgallery %}

4.3.3 多行多个图片(每行2~8个图片)

1
2
3
4
5
6
7
8
9
10
{% gallery stretch, 4 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endgallery %}

4.4 音频

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

4.5 视频

4.5.1 100%宽度

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

4.5.2 50%宽度

1
2
3
4
5
6
{% videos, 2 %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

4.5.3 25%宽度

1
2
3
4
5
6
7
8
9
10
{% videos, 4 %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

评论