主题支持的标签。

点击查看

文本属性

1
<p 属性参数>文本内容</p>

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

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

blog/source/_posts/example.md:
1
在一段话中方便插入各种颜色的标签,包括:<red>红色</red><yellow>黄色</yellow><green>绿色</green><cyan>青色</cyan><blue>蓝色</blue><gray>灰色</gray>

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

Volantis

A Wonderful Theme for Hexo

blog/source/_posts/example.md:
1
2
<p center large>Volantis</p>
<p center small>A Wonderful Theme for Hexo</p>

目前支持的尺寸有:smalllargehuge,布局有:leftcenterright

Note

Note 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。

1
2
3
4
5
{% note 参数 %}

文本段落

{% endnote %}

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

参数位置可以写 typecolor ,多个参数用空格隔开

colorful type
1
quote, info, warning, done/success, error/danger
more type
1
radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo
color
1
clear, light, gray, red, yellow, green, cyan, blue

note quote

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

note

正在处理一些事情

note success

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

note warning

不要说我们没有警告过你

note red bug

我们都有不顺利的时候

note undo light

我们都有不顺利的时候

基础按钮

1
<btn 参数>[按钮](/)</btn>

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

可选的参数有: regularlargecenter

不设置参数
1
<btn>[按钮](/)</btn>
regular button
1
<btn regular>[<i class='fas fa-play-circle'></i> 示例博客](https://xaoxuu.com)</btn>
large center button
1
<btn center large>[<i class='fas fa-download'></i> 开始使用](/)</btn>

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

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

示例博客

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

开始使用

富文本按钮

1
2
3
{% btns 参数 %}
[![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png)按钮标题](/)
{% endbtns %}

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

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


图片样式

  • 默认为方形
  • 圆角矩形(rounded),适合app图标。
  • 圆形(circle),适合头像。
示例
1
2
3
{% btns circle %}
[![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png)xaoxuu](/)
{% endbtns %}


布局方式

  • 默认为自动宽度,适合视野内只有一两个的情况,多了显乱。
  • 宽一点的按钮(wide)。
  • 填充布局(fill),自动铺满至少一行,多了会换行。
  • 居中(center),按钮之间是固定间距。
  • 居中分散(around)。
  • 网格布局(grid3),最多3列,屏幕变窄会适当减少列数。
  • 网格布局(grid4),最多4列,屏幕变窄会适当减少列数。
  • 网格布局(grid5),最多5列,屏幕变窄会适当减少列数。
示例
1
2
3
4
{% btns rounded grid5 %}
[<i class='fas fa-download'></i> 下载源码](/)
[<i class='fas fa-book-open'></i> 查看文档](/)
{% endbtns %}


增加文字样式

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

图文并茂的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
圆形图标 + 标题 + 描述 + 图片 + 网格4列 + 居中
{% 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>专业版</p>
<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>免费版</p>
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

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

或者含有图标的按钮:

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

Fancybox

blog/source/_posts/example.md:
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 %}

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

对齐方向
默认居中,参数设为 left 则左对齐。


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

一行一个图片

一行多个图片(不换行)



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








Tab

这部分功能借鉴自 NexT 主题。

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

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

测试 fancybox :
1
2
3
4
5
6
{% fancybox %}
![](https://i.loli.net/2020/03/18/1TpiUwhuskGm5SV.png)
![](https://i.loli.net/2020/03/18/LZwBtR5YO4zQH9A.png)
![](https://i.loli.net/2020/03/18/ySw8zGHRBrDtUg7.png)
![](https://i.loli.net/2020/03/18/5QTMYsScOz41Vhg.png)
{% endfancybox %}




支持的语法格式有限,请尽量不要写太过复杂的东西。有些格式不能识别的话,可以尝试增加空行。

Folding box

1
2
3
4
5
{% folding 标题, 参数 %}

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

{% endfolding %}

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

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

颜色
1
blue, cyan, green, yellow, red

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

查看图片测试

查看默认打开的折叠框

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

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

查看代码测试

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

hahaha

渲染公式(MathJax)

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

blog/source/_posts/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}
$$

如果公式仍无法正确渲染可以阅读 @MicDZ 的这篇文章:《在material-x上使用KaTeX》

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];
blog/source/_posts/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])
blog/source/_posts/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)
blog/source/_posts/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

blog/source/_posts/example.md:
1
2
3
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

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

Gist

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

blog/source/_posts/example.md:
1
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

blog/source/_posts/example.md:
1
{% iframe url [width] [height] %}

Image

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

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

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

blog/source/_posts/example.md:
1
{% link text url [external] [title] %}

Include Code

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

blog/source/_posts/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] %}
示例

引用这篇文章:

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

文章摘要和截断

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


布局模板

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

post 页面几乎与 page 页面相同,但是,post 页面更适用于文章,网页向下滚动时导航栏会上翻显出文章标题。

front-matter

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

查看全部取值
字段含义值类型默认值
layout布局模版String-
title标题String-
seotitle网页标题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
16
17
18
19
20
21
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
header: []
footer: []
sidebar: []
valine:
path: /404.html
placeholder: 请留言告诉我您要访问哪个页面找不到了
---

<center>
<p huge>404</p>

<b>很抱歉,您访问的页面不存在</b>

可能是输入地址有误或该地址已被删除

</center>

页面元素排列

默认是文章+评论:

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: []
---

标题右边显示缩略图

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/new?assignees=&labels=BUG&template=bug-report.md
doubt: https://github.com/xaoxuu/hexo-theme-volantis/issues/new?labels=疑问&template=question-report.md
idea: https://github.com/xaoxuu/hexo-theme-volantis/issues/new?assignees=&labels=建议&template=feature-request.md
---

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

是否要显示封面

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

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]
---

评论