Solitude 主题 Plugin Tags 部分移植来自店长的 hexo-butterfly-tag-plugins-plus，转载请注明出处。
使用方法和配置项基本相同

按钮 btn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认 style 时）
按钮字体和边框顔色(outline 时)
bg-default/bg-blue/bg-pink/bg-red/bg-purple/bg-orange/bg-green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为 line
block/留空
[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空
参数 含义
url 链接
text 按钮文字
icon [可选] 图标
color [可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green
layout [可选] 按钮佈局 默认为 line block/留空
position [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空
size [可选] 按钮大小 larger/留空

一组按钮

This is my website, click the btn

This is my website, click the btn

This is my website, click the btn

This is my website, click the btn

This is my website, click the btn

调整位置或大小

more than one btn in center

居中按钮

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
> 一组按钮

This is my website, click the btn {% btn 'https://efu.me/',Efu %}
This is my website, click the btn {% btn 'https://efu.me/',Efu,st-lightbulb-line %}
This is my website, click the btn {% btn 'https://efu.me/',Efu,,outline %}
This is my website, click the btn {% btn 'https://efu.me/',Solitude,st-lightbulb-line,outline %}
This is my website, click the btn {% btn 'https://efu.me/',Solitude,st-lightbulb-line,larger %}

> 调整位置或大小

{% btn 'https://efu.me/',Efu,st-lightbulb-line,block %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,block center larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,block right outline larger %}

> more than one btn in center

<span>
{% btn 'https://efu.me/',Efu,st-lightbulb-line,larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,blue larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,pink larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,red larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,purple larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,orange larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,green larger %}
</span>

> 居中按钮

<div class="btn-center">
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline blue larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline pink larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline red larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline purple larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline orange larger %}
{% btn 'https://efu.me/',Efu,st-lightbulb-line,outline green larger %}
</div>

单张图片 image

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
  1. 图片宽度高度：width=300px, height=32px
  2. 图片描述：alt=图片描述
  3. 占位背景色：bg=#f2f2f2

添加描述

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

指定宽度

设置占位背景色

优化不同宽度浏览的观感
优化不同宽度浏览的观感
1
2
3
4
5
6
7
8
9
10
11
> 添加描述

{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, alt=每天下课回宿舍的路，没有什么故事。 %}

> 指定宽度

{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px %}

> 设置占位背景色

{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

行内图片 inlineimage

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

这是 一段话。

这又是 一段话。

1
2
3
这是 {% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %} 一段话。

这又是 {% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %} 一段话。

label 标签

1
{% label text color %}
参数 释义
text 文字
color 【可选】背景颜色，默认为 default，default/blue/pink/red/purple/orange/green

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

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

直链音频 audio

1
{% audio 音频链接 %}
1
{% audio 音频链接 %}

直链视频 video

1
{% video 视频链接 %}
  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。

默认

50% 宽度

25 %

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
> 默认

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

段落文本 p

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right

red left

yellow center

green right

center h1

center ultra

1
2
3
4
5
6
7
8
9
10

{% p red left, red left %}

{% p yellow center, yellow center %}

{% p green right, green right %}

{% p center h1, center h1 %}

{% p center ultra, center ultra %}

Note (Bootstrap Callout)

1
2
3
{% note [class] %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, libero.
{% endnote %}
参数 含义
class 显示值

显示值：（中间空格）

  • 配色
    • default / primary / success / info / warning / danger
  • 样式
    • simple / modern / flat / disabled
  • 图标
    • noicon

默认样式

Demo 1 - default

Simple 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

Modern 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

Flat 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

Disabled 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
默认样式：
{% note default %}
Demo 1 - default
{% endnote %}

1. Simple 样式
   {% note default simple %}
   Demo 1 - default
   {% endnote %}

{% note primary simple %}
Demo 2 - primary
{% endnote %}

{% note success simple %}
Demo 3 - success
{% endnote %}

{% note info simple %}
Demo 4 - info
{% endnote %}

{% note warning simple %}
Demo 5 - warning
{% endnote %}

{% note danger simple %}
Demo 6 - danger
{% endnote %}

2. Modern 样式
   {% note default modern %}
   Demo 1 - default
   {% endnote %}

{% note primary modern %}
Demo 2 - primary
{% endnote %}

{% note success modern %}
Demo 3 - success
{% endnote %}

{% note info modern %}
Demo 4 - info
{% endnote %}

{% note warning modern %}
Demo 5 - warning
{% endnote %}

{% note danger modern %}
Demo 6 - danger
{% endnote %}

3. Flat 样式
   {% note default flat %}
   Demo 1 - default
   {% endnote %}

{% note primary flat %}
Demo 2 - primary
{% endnote %}

{% note success flat %}
Demo 3 - success
{% endnote %}

{% note info flat %}
Demo 4 - info
{% endnote %}

{% note warning flat %}
Demo 5 - warning
{% endnote %}

{% note danger flat %}
Demo 6 - danger
{% endnote %}

3. Disabled 样式
   {% note default disabled %}
   Demo 1 - default
   {% endnote %}

{% note primary disabled %}
Demo 2 - primary
{% endnote %}

{% note success disabled %}
Demo 3 - success
{% endnote %}

{% note info disabled %}
Demo 4 - info
{% endnote %}

{% note warning disabled %}
Demo 5 - warning
{% endnote %}

{% note danger disabled %}
Demo 6 - danger
{% endnote %}

分栏 tabs

分栏支持内置codesign图标，如果开启了 customicon 则可以使用自定义的图标，否则只能使用默内置codesign图标

1
2
3
4
5
6
7
8
9
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}
  1. Unique name：不带逗号的选项卡块标记的唯一名称。
    1. 将在 #id 中用作每个选项卡及其索引号的前缀。
    2. 如果名称中有空格，则对于生成 #id 所有空格都将替换为破折号。
    3. 仅帖子/页面的当前网址必须是唯一的！
  2. [index]：活动选项卡的索引号。
    1. 如果未指定，将选择第一个选项卡 （1）。
    2. 如果 index 为 -1，则不选择任何选项卡。这将是剧透。
    3. 可选参数。
  3. [Tab caption]：当前选项卡的标题。
    1. 如果未指定标题，则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
    2. 如果未指定标题，但指定了图标，则标题将为空。
    3. 可选参数。
  4. [@icon]：图标名称（全名，例如“solitude st-logo”）
    1. 可以指定有或没有空格;例如，“Tab caption @icon”类似于“Tab caption@icon”。
    2. 可选参数。

Demo 1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 自定义Tab名 + icon + Tab名和icon

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 1 - 预设选择第一个【默认】

1
2
3
4
5
6
7
8
9
10
11
12

{% subtabs Demo1 %}
<!-- tab test1 -->
This is Tab 1.
<!-- endtab-->
<!-- tab test2 -->
This is Tab 2.
<!-- endtab-->
<!-- tab test3 -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Demo 2 - 没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
{% subtabs Demo2 %}
<!-- tab -->
This is Tab 1.
<!-- endtab-->
<!-- tab -->
This is Tab 2.
<!-- endtab-->
<!-- tab -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Demo 3 - 自定义Tab名 + icon + Tab名和icon

1
2
3
4
5
6
7
8
9
10
11
{% subtabs Demo3 %}
<!-- tab test1  -->
This is Tab 1.
<!-- endtab-->
<!-- tab @sco-disc-fill -->
This is Tab 2.
<!-- endtab-->
<!-- tab 音乐 @sco-disc-fill -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

时间轴 Timelne

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline title %}

{% timenode title %}

xxxx

{% endtimenode %}

{% timenode title %}

xxxx

{% endtimenode %}

{% endtimeline %}
参数 含义
title 节点名称
xxxx 内容区

8

  • 你好
  • 你好

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolores eaque est ex voluptatum. Consequuntur
eligendi esse fugit quasi ut.

9

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet animi assumenda atque consequatur, doloribus eligendi
est excepturi facere molestias nam, omnis perspiciatis quas, repellendus sit. Ipsum, rem, velit?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% timeline %}

{% timenode 8 %}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolores eaque est ex voluptatum. Consequuntur
eligendi esse fugit quasi ut.

{% endtimenode %}

{% timenode 9 %}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet animi assumenda atque consequatur, doloribus eligendi
est excepturi facere molestias nam, omnis perspiciatis quas, repellendus sit. Ipsum, rem, velit?

{% endtimenode %}

{% endtimeline %}
1
{% link [title],[subtitle],[link] %}
参数 含义
title 标题
subtitle 简介
link 跳转链接
引用站外链接
Solitude
官方文档地址
引用站外链接
知乎
有问题，就会有答案
引用站外链接
Efu
作者博客
1
2
3
{% link Solitude,官方文档地址,https://solitude-docs.efu.me/ %}

{% link 知乎,有问题，就会有答案,https://www.zhihu.com/ %}

折叠块 fold

1
2
3
{% fold title open %}

{% endfold %}
参数 含义
title 标题（可选）
oepn 是否打开（可选）不填默认不打开

Demo 1 - title

Demo1

Demo 2 - title + open

Demo2

Demo 1 - title

1
2
3
{% fold Demo1 %}

{% endfold %}

Demo 2 - title + open

1
2
3
{% fold Demo2 open %}

{% endfold %}

bvideo 视频播放

1
{% bvideo [id] [time] %}
参数 含义
url bvid（例如视频链接后的：BV1nj411i7Ja） 
1
{% bvideo BV1nj411i7Ja %}

复选列表 checkbox

1
{% checkbox 样式参数（可选）, 文本内容 %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

纯文本测试

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

mermaid 图

使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档

如果使用了 gulp 一定要关闭使用过 mermaid 的页面，具体看文档详情

  • 打开主题配置文件中的开关
1
mermaid: true
1
2
3
4
5
6
7
{% mermaid %}
graph TD:
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

1
2
3
4
5
6
7
{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}
1
{% gallery 图库 图库简介 链接 图片 %}

相册

Group Image Gallery
图库

图库简介

Group Image Gallery
图库

图库简介

Group Image Gallery
图库

图库简介

Group Image Gallery
图库

图库简介

相册内容页

1
2
3
4
5
6
7
{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}