主题原生支持的标签。

文本和段落

Span & P

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

行内文本

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

独立段落

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

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

字体

1
logo, code

颜色

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

大小

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

对齐方向

1
left, center, right

彩色文字

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

超大文字

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

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

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

NoteBlock

1
2
3
4
5
{% noteblock 样式参数 %}

文本段落

{% endnoteblock %}

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

图标

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

颜色

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

Note

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

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

NoteBlock

example.md:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
可以在区块中放置一些复杂的结构,支持嵌套。

{% 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 版本以上使用。

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

颜色

1
red, yellow, green, cyan, blue

样式

1
plus, minus, times

选中状态

1
checked

Checkbox

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

Radio

example.md:
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, 蓝色 %}

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮和菜单

基础按钮

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

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

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

样式参数

1
regular, large, center

图标

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

example.md:
1
2
3
4
5
6
7
8
9
不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。

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

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

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

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

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

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

示例博客

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

开始使用

富文本按钮

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

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

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

圆角样式

默认为方形

1
rounded, circle

布局方式

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

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

增加文字样式

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

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

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

或者含有图标的按钮:

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

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

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

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

或者含有图标的按钮:

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

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

容器

Tab

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% 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 版本以上使用。

1
2
3
4
5
{% folding 参数(可选), 标题 %}

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

{% endfolding %}

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

颜色

1
blue, cyan, green, yellow, red

