hexo写作手册

大部分内容引用自 Hexo 和 Volantis 官方文档

Hexo

Front-matter

字段	含义	值类型	默认值	备注
layout	布局模版	String	post,page,docs	独立页面,文章页面,文档页面
title	页面标题	String	-	与 title 共同存在时，不显示标题
seo_title	网页标题	String	page.title
short_title	页面标题（在group列表中显示）	String	page.title
date	创建时间	Date	文件创建时间
updated	更新日期	Date	文件修改时间
link	外部文章网址	String	-	去源站阅读
music	内部音乐控件	[Object]	-
robots	robots	String	-
keywords	页面关键词	String	-
description	页面描述、摘要	String	-
cover	是否显示封面	Bool	true	强制指定时可以覆盖主题封面配置
top_meta	是否显示文章或页面顶部的meta信息	Bool	true	顶部 meta 信息
bottom_meta	是否显示文章或页面底部的meta信息	Bool	true	底部 meta 信息
sidebar	页面侧边栏	Bool, Array	theme.layout.*.sidebar	手动指定侧边栏
body	页面主体元素	Array	theme.layout.on_page.body
mathjax	是否渲染公式	Bool, String	false
thumbnail	缩略图	String	false	显示在文章页右上角
icons	图标	Array	[]	显示在归档页
pin	是否置顶	Bool	false
headimg	文章头图	url	-	目前修改为只在列表页显示
comments	是否显示评论	Bool	true
archive	是否归档	Bool	true	是否出现在归档页
indent	是否首行缩进	Bool	false	自定义修改：缩进 2 字符

模板

title: 文章名称
seo_title: seo名称
toc: true            # 是否生成目录
indent: true         # 是否首行缩进
comments: true       # 是否允许评论
archive: true        # 是否显示在归档
cover: false         # 是否显示封面
mathjax: false       # 是否渲染公式
pin: false           # 是否首页置顶
top_meta: false      # 是否显示顶部信息
bottom_meta: false   # 是否显示尾部信息
sidebar: [toc]
tag:
  - 标签一
  - 标签二
categories: 分组
keywords: 文章关键词
date: 2021-13-13 00:00
updated: 2021-13-13 00:00
description: 文章摘要
icons: [fas fa-fire red, fas fa-star green]
references:
  - title: 参考资料名称
    url: https://参考资料地址
headimg: https://文章头图
thumbnail: https://右侧缩略图

分类和标签

只有文章支持分类和标签，可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次

分类方法的分歧

Hexo 不支持指定多个同级分类，如下面的方法：

1
2
3

categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为文章选择尽可能准确的分类

如果需要为文章添加多个分类，可以使用下面的方法

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类

Writing

可以执行下列命令来创建一篇新文章或者新的页面

1	$ hexo new [layout] <title>

可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局

Layout

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹

布局	路径
`post`	`source/_posts`
`page`	`source`
`draft`	`source/_drafts`

Disabling layout

If you don’t want an article (post/page) to be processed with a theme, set layout: false in its front-matter. Refer to this section for more details.

Name

Hexo 默认以标题做为文件名称，但可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章

变量	描述
`:title`	标题（小写，空格将会被替换为短杠）
`:year`	建立的年份，比如， `2015`
`:month`	建立的月份（有前导零），比如， `04`
`:i_month`	建立的月份（无前导零），比如， `4`
`:day`	建立的日期（有前导零），比如， `07`
`:i_day`	建立的日期（无前导零），比如， `7`

Draft

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局

1	$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿

Scaffold

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

1	$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量	描述
`layout`	布局
`title`	标题
`date`	文件建立日期

Supported Formats

Hexo 支持以任何格式书写文章，只要安装了相应的渲染插件

例如，Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs，因此你不仅可以用 Markdown 写作，你还可以用 EJS 写作。如果你安装了 hexo-renderer-pug，你甚至可以用 Pug 模板语言书写文章

只需要将文章的扩展名从 md 改成 ejs，Hexo 就会使用 hexo-renderer-ejs 渲染这个文件，其他格式同理

Volantis

布局模板

layout

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

page & post & docs

这三种页面相同，但是有以下细微区别：

post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会
post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块
docs 文章末尾最多可以显示「参考资料」一个模块

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

标签插件

Text

这是一些文本样式标签：

带下划线的文本

1	带 {% u 下划线 %} 的文本

