Butterfly主题使用案例

以下案例有部分功能是使用了hexo-butterfly-tag-plugins-plus这个模块的功能。 安装方式：npm i hexo-butterfly-tag-plugins-plus --save

标签外挂

效果展示

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class 【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
style 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

常用的标签

simple-有图标无背景色

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

{% note success simple %}
success 提示块标签
{% endnote %}

{% note info simple %}
info 提示块标签
{% endnote %}

{% note warning simple %}
warning 提示块标签
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}
modern-纯色

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note modern %}
默认 提示块标签
{% endnote %}

{% note default modern %}
default 提示块标签
{% endnote %}

{% note primary modern %}
primary 提示块标签
{% endnote %}

{% note success modern %}
success 提示块标签
{% endnote %}

{% note info modern %}
info 提示块标签
{% endnote %}

{% note warning modern %}
warning 提示块标签
{% endnote %}

{% note danger modern %}
danger 提示块标签
{% endnote %}
1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
color 【可选】顔色
(default / blue / pink / red / purple / orange / green)
icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）
simple-DIY图标白底小边

你是刷 Visa 还是 UnionPay

2023年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}
modern-DIY图标color无边

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}
flat-DIY图标color小边

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}
disabled-DIY图标无底无边

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}
效果展示

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

使用格式
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
37
38
39
40
41
42
43
44
45
46
<div class="tip">
    <p>小码同学</p>
</div>

<div class="tip success">
    <p>小码同学</p>
</div>

<div class="tip error">
    <p>小码同学</p>
</div>

<div class="tip warning">
    <p>小码同学</p>
</div>

<div class="tip wtgo">
    <p>小码同学</p>
</div>

<div class="tip ban">
    <p>小码同学</p>
</div>

<div class="tip home">
    <p>小码同学</p>
</div>

<div class="tip important">
    <p>小码同学</p>
</div>

<div class="tip ref">
    <p>小码同学</p>
</div>
<div class="tip ffa">
    <p>小码同学</p>
</div>

<div class="tip key">
    <p>小码同学</p>
</div>

<div class="tip socd">
    <p>小码同学</p>
</div>
参数
参数 备注
info(默认不写) 蓝色叹号
success 绿色打钩
error 红色X
warning 黄色叹号
wtgo 绿色闪电
ban 红色禁止
home 蓝色家
important 蛋黄叹号
ref 绿色环形
ffa 紫色设置
key 灰色钥匙
socd 黄色铃铛

分栏tab

效果展示

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

案例代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}
使用方法
1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
    • 选项卡块标签的唯一名称，不带逗号。
    • 将在#id中用作每个标签及其索引号的前缀。
    • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
    • 仅当前帖子/页面的URL必须是唯一的！
  2. [index]:
    • 活动选项卡的索引号。
    • 如果未指定，将选择第一个标签（1）。
    • 如果index为-1，则不会选择任何选项卡。
    • 可选参数。
  3. [Tab caption]:
    • 当前选项卡的标题。
    • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
    • 如果未指定标题，但指定了图标，则标题将为空。
    • 可选参数。
  4. [@icon]:
    • FontAwesome图标名称（全名，看起来像“ fas fa-font”）
    • 可以指定带空格或不带空格；
    • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
    • 可选参数。

tag-hide

请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常

使用格式：

1
2
3
{% hideToggle display,background,text-color %}
被隐藏起来的内容
{% endhideToggle %}
参数 备注
background 收缩框背景颜色
text-color 收缩框字体颜色(内容颜色正常)

颜色可用16进制，使用时，字体颜色尽量深色，字体颜色与底色对比度要高。( display 不能包含英文逗号，可用 &sbquo)

display

被隐藏起来的内容

效果展示

哪个英文字母最酷？ 因为西装裤(C装酷)

1
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
使用格式
1
{% hideInline content,display,bg,color %}
参数 备注
content 文本内容
display 按钮显示的文字 (可选)
bg 按钮的背景颜色 (可选)
color 按钮文字的颜色 (可选)
效果展示
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""}] 
1
2
3
4
5
6
{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}
{% endhideBlock %}
使用格式
1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
参数 备注
content 文本内容
display 按钮显示的文字 (可选)
bg 按钮的背景颜色 (可选)
color 按钮文字的颜色 (可选)

Butterfly虽然也有内置折叠框hideToggle标签，但是Volantis的folding折叠框更好看一些。

效果展示
查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