状态

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

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
26
27
28
29
30
31
32
33
34
35
36
{% 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 <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

查看图片测试

查看默认打开的折叠框

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

查看代码测试

1
2
3
4
5
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

多媒体

包括图片、音频、视频。

Image

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

1
{% image 链接, 宽度(可选), 描述(可选) %}

图片宽度

阿拉伯数字 + px

example:
1
300px

图片描述

纯文本,不能包含引号。

example.md:
1
2
3
4
5
6
7
8
9
10
11
添加描述:

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

指定宽度:

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

指定宽度并添加描述:

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

添加描述:

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

指定宽度:

指定宽度并添加描述:

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

Fancybox

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

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

对齐方向

1
left, center, right

缩放

1
stretch

列数

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

一行一个图片

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

一行多个图片(不换行)

example.md:
1
2
3
4
5
{% 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:
1
2
3
4
5
6
7
8
9
10
{% 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个图片)

Audio

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

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

Video

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

单个视频

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

多个视频

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

对齐方向

1
left, center, right

列数

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

100%宽度

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

50%宽度

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

25%宽度

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

100%宽度

50%宽度

25%宽度

APlayer

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

1
npm i -S hexo-tag-aplayer

公式

MathJax公式

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

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

代码块

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

指定语言

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

附加说明

Array.map
1
array.map(callback[, thisArg])
example.md:
1
2
3
{% 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:
1
2
3
4
5
6
7
8
9
10
{% 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:
1
2
3
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

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

Gist

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

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

iframe

在文章中插入 iframe

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

Image

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

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

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

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

Include Code

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

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

示例

嵌入 test.js 文件全文

1
{% include_code lang:javascript test.js %}
只嵌入第 3 行
1
{% include_code lang:javascript from:3 to:3 test.js %}
嵌入第 5 行至第 8 行
1
{% include_code lang:javascript from:5 to:8 test.js %}
嵌入第 5 行至文件结束
1
{% include_code lang:javascript from:5 test.js %}
嵌入第 1 行至第 8 行
1
{% include_code lang:javascript to:8 test.js %}

引用文章

引用其他文章的链接。

1
2
{% post_path filename %}
{% post_link filename [title] [escape] %}

示例

引用这篇文章:

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

文章摘要和截断

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



向开发者反馈问题


如无特殊说明,本页面的配置信息写在 页面 文件的 front-matter 中。

布局模板

取值含义
page独立页面
post文章页面
category分类页面
tag标签页面
links友链页面
list列表页面

page & post

post 页面布局几乎与 page 页面相同,但是有以下细微区别:

  • post 文章有 title 时,向下滚动网页,导航栏会向上移出屏幕显出文章标题,而 page 不会。
  • 主题配置中的 article_footer 只作用于 post,如果 page 也要显示,可以在 front-matter 中设置
    1
    2
    meta:
    article_footer: [xxx]

front-matter

front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量。更多请见 Hexo 官方文档:#front-matter

查看全部取值

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题(在group列表中显示)Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
permalink覆盖文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
meta文章或页面的meta信息Bool, Arraytheme.layout.*.meta
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]

layout:post 时特有的字段:

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue
top是否置顶Boolfalse

author

字段含义值类型默认值
name作者名Stringconfig.author
avatar头像Stringconfig.avatar
url链接Stringconfig.url

music

字段是否必须值类型
servernetease, tencent, kugou, xiami, baidu
typesong, playlist, album, search, artist
idsong id / playlist id / album id / search keyword

独立页面

除了归档页面是自动生成的,其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的,并且初始化的时候已经生成,路径如下:

blog/_config.yml
1
2
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
1
2
3
4
5
6
7
8
9
10
11
12
---
layout: page
title: 关于
meta:
header: []
footer: []
sidebar: []
valine:
placeholder: 有什么想对我说的呢?
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
1
2
3
4
5
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
1
2
3
4
5
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
1
2
3
4
5
---
layout: list
group: mylist
index: true
---

结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。

友链页面

Create file if not exists: source/friends/index.md
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
26
27
28
29
30
31
32
33
---
layout: links # 必须
title: 我的朋友们 # 可选,这是友链页的标题
links:
- group: 分组1
icon: fas fa-user-tie
desc: 这个分组的描述
items:
- name: # 博客名
avatar: # 头像链接
url: # 博客链接
backgroundColor: '#3E74C9' # 卡片背景颜色
textColor: '#fff' # 卡片文字颜色
tags: [标签1, 标签2] # 标签
desc: 描述文字
- group: 分组2
icon: fas fa-user-tie
desc: 这个分组的描述
items:
- name: # 博客名
avatar: # 头像链接
url: # 博客链接
backgroundColor: '#3E74C9' # 卡片背景颜色
textColor: '#fff' # 卡片文字颜色
tags: [标签1, 标签2] # 标签
desc: 描述文字
---

这里写友链上方的内容。

<!-- more -->

这里可以写友链页面下方的文字备注,例如自己的友链规范、示例等。

姓名、头像、链接是必填项,其它选填。

404页面

Create file if not exists: source/404.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
header: []
footer: []
sidebar: []
valine:
path: /404.html
placeholder: 请留言告诉我您要访问哪个页面找不到了
---
{% p center huge, 404 %}
{% p center bold, 很抱歉,您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

页面元素排列

默认是文章+评论:

front-matter
1
2
3
---
body: [article, comments]
---

如果你想把相关文章卡片显示在评论前,可以这样写:

front-matter
1
2
3
---
body: [article, related_posts, comments]
---

如果想全局修改,在主题配置文件中的 layout.on_page.body 中设置。

文章属性

文章置顶

在 front-matter 中设置以下值:

front-matter
1
top: true

如果想自定义置顶标签的文字,可以直接设置为字符串,例如:

front-matter
1
top: 近期更新

文章分类

多个分类有两种关系,一种是层级(等同于文件夹),一种是并列(等同于标签)。

多级分类:

front-matter
1
2
3
---
categories: [分类A, 分类B]
---

或者

front-matter
1
2
3
4
5
---
categories:
- 分类A
- 分类B
---

并列分类

front-matter
1
2
3
categories:
- [分类A]
- [分类B]

多级+并列分类

front-matter
1
2
3
categories:
- [分类A, 分类B]
- [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->,前面的部分即为摘要。

某篇文章源码
1
2
3
4
5
6
7
8
9
10
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意<!-- more --> 前后一定要有空行,不然可能导致显示错位。

设置文章作者

由于支持多作者共同维护一个博客,所以可以设置单独一篇文章的作者:

front-matter
1
2
3
4
5
6
---
author:
name: 作者
avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
url: https://baidu.com
---

显示迷你音乐播放器

标题右边显示迷你音乐播放器,支持的字段有:servertypeid

front-matter
1
2
3
4
5
6
---
music:
server: netease # netease, tencent, kugou, xiami, baidu
type: song # song, playlist, album, search, artist
id: 16846091 # song id / playlist id / album id / search keyword
---

实际效果见: #contributors

显示 meta 标签

文章顶部和底部的日期、分类、更新日期、标签、分享等属于 meta 标签。
顶部的为 header,底部的为 footer,取值见主题配置文件中的 meta 库。

front-matter
1
2
3
4
5
6
7
8
---
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
meta:
header: [title, author, date, category, counter, top]
footer: [updated, tags, share]
---

像404、关于页面就可以完全隐藏:

front-matter
1
2
3
4
5
---
meta:
header: []
footer: []
---

居中标题模式

如果标题居中且下方不想显示任何 meta 信息,可以这样设置:

front-matter
1
2
3
4
---
meta:
header: [centertitle]
---

标题右边显示缩略图

front-matter
1
2
3
---
thumbnail: https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png
---

缩略图仅在文章列表和文章页面显示,不会在归档页面显示。

标题右边显示图标

front-matter
1
2
3
---
icons: [fas fa-fire red, fas fa-star green]
---

图标仅在归档页面中显示,可以用来标注热门文章。

可以通过 red / blue / green / yellow / orange / theme / accent 来设置图标的颜色

meta 区域显示外链按钮

例如当前文档页面的设置:

front-matter
1
2
3
4
5
6
7
8
9
---
meta:
footer: [btns]
btns:
repo: https://github.com/xaoxuu/hexo-theme-volantis
bug: https://github.com/xaoxuu/hexo-theme-volantis/issues/
doubt: https://github.com/xaoxuu/hexo-theme-volantis/issues/
idea: https://github.com/xaoxuu/hexo-theme-volantis/issues/
---

按钮的颜色、图标、标题在主题配置文件中设置。

是否要显示封面

如果某个页面需要封面,可以这样写:

front-matter
1
2
3
---
cover: true
---

引入外部文章

利用 permalink,搭配自定义的文章作者信息,你可以在文章列表中显示外部文章或者网址,例如:

front-matter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: post
date: 2017-07-05
title: [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
- Hexo
author:
name: xaoxuu
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
url: https://xaoxuu.com
permalink: https://xaoxuu.com/blog/2017-07-05-hexo-blog/
---

![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png)

显示侧边栏

通过自由设置边栏卡片来删减对应页面的冗余信息,提高有价值的信息在页面中的权重。

如果某个页面不需要侧边栏,可以这样写:

front-matter
1
2
3
---
sidebar: []
---

某个页面想指定显示某几个侧边栏,就这样写:

front-matter
1
2
3
---
sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件
---

关闭评论

可以

front-matter
1
2
3
---
comments: false
---

也可以

front-matter
1
2
3
---
body: [article]
---

只显示留言板

如果你想创建一个只有留言板的页面

front-matter
1
2
3
---
body: [comments]
---



向开发者反馈问题

评论