带着重号的文本

1	带 {% emp 着重号 %} 的文本

带波浪线的文本

1	带 {% wavy 波浪线 %} 的文本

带~~删除线~~的文本

1	带 {% del 删除线 %} 的文本

键盘样式的文本 command + D

1	键盘样式的文本 {% kbd command %} + {% kbd D %}

密码样式的文本：这里没有验证码

1	密码样式的文本：{% psw 这里没有验证码 %}

Span

彩色文字

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

超大号文字

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

Volantis A Wonderful Theme for Hexo

上述示例的源码

#### 彩色文字

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

#### 超大号文字

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

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

可以支持的参数

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

字体

1	logo, code

颜色

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

大小

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

对齐方向

1	left, center, right

P

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

演示效果

彩色文字

在一段话中方便插入各种颜色的标签，包括：

红色

、

黄色

、

绿色

、

青色

、

蓝色

、

灰色

超大号文字

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

Volantis

A Wonderful Theme for Hexo

上述示例的源码

#### 彩色文字

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

#### 超大号文字

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

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

可以支持的参数

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

字体

1	logo, code

颜色

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

大小

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

对齐方向

1	left, center, right

Note

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法

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

演示效果

经典用法

可以在配置文件中设置默认样式，为简单的一句话提供最的简便写法。

note quote 适合引用一段话

note info 默认主题色，适合中性的信息

note warning 默认黄色，适合警告性的信息

note error/danger 默认红色，适合危险性的信息

note done/success 默认绿色，适合正确操作的信息

上述示例的源码

example:COPY#### 经典用法

{% note, 可以在配置文件中设置默认样式，为简单的一句话提供最的简便写法。 %}
{% note quote, note quote 适合引用一段话 %}
{% note info, note info 默认主题色，适合中性的信息 %}
{% note warning, note warning 默认黄色，适合警告性的信息 %}
{% note danger, note error/danger 默认红色，适合危险性的信息 %}
{% note success, note done/success 默认绿色，适合正确操作的信息 %}

#### 更多图标

这些都是默认样式，可以手动加上颜色：

{% note radiation, note radiation 默认样式 %}
{% note radiation yellow, note radiation yellow 可以加上颜色 %}
{% note bug red, note bug red 说明还存在的一些故障 %}
{% note link green, note link green 可以放置一些链接 %}
{% note paperclip blue, note paperclip blue 放置一些附件链接 %}
{% note todo, note todo 待办事项 %}
{% note guide clear, note guide clear 可以加上一段向导 %}
{% note download, note download 可以放置下载链接 %}
{% note message gray, note message gray 一段消息 %}
{% note up, note up 可以说明如何进行更新 %}
{% note undo light, note undo light 可以说明如何撤销或者回退 %}

可以支持的参数

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

图标

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

颜色

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

Noteblock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法

1
2
3

{% noteblock 样式参数（可选）, 标题（可选） %}
文本段落
{% endnoteblock %}

演示效果

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

noteblock是引起bug的原因

标题（可选）

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

嵌套测试：请坐和放宽，我正在帮你搞定一切…

Folding 测试：点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

上述示例的源码

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

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

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

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

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

{% endfolding %}
{% endnoteblock %}

可以支持的参数

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

图标

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

颜色

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

Checkbox

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

演示效果

纯文本测试

支持简单的 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	red, yellow, green, cyan, blue

样式

1	plus, minus, times

选中状态

checked

Radio

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

演示效果

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

上述示例的源码

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

可以支持的参数

颜色

1	red, yellow, green, cyan, blue

选中状态

checked

Timeline

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

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

正文内容

{% endtimenode %}

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

正文内容

{% endtimenode %}

{% endtimeline %}

演示效果

2020-07-24 2.6.6 -> 3.0

如果有 hexo-lazyload-image 插件，需要删除并重新安装最新版本，设置 lazyload.isSPA: true。
2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 use_cdn: true 则需要删除。
2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
2.x 版本的置顶 top: true 改为了 pin: true，并且同样适用于 layout: page 的页面。
如果使用了 hexo-offline 插件，建议卸载，3.0 版本默认开启了 pjax 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

全局搜索 seotitle 并替换为 seo_title。
group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
group 组件的列表名优先显示文章的 short_title 其次是 title。

上述示例的源码

{% timeline %}

{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}

1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。
2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。
3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。
5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。

