Hexo之volantis主题标签插件合集

此文主要记录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, 灰色 %}

超大号文字：Volantis

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 默认绿色，适合正确操作的信息

1.4 note

绿色

红色

黄色

灰色

蓝色

<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标签

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

<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 测试：点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

{% noteblock, 标题（可选） %}

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

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

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

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

{% endfolding %}
{% endnoteblock %}

1.7 复选列表

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

{% 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 语法

支持自定义颜色

绿色

黄色

青色

蓝色

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

1.9 时间线

时间线标题（可选）

时间节点（标题）

正文内容

时间节点（标题）

正文内容

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

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

正文内容

{% endtimenode %}

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

正文内容

{% endtimenode %}

{% endtimeline %}

2 链接、按钮、菜单

2.1 链接卡片

如何参与项目

https://volantis.js.org/contributors/

1	{% link 如何参与项目, https://volantis.js.org/contributors/, https://gcore.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 富文本按钮

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

xaoxuu

{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

或者含有图标的按钮：

下载源码查看文档

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

圆形图标 + 标题 + 描述 + 图片 + 网格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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

2.5 下拉菜单

下拉菜单

有疑问？

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

。。。

！！！

{% tabs tab-id %}
<!-- tab 标签名 -->
。。。
<!-- endtab -->
<!-- tab 标签名 -->
！！！
<!-- endtab -->
{% endtabs %}

3.2 折叠框

查看图片测试

{% folding 查看图片测试 %}

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

{% endfolding %}

查看默认打开的折叠框

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

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

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

{% endfolding %}

查看代码测试

hello world!

1
2
3

{% folding green, 查看代码测试 %}
 hello world!
{% endfolding %}

查看列表测试

hello
world

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

- hello
- world

{% endfolding %}

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

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

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

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

hahaha 

{% endfolding %}

{% endfolding %}

{% endfolding %}

4 多媒体类

4.1 行内图片

这是一段话。

这又是一段话。

1
2
3

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

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

4.2 单张图片

添加描述：

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

指定宽度：

指定宽度并添加描述：