使用方法
1
2
3
{% folding color state, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
参数 备注
color blue, cyan, green, yellow, red
state open(可选，默认是不打开)

timeline

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
参数 解释
title 标题/时间线
color timeline 颜色
default(留空) / blue / pink / red / purple / orange / green

展示

1
2
3
4
5
{% timeline 2023 %}
<!-- timeline 01-02 -->
默认色
<!-- endtimeline -->
{% endtimeline %}

2023

01-02

这是默认色(默认是蓝色blue)

1
2
3
4
5
{% timeline 2023 %}
<!-- timeline 01-02 -->
这是默认色(默认是蓝色blue)
<!-- endtimeline -->
{% endtimeline %}

2023

01-02

这是粉红色pink

1
2
3
4
5
{% timeline 2023,pink %}
<!-- timeline 01-02 -->
这是粉红色pink
<!-- endtimeline -->
{% endtimeline %}

2023

01-02

这是红色red

1
2
3
4
5
{% timeline 2023,red %}
<!-- timeline 01-02 -->
这是红色red
<!-- endtimeline -->
{% endtimeline %}

2023

01-02

这是紫色purple

1
2
3
4
5
{% timeline 2023,purple %}
<!-- timeline 01-02 -->
这是紫色purple
<!-- endtimeline -->
{% endtimeline %}

2023

01-02

这是浅黄色orange

1
2
3
4
5
{% timeline 2023,orange %}
<!-- timeline 01-02 -->
这是浅黄色orange
<!-- endtimeline -->
{% endtimeline %}

2023

01-02

这是浅绿色green

1
2
3
4
5
{% timeline 2023,green %}
<!-- timeline 01-02 -->
这是浅绿色green 
<!-- endtimeline -->
{% endtimeline %}

inlineImg

主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。

效果展示

你看我长得漂亮不

我觉得很漂亮 

1
2
3
4
5
你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}
使用格式
1
{% inlineImg [src] [height] %}
参数 备注
src 图片链接
height 图片高度限制(可选)

文字高亮

效果展示
1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

使用方法
1
{% label text color %}
参数 解释
text 高亮文字
color 【可选】背景颜色，默认为 default default/blue/pink/red/purple/orange/green
效果展示

带 下划线 的文本
带 着重号 的文本
带 波浪线 的文本
带 删除线 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码

1
2
3
4
5
6
7
带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}

使用方法
1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
效果展示
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

Volantis

A Wonderful Theme for Hexo

1
2
3
4
5
6
7
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large  red, Volantis %}
{% span center, Volantis %}
{% span center small green, A Wonderful Theme for Hexo %}
使用方法
1
{% span location font , context %}
参数 备注
location left, center, right(必选)
font logo, code(可选)
size small, h4, h3, h2, h1, large, huge, ultra(可选)
color red,yellow,green,cyan,blue,gray(可选)
context 文本内容

友链

友情链接
那些人，那些事
小码博客
小码博客 小码博客
小码博客
小码博客 小码博客
小码博客
小码博客 小码博客
语法格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://bu.dusays.com/2023/11/04/636511250b21b.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://bu.dusays.com/2023/11/04/636511250b21b.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://bu.dusays.com/2023/11/04/636511250b21b.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
{% endflink %}

链接卡片

1
{% link 小码同学, https://blog/hikki.site, /data/img/favicon.ico %}
1
{% link 标题, 链接, 图片链接（可选） %}

按钮btns

Volantis的按钮使用的是btn和btns标签。btns和butterfly的button不冲突，但是btn会被强制渲染，导致部分参数失效,而且btn的效果还是butterfly的button更好看些。所以就只适配了btns。

使用方式
1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：rounded, circle
  2. 增加文字样式：可以在容器内增加 <b>标题</b>和<p>描述文字</p>
  3. 布局方式：
    默认为自动宽度，适合视野内只有一两个的情况。
参数 备注
wide 宽一点的按钮
fill 填充布局，自动铺满至少一行，多了会换行
center 居中，按钮之间是固定间距
around 居中分散
grid2 等宽最多2列，屏幕变窄会适当减少列数
grid3 等宽最多3列，屏幕变窄会适当减少列数
grid4 等宽最多4列，屏幕变窄会适当减少列数
grid5 等宽最多5列，屏幕变窄会适当减少列数

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

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

或者含有图标的按钮：

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

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

心率管家

专业版

 心率管家

免费版

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

GitHub卡片 GhCark

ghcard使用了github-readme-stats的API，支持直接使用markdown语法来写。

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

更多参数可以参考：

使用,分割各个参数。写法为：参数名=参数值
以下只写几个常用参数值。

参数名 取值 释义
hide stars,commits,prs,issues,contribs 隐藏指定统计
count_private true 将私人项目贡献添加到总提交计数中
show_icons true 显示图标
theme 请查阅Available Themes 主题

网站卡片 sites

xaoxuu
Colsrch
Linhk1606
1
2
3
4
5
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}
1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

插入视频、音频

效果展示
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
使用方法
1
{% audio 音频链接 %}
效果展示
  1. 100%宽度
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
  1. 50%宽度
1
2
3
4
5
6
{% 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 %}
  1. 25%宽度
1
2
3
4
5
6
7
8
9
{% videos, 4,right %}
{% 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
2
3
4
{% videos,列数  %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}
  1. 列数：支持1~4列

题注 & 注音

引入题注，我们在写文章时，经常需要用到对某个词进行解释，这是题注就可以很好的解决这个问题。

小码博客[1]

小码公众号[2]

把鼠标放到数字上面试试[3]

使用方法

1
2
3
4
5
6
7
8
9
小码博客[^1]

小码公众号[^2]

把鼠标放到数字上面试试[^3]

[^1]: https://blog.hikki.site
[^2]: 小码公众号叫“小码同学”
[^3]: 这就是题注

文章加密

安装插件

1
npm install --save hexo-blog-encrypt

博客配置

在博客配置文件_config.yml文件添加如下：

1
2
3
# 文章加密
encrypt:
    enable: true

设置密码

1
2
3
4
5
6
7
---
title: Hello World
date: 2020-03-13 21:12:21
password: 123456
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好，这里需要密码。
---

  1. https://blog.hikki.site ↩︎

  2. 小码公众号叫“小码同学” ↩︎

  3. 这就是题注 ↩︎