内置标签插件


文章摘要和截断

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

文本和段落

行内小标签

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

带下划线的文本

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

带着重号的文本

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

带波浪线的文本

{% wavy 波浪线 %}

带删除线的文本

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

键盘样式的文本

{% kbd 键盘样式的文本 %}

密码样式的文本

{% psw 密码样式的文本 %}

带下划线的文本

example.md:
带 {% u 下划线 %} 的文本

带着重号的文本

example.md:
带 {% emp 着重号 %} 的文本

带波浪线的文本

example.md:
带 {% wavy 波浪线 %} 的文本

带删除线的文本

example.md:
带 {% del 删除线 %} 的文本

键盘样式的文本

example.md:
收藏页面:{% kbd command %} + {% kbd D %}

密码样式的文本

example.md:
验证码:{% psw 这里没有验证码 %}

带下划线的文本

下划线 的文本

带着重号的文本

着重号 的文本

带波浪线的文本

波浪线 的文本

带删除线的文本

删除线 的文本

键盘样式的文本

收藏页面:command + D

密码样式的文本

验证码:这里没有验证码

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 语法

支持自定义颜色

绿色

黄色

青色

蓝色

Timeline

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

{% timeline 时间线标题 %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

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

升级小助手

2020-07-24 2.6.6 -> 3.0

  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 服务。

2020-07-24 2.6.3 -> 2.6.6

不需要额外处理。

2020-07-24 2.6.2 -> 2.6.3

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

链接按钮和菜单

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

基础按钮

请将您的 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 风格按钮

示例博客 示例博客

示例博客 示例博客

居中:

开始使用

solid 风格按钮

示例博客 示例博客

示例博客 示例博客

居中:

开始使用

富文本按钮

请将您的 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 %}

圆形图标 + 标题 + 描述 + 图片 + 网格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://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 升级至 3.0 版本以上使用。

容器

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

{% endfolding %}

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

颜色

blue, cyan, green, yellow, red

状态

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

{% folding 查看图片测试 %}

![](https://cdn.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://cdn.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 链接, 宽度(可选), 描述(可选) %}

图片宽度

阿拉伯数字 + px

example:
300px

图片描述

纯文本,不能包含引号。

example.md:
添加描述:

{% 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, 每天下课回宿舍的路,承载了太多记忆。 %}

添加描述:

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

指定宽度:

指定宽度并添加描述:

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

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

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

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



向开发者反馈问题