hexo标签插件测试

追风赶月的少年
Hexo博客搭建

发布于：2022年5月7日

字数：3.8k字

时长：16分钟

前言

本文语法参考volantis4.0,博客正在使用的版本为4.3.1

问题总结如下：

1.在复选框checkbox下，选中状态比不选中状态框提前，对不齐。

2.button基础按钮那里本文写的参考有点问题，不知道哪里出了问题，但源码没错。

text

带 下划线 的文本；带 着重号 的文本；带 波浪线 的文本；带 删除线 的文本

键盘样式的文本：⌘ + D

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

源码：

1
2
3
4
5
带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本

键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}

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

span

语法：

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

效果：

彩色文字

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

超大号文字

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

A Wonderful Theme for Hexo

源码:

1
2
3
4
5
6
7
8
9
10
#### 彩色文字

在一段话中方便插入各种颜色的标签，包括：{% 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 %}

参数：

属性 可选值
字体 logo, code
颜色 red, yellow, green, cyan, blue, gray
大小 small, h4, h3, h2, h1, large, huge, ultra
对齐方向 left, center, right

p

语法：

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

效果：

彩色文字

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

红色

黄色

绿色

青色

蓝色

灰色

超大号文字

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

A Wonderful Theme for Hexo

源码：

1
2
3
4
5
6
7
8
9
10
#### 彩色文字

在一段话中方便插入各种颜色的标签，包括：{% 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 %}

参数：

属性 可选值
字体 logo, code
颜色 red, yellow, green, cyan, blue, gray
大小 small, h4, h3, h2, h1, large, huge, ultra
对齐方向 left, center, right

note

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

语法：

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

效果：

经典用法

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

note quote 适合引用一段话

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

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

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

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

#### 更多图标 这些都是默认样式，可以手动加上颜色：

note radiation 默认样式

note radiation yellow 可以加上颜色

note bug red 说明还存在的一些故障

note link green 可以放置一些链接

note paperclip blue 放置一些附件链接

note todo 待办事项

note guide clear 可以加上一段向导

note download 可以放置下载链接

note message gray 一段消息

note up 可以说明如何进行更新

note undo light 可以说明如何撤销或者回退

源码： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#### 经典用法

{% 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 | | 颜色 | clear, light, gray, red, yellow, green, cyan, blue | ### noteblock NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 语法： 
1
2
3
{% noteblock 样式参数（可选）, 标题（可选） %}
文本段落
{% endnoteblock %}
演示效果：

标题（可选）

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

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

Folding 测试： 点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% 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
颜色 clear, light, gray, red, yellow, green, cyan, blue

checkbox

语法：

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

演示效果：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

源码：

1
2
3
4
5
6
7
8
9
10
11
# 复选框
{% 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, 叉 %}

参数：

属性 可选值
颜色 red, yellow, green, cyan, blue
样式 plus, minus, times
选中状态 checked

radio

语法：

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

演示效果：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

源码：

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, 蓝色 %}

参数：

属性 可选值
颜色 red, yellow, green, cyan, blue
选中状态 checked

timeline

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 时间线标题（可选） %}

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

正文内容

{% endtimenode %}

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

正文内容

{% 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-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

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

源码：

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

语法：

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

演示效果：

如何参与项目

https://volantis.js.org/contributors/

源码：

1
{% link 如何参与项目, https://volantis.js.org/contributors/, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %}

button

基础按钮

语法：`标题` 参数如下： 样式参数： `regular, large, center` 图标： 第1个或者第2个参数包含 `fa-` 的那个被识别为图标。 效果： 不设置任何参数的 按钮 适合融入段落中。 regular 按钮适合独立于段落之外： 示例博客 large 按钮更具有强调作用，建议搭配 center 使用： 开始使用 源码： 

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/v3/getting-started/, fas fa-download %}
#### 富文本按钮 语法： 
1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
参数列表： 样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。 圆角样式： 
1
2
# 默认为方形
rounded, circle
布局方式： 默认为自动宽度，适合视野内只有一两个的情况。 | 参数 | 含义 | | ------ | ---------------------------------------- | | wide | 宽一点的按钮 | | fill | 填充布局，自动铺满至少一行，多了会换行。 | | center | 居中，按钮之间是固定间距。 | | around | 居中分散 | | grid2 | 等宽最多2列，屏幕变窄会适当减少列数。 | | grid3 | 等宽最多3列，屏幕变窄会适当减少列数。 | | grid4 | 等宽最多4列，屏幕变窄会适当减少列数。 | | grid5 | 等宽最多5列，屏幕变窄会适当减少列数。 | 增加文字样式： 可以在容器内增加 `标题` 和 `

描述文字

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

或者含有图标的按钮：

下载源码 查看文档

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

心率管家

专业版

 心率管家

免费版

源码：

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
# 如果需要显示类似「团队成员」之类的一组含有头像的链接：
{% 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 %}
# 或者含有图标的按钮：
{% 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://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 %}

ghcard

样式：

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

效果示例：

如下所示，其实就是一个4×2的表格，只不过每个格子里放的是用户信息卡片

源码：

1
2
3
4
5
6
# 用户信息卡片
| {% ghcard pistachio0812 %} | {% ghcard pistacho0812, theme=vue %} |
| -- | -- |
| {% ghcard pistachio0812, theme=buefy %} | {% ghcard pistachio0812, theme=solarized-light %} |
| {% ghcard pistachio0812, theme=onedark %} | {% ghcard pistachio0812, theme=solarized-dark %} |
| {% ghcard pistachio0812, theme=algolia %} | {% ghcard pistachio0812, theme=calm %} |

效果示例：

源码：

1
2
3
4
5
6
# 仓库信息卡片
| {% 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 %} |

更多参数选择：

1

GitHub卡片API参数

https://github.com/anuraghazra/github-readme-stats

site

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

样式：

1
{% sites only:community_team %}

dropmenu

语法

容器：

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

菜单内容：

1.菜单项

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

2.分割线

1
{% menuitem hr %}

3.子菜单

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

示例效果

示例1

下拉菜单

示例2

这个是
下拉菜单

示例3

这个是
下拉菜单
的示例效果。

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
示例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
{% menu 这个是, 下拉菜单 %}
（同上）
{% endmenu %}
示例3
{% menu 这个是, 下拉菜单, 的示例效果。 %}
（同上）
{% endmenu %}

tab

此插件移植自Next

语法：

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

演示效果：

这是栏目1

这是栏目2

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs tab-id %}

<!-- tab 栏目1 -->

这是栏目1

<!-- endtab -->

<!-- tab 栏目2 -->

这是栏目2

<!-- endtab -->

{% endtabs %}

更新于：2022年10月4日

Hexo

volantis