{% endtimenode %}

{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}

不需要额外处理。

{% endtimenode %}

{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}

1. 全局搜索 `seotitle` 并替换为 `seo_title`。
2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。
2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。

{% endtimenode %}

{% endtimeline %}

Link

1	{% link 标题, 链接, 图片链接（可选） %}

演示效果

如何参与项目

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

Button

这个页面的标签将会在不久后重构

基础按钮

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

可以支持的参数

样式参数

1	regular, large, center

图标

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

演示效果

不设置任何参数的按钮适合融入段落中。 regular 按钮适合独立于段落之外：示例博客 large 按钮更具有强调作用，建议搭配 center 使用：开始使用 ###### 上述示例的源码

不设置任何参数的 {% 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 %}

##### 富文本按钮

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

###### 可以支持的参数样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开 - 圆角样式默认为方形

1	rounded, circle

- 布局方式默认为自动宽度，适合视野内只有一两个的情况 | 参数 | 含义 | | ------ | -------------------------------------- | | wide | 宽一点的按钮 | | fill | 填充布局，自动铺满至少一行，多了会换行 | | center | 居中，按钮之间是固定间距 | | around | 居中分散 | | grid2 | 等宽最多2列，屏幕变窄会适当减少列数 | | grid3 | 等宽最多3列，屏幕变窄会适当减少列数 | | grid4 | 等宽最多4列，屏幕变窄会适当减少列数 | | grid5 | 等宽最多5列，屏幕变窄会适当减少列数 | 增加文字样式可以在容器内增加 `标题` 和 `

描述文字

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

xaoxuu

或者含有图标的按钮：

下载源码查看文档

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

心率管家

专业版

心率管家

免费版

上述示例的源码

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

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

Ghcard

1 2	{% ghcard 用户名, 其它参数（可选） %} {% ghcard 用户名/仓库, 其它参数（可选） %}

用户信息卡片

上述示例的源码

| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |
| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |
| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |

仓库信息卡片

上述示例的源码

| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |
| -- | -- |
| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

Site

网站卡片可以显示网站截图、logo、标题、描述，使用方法和友链标签一模一样，唯一的区别是数据文件名称为 sites.yml，可以和友链数据混用，通过分组过滤实现不一样的效果

1	{% sites only:community_team %}

Dropmenu

可以支持的参数

容器

1
2
3

{% menu 前缀（可省略）, 标题, 后缀（可省略） %}
菜单内容
{% endmenu %}

菜单内容

菜单项

1	{% menuitem 文本, 链接, 图标 %}

分割线

1	{% menuitem hr %}

子菜单

1
2
3

{% submenu 嵌套菜单, 图标 %}
菜单内容
{% endsubmenu %}

演示效果

示例1

下拉菜单

有疑问？

示例2

这个是

下拉菜单

有疑问？

示例3

这个是

下拉菜单

有疑问？

的示例效果。

上述示例的源码

示例1

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

示例2

1
2
3

{% menu 这个是, 下拉菜单 %}
（同上）
{% endmenu %}

示例3

1
2
3

{% menu 这个是, 下拉菜单, 的示例效果。 %}
（同上）
{% endmenu %}

Tab

此插件移植自 NexT #tabs

{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

。。。

！！！

上述示例的源码

{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

Folding

1
2
3

{% folding 参数（可选）, 标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

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

查看代码测试

查看列表测试

haha
hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

上述示例的源码

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

可以支持的参数

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

颜色

1	blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开

Inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情

1	{% inlineimage 图片链接, height=高度（可选） %}

演示效果

这是一段话

这又是一段话

上述示例的源码

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 %} 一段话

可以支持的参数

高度

1	height=20px

Image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度

1	{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

演示效果

添加描述：

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

指定宽度：

指定宽度并添加描述：

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

设置占位背景色：

优化不同宽度浏览的观感

上述示例的源码

添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

可以支持的参数

图片宽高度

1	width=300px, height=32px

图片描述

alt=图片描述

占位背景色

1	bg=#f2f2f2

Gallery

Gallery 标签是一种针对一组图片应用场景的标签

{% gallery 参数, 列数 %}
![图片描述](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)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

多行多个图片（每行2～8个图片）

上述示例的源码

一行一个图片

1
2
3

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

一行多个图片（不换行）

{% gallery %}
![图片描述](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)
{% endgallery %}

多行多个图片（每行2～8个图片）

{% gallery 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)
{% endgallery %}

可以支持的参数

对齐方向

1	left, center, right

缩放

stretch

列数

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

Audio

1	{% audio 音频链接 %}

演示效果

上述示例的源码

1	{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

Video

1	{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

100%宽度

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

50%宽度

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

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

可以支持的参数

对齐方向

1	left, center, right

列数

逗号后面直接写列数，支持 1 ～ 4 列

Frame

这是一个能够将图片或者视频套入设备框架中的标签，可以用来更优雅地显示截图、录屏

1 2	{% frame 框架名 \| img=图片链接 \| alt=图片描述（可选） \| part=top/bottom（可选） %} {% frame 框架名 \| video=视频链接 \| part=top/bottom（可选） %}

演示效果

上述示例的源码

1	{% frame iphone11 \| img=https://7.dusays.com/2020/09/28/baa33914a34ec.jpg \| video=https://7.dusays.com/2020/09/28/39db723f1e200.mp4 \| part=top %}

在这个示例中同时出现了 img 和 video 那么它就是一个带有封面的视频，在视频加载完成之前会先显示视频封面

设备框架

目前支持的有：

iphone11

如果您有以下其它设备框架图(svg)，欢迎 PR 兼容

1	android, ipad, macbook, watch

剪裁

通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分，否则将显示完整的框架及其中的图片/视频

Aplayer

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

1	npm i -S hexo-tag-aplayer

使用方法：

hexo-tag-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer

Issues

Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局在5.0版本移除被 sites标签 friends标签 contributors标签替代

issues 标签在5.0版本移除被 sites标签 friends标签 contributors标签替代

1	{% issues type \| api=url \| group=key:value1,value2（可选） %}

类型

根据需求不同，会将 issues 内容解析成不同的 HTML 标签，目前支持的类型有：

timeline: 解析成 timeline 标签，issue 的标题对应 timeline 的时间， issue 的内容对应 timeline 的内容。
sites

: 解析成 sites 标签，需要有 JSON 代码块：

COPY{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "keywords": ""
}

API

传可以调得通的 URL ，例如：

1
2

api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active
api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active

分组

sites 类型的 issues 默认不分组，如果需要分组，可指定分组依据「key」，和分组白名单「value1」「value2」等，例如：

1	group=version:v4,v3,v2

这个参数的作用就是，筛选出 JSON 中包含 "version": "v4" 或者 "version": "v3" 或者 "version": "v2" 的数据，并分组显示

示例

时间线

1	{% issues timeline \| api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %}

显示效果

对应的仓库链接：

{% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %}

友链

1
2

{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

上例中的 labels=active 参数可以控制默认的 issue 不显示，只有自己审核通过添加了 active 标签之后才会显示。上述示例对应的仓库链接：

{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

分组

这是主题官网的「示例博客」页面的数据：

1	{% issues sites \| api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 \| group=version:版本：^4.0,版本：^3.0,版本：^2.0 %}

上述示例对应的仓库链接：

{% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:版本：^4.0,版本：^3.0,版本：^2.0 %}

Hexo 通用标签

在文章中使用 ，那么  之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档：

Hexo 官方文档 #标签插件

https://hexo.io/zh-cn/docs/tag-plugins

hexo写作手册

Hexo

Front-matter

模板

分类和标签

分类方法的分歧

Writing

Layout

Name

Draft

Scaffold

Supported Formats

Volantis

布局模板

page & post & docs

标签插件

Text

Span

彩色文字

超大号文字

上述示例的源码

可以支持的参数

字体

颜色

大小

对齐方向

P

演示效果

彩色文字

超大号文字

上述示例的源码

可以支持的参数

字体

颜色

大小

对齐方向

Note

演示效果

经典用法

更多图标

上述示例的源码

可以支持的参数

图标

颜色

Noteblock

演示效果

上述示例的源码

可以支持的参数

图标

颜色

Checkbox

演示效果

上述示例的源码

可以支持的参数

颜色

样式

选中状态

Radio

演示效果

上述示例的源码

可以支持的参数

颜色

选中状态

Timeline

演示效果

上述示例的源码

Link

演示效果

上述示例的源码

Button

基础按钮

可以支持的参数

演示效果

上述示例的源码

Ghcard

用户信息卡片

上述示例的源码

仓库信息卡片

上述示例的源码

更多参数选择