该文章参考自 Akilar 的 《基于 Butterfly 的外挂标签引入》,通过整理,便于个人相关样式开发

分栏

预设选择第一个(默认)

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs %}
<!-- tab 默认名称 -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预设指定选择

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 默认名称, 2 %}
<!-- tab 分栏1 -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 分栏2 -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab 分栏3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

行内文本样式

  • 文本内容
  • 文本内容
  • 文本内容
  • 文本内容
  • 文本内容
  • 文本内容
1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}

折叠框

查看图片测试

查看代码测试
1
2
3
public static void main(String[] args) {
System.out.println("Hello,World!");
}
查看列表测试

DONE 列表显示有偏移需要修改

  • hello
  • hello
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% folding 查看图片测试 %}

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

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块(代码块没法嵌套代码块)
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- hello
- hello

{% endfolding %}

引用

simple 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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
{% 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 %}

flat 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note flat %}默认 提示块标签{% endnote %}

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

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

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

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

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

{% note danger flat %}danger 提示块标签{% endnote %}

disabled 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% note disabled %}默认 提示块标签{% endnote %}

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

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

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

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

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

{% note danger disabled %}danger 提示块标签{% endnote %}

no-icon 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note no-icon %}默认 提示块标签{% endnote %}

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% endnote %}

复选列表

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

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

单选列表

纯文本测试

支持简单的 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, 蓝色 %}

时间轴

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

链接卡片

相关网站 Icon 收集备用

1
2
3
4
{% link 哔哩哔哩, https://www.bilibili.com/, https://cdn.jsdelivr.net/gh/halo-blog/cdn-blog-img-b@master/img/bilibiliIcon.svg %}
{% link 知乎, https://www.zhihu.com/, https://cdn.jsdelivr.net/gh/halo-blog/cdn-blog-img-b@master/img/知乎icon.png %}
{% link Github, https://github.com, https://cdn.jsdelivr.net/gh/halo-blog/cdn-blog-img-b@master/img/GithubIcon.jpg %}
{% link App图标下载网站, https://api.zhheo.com/icon-finder/, https://cdn.jsdelivr.net/gh/halo-blog/cdn-blog-img-a@master/img/网站.svg %}

音频

歌曲名:これが私の生きる道 (Short-小編成 Ver.).flac

警告 播放前注意调整音量

1
{% audio http://onedrive.whl123456.top/video/%E6%88%91%E7%9A%84%E8%A7%86%E9%A2%91%E5%BA%93/%E4%BB%8E%E8%BF%9C%E6%96%B9%E5%A5%94%E8%B5%B4%E4%B8%80%E5%9C%BA.mp3 %}

改编自:これが私の生きる道——PUFFY

在 ReLIFE ED中也出现过

视频

1
2
3
4
5
{% videos, 1 %}
{% video http://onedrive.whl123456.top/video/%E6%88%91%E7%9A%84%E8%A7%86%E9%A2%91%E5%BA%93/%E7%BE%8E%E5%88%B0%E7%AA%92%E6%81%AF%E7%9A%84%E4%BA%AC%E9%98%BF%E5%B0%BC-Lifeisbeautiful.67833543.mp4 %}

{% video http://onedrive.whl123456.top/video/%E6%88%91%E7%9A%84%E8%A7%86%E9%A2%91%E5%BA%93/%E3%80%90RADWIMPS%E3%80%91%E3%80%8A%E5%A4%A9%E6%B0%94%E4%B9%8B%E5%AD%90%E3%80%8B%E7%89%87%E4%B8%AD%E6%9B%B2%E3%80%8E%E3%82%B0%E3%83%A9%E3%83%B3%E3%83%89%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%80%8F%E5%AE%8C%E6%95%B4%E7%89%88MV%E3%80%90%E4%B8%AD%E5%AD%97%E3%80%91.125772545.mp4 %}
{% endvideos %}

原视频地址: