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

主题原生支持的标签。

文本和段落

Span & P

请将您的 Volantis 升级至 2.5 版本以上使用。

行内文本

{% span 样式参数, 文本内容 %}

独立段落

{% p 样式参数, 文本内容 %}

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

字体

logo, code

颜色

red, yellow, green, cyan, blue, gray

大小

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

对齐方向

left, center, right

彩色文字

example.md:
在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

超大文字

example.md:
文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

彩色文字

在一段话中方便插入各种颜色的标签,包括:红色黄色绿色青色蓝色灰色

超大文字

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

A Wonderful Theme for Hexo

Note & NoteBlock

NoteBlock 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。请将您的 Volantis 升级至 2.3 版本以上使用。

Note

{% note 样式参数, 文本内容 %}

NoteBlock

{% noteblock 样式参数 %}

文本段落

{% endnoteblock %}

样式参数位置可以写图标和颜色,多个样式参数用空格隔开。

图标

彩色的
quote, info, warning, done/success, error/danger
灰色的,也可以指定颜色
radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

颜色

指定颜色
clear, light, gray, red, yellow, green, cyan, blue

Note

example.md:
{% note, 为简单的一句话提供的简便写法。 %}

{% note success, 支持同样丰富的参数。 %}

NoteBlock

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

{% noteblock quote %}

{% p subtitle, 小标题 %}

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

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

{% p subtitle, Folding 测试 %}
{% folding 点击查看更多 %}

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

{% endfolding %}
{% endnoteblock %}

Note

为简单的一句话提供的简便写法。

支持同样丰富的参数。

NoteBlock

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

小标题

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

嵌套测试

请坐和放宽,我正在帮你搞定一切...

Folding 测试

点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

Checkbox & Radio

请将您的 Volantis 升级至 2.6 版本以上使用。

{% checkbox 样式参数(可选), 文本(支持简单md) %}

颜色

red, yellow, green, cyan, blue

样式

plus, minus, times

选中状态

checked

Checkbox

example.md:
{% 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, 叉 %}

Radio

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

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮和菜单

基础按钮

请将您的 Volantis 升级至 2.4 版本以上使用。

{% btn 样式参数(可选), 标题, 链接, 图标(可选) %}

可选的参数可以省略,但是前后顺序不能乱。

样式参数

regular, large, center

图标

第1个或者第2个参数包含 fa- 的那个被识别为图标。

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

regular 按钮适合独立于段落之外:

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

large 按钮更具有强调作用,建议搭配 center 使用:

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

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

regular 按钮适合独立于段落之外:

示例博客

large 按钮更具有强调作用,建议搭配 center 使用:

开始使用

富文本按钮

请将您的 Volantis 升级至 2.3 版本以上使用。

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

样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开。

圆角样式

默认为方形

rounded, circle

布局方式

默认为自动宽度,适合视野内只有一两个的情况。

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

增加文字样式

可以在容器内增加 <b>标题</b><p>描述文字</p>

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

example.md:
{% 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 %}

或者含有图标的按钮:

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

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

example.md:
{% 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 %}

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

或者含有图标的按钮:

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

请将您的 Volantis 升级至 2.4 版本以上使用。

容器

Tab

此插件移植自 NexT #tabs 。请将您的 Volantis 升级至 2.1 版本以上使用。

{% tabs tab-id %}

<!-- tab tab-name -->

![](https://i.loli.net/2020/03/18/f5PQlWisvm9zbgK.jpg)

<!-- endtab -->

<!-- tab tab-name -->

这里面写内容,支持的语法格式有限,请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

{% endtabs %}

tab-id

必填,如果一个页面有多个 tabs 时,tab-id 不能重复。

tab-name

标签文本。

Folding

请将您的 Volantis 升级至 2.3 版本以上使用。

{% folding 参数(可选), 标题 %}

![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

参数位置可以填写颜色和状态,多个参数用空格隔开。

颜色

blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开。

{% folding 查看图片测试 %}

![](https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

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

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

多媒体

包括图片、音频、视频。

Image

Image 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。请将您的 Volantis 升级至 2.6 版本以上使用。

{% image 链接, width=宽度(可选), alt=描述(可选) %}

图片宽度

阿拉伯数字 + px

example:
width=300px

图片描述

纯文本,不能包含引号。

example.md:
添加描述:

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, alt=每天下课回宿舍的路,承载了太多记忆。 %}

指定宽度:

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px %}

指定宽度并添加描述:

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px, alt=每天下课回宿舍的路,承载了太多记忆。 %}

添加描述:

每天下课回宿舍的路,承载了太多记忆。
每天下课回宿舍的路,承载了太多记忆。

指定宽度:

image

指定宽度并添加描述:

每天下课回宿舍的路,承载了太多记忆。
每天下课回宿舍的路,承载了太多记忆。

Fancybox

Fancybox 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 2.2 版本以上使用。

{% fancybox 参数, 列数 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endfancybox %}

对齐方向

left, center, right

缩放

stretch

列数

逗号后面直接写列数,支持 2 ~ 8 列。设定列列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。

一行一个图片

example.md:
{% fancybox %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfancybox %}

一行多个图片(不换行)

example.md:
{% fancybox %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endfancybox %}

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

example.md:
{% fancybox stretch, 4 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endfancybox %}
一行多个图片(不换行) 多行多个图片(每行2~8个图片)

Audio

请将您的 Volantis 升级至 2.4 版本以上使用。

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

Video

请将您的 Volantis 升级至 2.3 版本以上使用。

单个视频

example.md:
{% video 视频链接 %}

多个视频

example.md:
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向

left, center, right

列数

逗号后面直接写列数,支持 1 ~ 4 列。

100%宽度

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

50%宽度

example.md:
{% 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 %}

25%宽度

example.md:
{% 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 %}

100%宽度

50%宽度

25%宽度

APlayer

主题对 APlayer 插件的样式进行了兼容。安装插件:

npm i -S hexo-tag-aplayer

公式

MathJax公式

默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。

example.md:
---
title: 渲染公式(MathJax)
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染, internal: 只在文章内部渲染,文章列表中不渲染
---

$$t+1=2$$

$$
\mbox{积累因子}=\begin{cases}
1+ni & \mbox{单利}\\\\
(1+i)^n & \mbox{复利}
\end{cases}
$$

$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 )
\end{equation}
$$
$$
\begin{equation}
\beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i))
\end{equation}
$$
示例效果

$$t+1=2$$

$$
\mbox{积累因子}=\begin{cases}
1+ni & \mbox{单利}\\
(1+i)^n & \mbox{复利}
\end{cases}
$$

$$
\begin{equation}
\sum_{i=0}^n F_i \cdot \phi (H, p_i) - \sum_{i=1}^n a_i \cdot ( \tilde{x_i}, \tilde{y_i}) + b_i \cdot ( \tilde{x_i}^2 , \tilde{y_i}^2 )
\end{equation}
$$
$$
\begin{equation}
\beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i))
\end{equation}
$$

Hexo 标签

引用块

引用书上的句子

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

David LevithanWide Awake

代码块

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

指定语言

[rectangle setX: 10 y: 10 width: 20 height: 20];
example.md:
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

附加说明

Array.map
array.map(callback[, thisArg])
example.md:
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

行标、高亮

1
2
3
4
5
6
7
8
n=eval(input())
if n==0:
print("Hello World")
elif n>0:
print("He\nll\no \nWo\nrl\nd")
else:
for c in "Hello World":
print(c)
example.md:
{% codeblock lang:python line_number:true mark:3,5,8 %}
n=eval(input())
if n==0:
print("Hello World")
elif n>0:
print("He\nll\no \nWo\nrl\nd")
else:
for c in "Hello World":
print(c)
{% endcodeblock %}

Pull Quote

在文章中插入 Pull quote

example.md:
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

example.md:
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist,注意:在国内无法加载。

example.md:
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

example.md:
{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

example.md:
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

在文章中插入链接,并自动给外部链接添加 target="_blank" 属性。

example.md:
{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的,取决于你在配置文件中 code_dir 的配置。

example.md:
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
示例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}
示例

引用这篇文章:主题更名为「Volantis」

example.md:
引用这篇文章:{% post_link news/2020-02-22 %}

文章摘要和截断

在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

评论