主题支持的标签。

Span & P

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

行内文本

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

独立段落

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

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

颜色

red, yellow, green, cyan, blue, gray

大小

small, large, huge, ultra

对齐方向

left, center, right

彩色文字

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

超大文字

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

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

彩色文字

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

超大文字

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

Volantis

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 测试

点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

基础按钮

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

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

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

样式参数

regular, large, center

图标

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

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

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

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

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

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

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

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

或者含有图标的按钮:

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

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

example.md:
{% btns circle center grid4 %}
<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 %}

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

或者含有图标的按钮:

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

Fancybox

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

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

对齐方向

left, center, right

缩放

stretch

列数

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

一行一个图片

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

一行多个图片(不换行)

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

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

example.md:
{% fancybox stretch, 4 %}
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endfancybox %}

一行一个图片

一行多个图片(不换行)



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








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/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}

50%宽度

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

25%宽度

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

100%宽度

50%宽度

25%宽度

Tab

请将您的 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://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

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

颜色

blue, cyan, green, yellow, red

状态

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

{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/xaoxuu/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

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

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

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

查看代码测试

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

hahaha

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

渲染公式(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 --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

帮助

下述操作将协助您解决在使用过程中遇到的任何问题:

主题文件(除了配置文件以外)未经任何修改,无法成功搭建博客

此流程适用于直接使用主题搭建博客的用户,在仅仅修改了主题配置文件、Hexo配置文件、增加了自己的文章,这种情况下无法成功搭建或者部署的问题。

  1. 在 Volantis 文档右上角搜索关键词,查看是否有相关内容。
  2. Hexo 官方文档 中搜索关键词,查看是否有相关内容。
  1. 下载 本站源码 ,然后下载 主题源码themes/volantis
  2. 执行 npm install 安装依赖包。
  3. 执行 hexo s 运行。

如果正常,请一步一步将配置文件修改为您原来的设定,直至找到出问题的地方。
如果依然不能运行,请检查 Hexo 环境配置,或者重新安装 Hexo 。

按照文档描述进行修改配置之后发生错误,可能是文档有误或者过时。可以在 issues 页面发帖求助,务必按照 issue 模板提供尽可能详细的信息,如果只写个标题,我们很难帮助您解决问题。

对应的 issue 模板类型: Question Report

主题文件(ejs、js、css、第三方插件等)有修改,无法成功搭建博客

此流程适用于 fork 主题并对主题文件(ejs、js、css 等)进行了修改后搭建博客的用户,无法成功搭建或者部署的问题。

  1. 在 git 历史中新建分支还原修改,或者尝试直接下载本站源码和主题源码运行。
  2. 如果未经修改可以正常搭建,请定位到自己修改的内容,查看是否有误。

如果是主题文档中提到过的第三方插件(意味着有主动兼容),遇到无法使用的情况,可以在 issues 页面新建 issue 详细描述您的问题。对应的 issue 模板类型: Question Report

如果是主题文档中没有提到过的第三方插件,可能存在没有兼容的情况,可以在 issues 页面新建 issue 请求兼容。对应的 issue 模板类型: Feature Request

有明确的 BUG 或者建议

此流程适用于您已经定位到了问题的具体所在,不需要协助定位问题。希望开发者予以修正。

例如主题文档中也存在的问题,或者在指定的浏览器、平台,经过某个操作后确定可以复现的问题。请在 issues 页面新建 issue 进行反馈。对应的 issue 模板类型: Bug Report

反馈一个 BUG 需要按照 issue 模板提供尽可能详细的信息,如果只有一个标题或者一句话,我们无法进行复现的话,是无法解决问题的。

请在 issues 页面新建 issue 进行反馈。对应的 issue 模板类型: Feature Request