由于 Solitude 主题的标签插件文档内容不够全面，我编写了这个文章，用于记录翻源码找到的可用的标签和使用方式。

本文章主要作为自己的备忘录，因此使用的是我自己的 hexo-solitude-tag 的分支，该分支特有内容将会进行标注。

内置标签

内置标签可直接使用。

标签页 tabs

1
2
3
4
5
{% tabs [唯一名称] [索引] %}
<!-- tab [标签标题] [@图标] -->
任意内容（支持内联标签）。
<!-- endtab -->
{% endtabs %}
  • [唯一名称]：每个标签块的唯一名称，不包含逗号。
    • 它将用作每个标签的#id前缀及其索引号。
    • 如果名称中包含空格，则在生成的#id中将所有空格替换为连字符。
    • 文章/页面的当前URL必须是唯一的！
  • [索引]：活动标签的索引号。
    • 如果未指定，将选择第一个标签（1）。
    • 如果索引为-1，则不会选择任何标签。这将是一个剧透。
    • 可选参数。
  • [标签标题]：当前标签的标题。
    • 如果未指定，将使用唯一名称与标签索引后缀作为标签标题。
    • 如果未指定标题但指定了图标，则标题将为空。
    • 可选参数。
  • [@图标]：图标名称（完整名称，例如 “fas fa-github”）。
    • 可以指定带或不带空格的空格；例如，”标签标题 @图标” 类似于 “标签标题@图标”。
    • 可选参数。

演示 1 - 默认情况下，选择第一个标签

这是标签 1。

这是标签 2。

这是标签 3。

演示 2 - 预设选择标签

这是标签 1。

这是标签 2。

这是标签 3。

演示 3 - 没有预设标签

这是标签 1。

这是标签 2。

这是标签 3。

演示 4 - 自定义标签名称 + 图标 + 标签名称和图标

这是标签 1。

这是标签 2。

这是标签 3。

演示1 - 默认情况下，选择第一个标签 

1
2
3
4
5
6
7
8
9
10
11
{% subtabs 演示1 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab test2 -->
**这是标签 2。**
<!-- endtab-->
<!-- tab test3 -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

演示 2 - 预设选择标签 

1
2
3
4
5
6
7
8
9
10
11
{% subtabs 演示2, 2 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab test2 -->
**这是标签 2。**
<!-- endtab-->
<!-- tab test3 -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

演示 3 - 没有预设标签 

1
2
3
4
5
6
7
8
9
10
11
{% subtabs 演示3, -1 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab test2 -->
**这是标签 2。**
<!-- endtab-->
<!-- tab test3 -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

演示 4 - 自定义标签名称 + 图标 + 标签名称和图标 

1
2
3
4
5
6
7
8
9
10
11
{% subtabs 演示4 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab @fas fa-music -->
**这是标签 2。**
<!-- endtab-->
<!-- tab 音乐 @fas fa-music -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}
1
2
3
4
5
{% gallery %}
![]([图片 url])
![]([图片 url])
![]([图片 url])
{% endgallery %}
1
2
3
4
5
6
7
{% gallery %}
![](https://bu.dusays.com/2024/10/28/671f2b05cd936.webp)
![](https://bu.dusays.com/2024/10/28/671f2b255ebe9.webp)
![](https://bu.dusays.com/2024/10/28/671f2b380a381.webp)
![](https://bu.dusays.com/2024/10/28/671f2b10c5b81.webp)
![](https://bu.dusays.com/2024/10/28/671f2b097274a.webp)
{% endgallery %}

文章 article

注意：如果在使用 hexo clean 后使用 hexo generate，可能会导致 article 标签无法正常渲染。可以尝试修改文章并多次运行 hexo generate 以解决问题。

1
{% article [路径] %}
  • [路径]：应与 _config.yml 的 permalink 配置项一致
1
{% article 'posts/2024/e5415539/' %}

外挂标签

外挂标签需安装 hexo-solitude-tag 插件。

外挂标签样式由于渲染顺序问题，css 引入有可能失效。如果发现外挂标签的样式缺失，可以修改一下文章然后再生成一次试试。

引用 note

1
2
3
{% note [类型] [图标] %}
Markdown 内容
{% endnote %}
  • [类型]：引用的色彩类型。
    • 可选项：default | primary | success | info | warning | danger
  • [图标]：引用前的图标
    • 可填写 Font Awesome 图标名称
    • 不填时不附带图标

2025 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器 

1
2
3
4
5
6
7
8
9
10
11
{% note default 'fas fa-bullhorn' %}2025 年快到了....{% endnote %}

{% note primary 'fas fa-car-crash' %}小心开车 安全至上{% endnote %}

{% note success 'fas fa-fan'%}这是三片呢？还是四片？{% endnote %}

{% note info 'fas fa-battery-half' %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note warning 'far fa-hand-scissors' %}剪刀石头布{% endnote %}

{% note danger 'fab fa-internet-explorer' %}前端最讨厌的浏览器{% endnote %}

按钮 button

onclick 为我个人的分支的特性 

1
2
{% button [图标] [内容] [链接] %}
{% button [图标] [内容] onclick:[事件] %}
1
2
{% button 'fas fa-music' '音乐馆' '/music/' %}
{% button 'fas fa-circle-up' '回到顶部' "onclick:utils.scrollToDest(0)" %}

折叠 fold

1
2
3
{% fold [标题] [默认开启] %}
Markdown 内容
{% endfold %}
  • [标题]：每个折叠块的标题，不包含逗号。
  • [默认开启]：活动标签的索引号。
    • 可填写任意内容，均视为默认开启
    • 可选参数
默认关闭

这是默认关闭的

默认开启

这是默认开启的 

1
2
3
4
5
6
{% fold 默认关闭 %}
**这是默认关闭的**
{% endfold %}
{% fold 默认开启 1 %}
**这是默认开启的**
{% endfold %}

时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline [时间轴标题] %}
{% timenode [时间节点标题] %}
内容
{% endtimenode %}
{% timenode [时间节点标题] %}
内容
{% endtimenode %}
{% endtimeline %}
时间轴样式预览

2024-09-01

更新 ijkl。

2020-11-21

更新 efgh。

2010-02-02

更新 abcd。

2000-01-01

发布文章。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% timeline 时间轴样式预览 %}
{% timenode 2024-09-01 %}
更新 ijkl。
{% endtimenode %}
{% timenode 2020-11-21 %}
更新 efgh。
{% endtimenode %}
{% timenode 2010-02-02 %}
更新 abcd。
{% endtimenode %}
{% timenode 2000-01-01 %}
发布文章。
{% endtimenode %}
{% endtimeline %}
1
{% link [标题] [描述] [链接] %}
站内链接
我的装备
生活与出行的必备品 

1
{% link '我的装备' '生活与出行的必备品' '/equipment/' %}

仓库 repo

1
2
3
4
{% github [repo] %}
{% gitlab [repo] %}
{% gitee [repo] %}
{% gitea [repo] %}

1
2
3
4
{% github HPCesia/HPCesia.github.io %}
{% github everfu/hexo-theme-solitude %}
{% gitee everfu/hexo-theme-solitude %}
{% gitlab efu/hexo-theme-solitude %}

标签 label

主分支已将该标签删除，我个人的分支仍保留该标签

1
{% label [内容] [颜色] %}
  • [内容]：标签内的文字
  • [颜色]：标签的背景颜色
    • 可用颜色：red | green | blue | yellow | pink | purple | orange

这是红色 这是绿色 这是蓝色 这是黄色 这是粉色 这是紫色 这是橙色

1
2
3
4
5
6
7
{% label 这是红色 red %}
{% label 这是绿色 green %}
{% label 这是蓝色 blue %}
{% label 这是黄色 yellow %}
{% label 这是粉色 pink %}
{% label 这是紫色 purple %}
{% label 这是橙色 orange %}

复选栏 checkbox

1
{% checkbox [颜色] [是否勾选] [内容] %}
  • [颜色]：标签的背景颜色
    • 可用颜色：red | green | blue | yellow | pink | purple | orange
  • [是否勾选]：checked | unchecked
    • 可选参数，默认为 checked
  • [内容]：标签内的文字

这是红色

这是绿色

这是蓝色

这是黄色

这是粉色

这是紫色

这是橙色 

1
2
3
4
5
6
7
{% checkbox red checked 这是红色 %}
{% checkbox green unchecked 这是绿色 %}
{% checkbox blue 这是蓝色 %}
{% checkbox yellow 这是黄色 %}
{% checkbox pink 这是粉色 %}
{% checkbox purple 这是紫色 %}
{% checkbox orange 这是橙色 %}

单选栏 radio

1
{% radio [颜色] [是否勾选] [内容] %}
  • [颜色]：标签的背景颜色
    • 可用颜色：red | green | blue | yellow | pink | purple | orange
  • [是否勾选]：checked | unchecked
    • 可选参数，默认为 checked
  • [内容]：标签内的文字

这是红色

这是绿色

这是蓝色

这是黄色

这是粉色

这是紫色

这是橙色 

1
2
3
4
5
6
7
{% radio red checked 这是红色 %}
{% radio green unchecked 这是绿色 %}
{% radio blue 这是蓝色 %}
{% radio yellow 这是黄色 %}
{% radio pink 这是粉色 %}
{% radio purple 这是紫色 %}
{% radio orange 这是橙色 %}

气泡注释 bubble

1
{% bubble [文字] [注释] [颜色] %}
  • [文字]：显示的文字内容
  • [注释]：气泡内显示的文字内容（不支持 Markdown 语法）
  • [颜色]：气泡的背景颜色
    • 可用颜色：red | green | blue | yellow | pink | purple | orange
    • 也可使用十六进制颜色，如 #ec5830
    • 使用自定义颜色时，气泡内的文字颜色会根据给定的背景颜色计算近似亮度，以此设置为白色 / 黑色

贝塞尔曲线Bézier curve是一种广泛应用于二维图形应用程序的数学曲线，于 1962 年由皮埃尔·贝塞尔Pierre Bézier（1910 年 9 月 1 日——1999 年 11 月 25 日），法国机械和电气工程师，计算机几何建模创始人之一。所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。

在 fold 标签内嵌套使用示例

在 note 标签和 fold 标签外挂标签插件的另外两个标签，你可以在这篇文章内找到他们的使用方法。内嵌套使用示例。

fold 和 tabs 标签内部嵌套的气泡标签会被遮挡！！！ 

1
2
3
4
5
6
7
8
9
{% bubble '贝塞尔曲线' 'Bézier curve' 'red' %}是一种广泛应用于二维图形应用程序的数学曲线，于 1962 年由{% bubble '皮埃尔·贝塞尔' 'Pierre Bézier（1910 年 9 月 1 日——1999 年 11 月 25 日），法国机械和电气工程师，计算机几何建模创始人之一。' '#ec5830' %}所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。

{% fold '在 fold 标签内嵌套使用示例' 1 %}
{% note warning 'fas fa-vial-circle-check' %}
在 {% bubble 'note 标签和 fold 标签' '外挂标签插件的另外两个标签，你可以在这篇文章内找到他们的使用方法。' 'pink' %}内嵌套使用示例。

*fold 和 tabs 标签内部嵌套的气泡标签会被遮挡！！！*
{% endnote %}
{% endfold %}

B 站视频 bvideo

1
{% bvideo [BV号] %}
1
{% bvideo BV1z34y1C7Kc %}

键盘按键 keyboard

1
{% keyboard [按键] %}
  • [按键]：按键内文字，会自动转换大小写，Enter | Windows | Command | Option 键会附带特殊图标

在 Windows 系统中可以使用 Win⌘ + Shift⇧ + S 来截图，在 Mac 中则是 Command⌘ + Shift⇧ + 3。

1
在 Windows 系统中可以使用 {% keyboard Windows %} + {% keyboard Shift %} + {% keyboard S %} 来截图，在 Mac 中则是 {% keyboard Command %} + {% keyboard Shift %} + {% keyboard 3 %}。

剧透文本 spoiler

1
{% spoiler [样式] [文字] %}
  • [样式]：剧透文本遮罩类型 blur | block
  • [文字]：遮罩的文字内容（不支持 Markdown 语法）

《原神》是由米哈游自研的一款全新开放世界冒险 RPG。

1
《{% spoiler block 原神 %}》是由{% spoiler blur 米哈游 %}自研的一款全新开放世界冒险 RPG。

卡片 card

1
{% card [名称],[链接],[背景],[评分],[评价],[图标],[标签],[宽度],[高度] %}
  • [名称]：卡片的标题
  • [链接]：卡片「查看详情」按钮所指向的链接
  • [背景]：背景图片的链接
  • [评分]：星星的数量
  • [评价]：光标移动到卡片上时显现的文字
  • [图标]：左上角的 Font Awesome 图标
  • [标签]：右上角显示的文字
  • [宽度]：卡片宽度，默认值：200px
  • [高度]：卡片高度，默认值：275px
读起来相当舒服的西幻文查看详情
西幻
牧者密续
健康阳光积极向上的欢乐向回合制 Gacha 游戏查看详情
JRPG
崩坏：星穹铁道 
1
2
{% card 牧者密续, https://www.qidian.com/book/1037095853/, https://bu.dusays.com/2024/11/04/6728531f376df.webp, 5, 读起来相当舒服的西幻文, fas fa-book, 西幻 %}
{% card 崩坏：星穹铁道, https://sr.mihoyo.com/, https://bu.dusays.com/2024/10/28/671f2b2119bcf.webp, 5, 健康阳光积极向上的欢乐向回合制 Gacha 游戏, fas fa-gamepad, JRPG, 450px, 275px %}

代码补全

顺便分享一下我在 VSCode 中使用的 Solitude 相关的 Code Snippet 配置：

hexo-tags-solitude.code-snippets
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
{
  "tabs": {
    "prefix": "%tabs",
    "body": [
      "{% tabs ${1:唯一名称} ${2:0} %}",
      "${3:%tabs-tab}",
      "{% endtabs %}"
    ],
    "description": "Solitude 主题的 tabs tag",
    "scope": "markdown"
  },
  "tab": {
    "prefix": "%tabs-tab",
    "body": [
      "<!-- tab ${1:标签标题} ${2:@图标 }-->",
      "$3",
      "<!-- endtab -->"
    ],
    "description": "Solitude 主题的 tabs tag 的标签页",
    "scope": "markdown"
  },
  "gallery": {
    "prefix": "%gallery",
    "body": [
      "{% gallery %}",
      "${1:![desc](url)}",
      "{% endgallery %}"
    ],
    "description": "Solitude 主题的 gallery tag",
    "scope": "markdown"
  },
  "note": {
    "prefix": "%note",
    "body": [
      "{% note ${1|default,primary,success,info,warning,danger|} ${2:'fas fa-info-circle' }%}",
      "$3",
      "{% endnote %}"
    ],
    "description": "Solitude 主题的 note tag",
    "scope": "markdown"
  },
  "button": {
    "prefix": "%button",
    "body": [
      "{% button ${1:图标} ${2:内容} ${3:链接} %}"
    ],
    "description": "Solitude 主题的 button tag",
    "scope": "markdown"
  },
  "timeline": {
    "prefix": "%timeline",
    "body": [
      "{% timeline ${1:标题} %}",
      "$2",
      "{% endtimeline %}"
    ],
    "description": "Solitude 主题的 timeline tag",
    "scope": "markdown"
  },
  "timenode": {
    "prefix": "%timenode",
    "body": [
      "{% timenode ${1:$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE} %}",
      "$2",
      "{% endtimenode %}"
    ],
    "description": "Solitude 主题的 timeline tag 的时间节点",
    "scope": "markdown"
  },
  "link": {
    "prefix": "%link",
    "body": [
      "{% link ${1:标题} ${2:描述} ${3:链接} %}"
    ],
    "description": "Solitude 主题的 link tag",
    "scope": "markdown"
  },
  "spoiler": {
    "prefix": "%spoiler",
    "body": [
      "{% spoiler ${1|blur,block|} ${2:文本} %}"
    ],
    "description": "Solitude 主题的 spoiler tag",
    "scope": "markdown"
  },
  "fold": {
    "prefix": "%fold",
    "body": [
      "{% fold ${1:标题} ${2:默认开启 }%}",
      "$3",
      "{% endfold %}"
    ],
    "description": "Solitude 主题的 fold tag",
    "scope": "markdown"
  },
  "keyboard": {
    "prefix": "%keyboard",
    "body": [
      "{% keyboard ${1|Enter,Windows,Command,Option|} %}"
    ],
    "description": "Solitude 主题的 keyboard tag",
    "scope": "markdown"
  },
  "bubble": {
    "prefix": "%bubble",
    "body": [
      "{% bubble ${1:文字} ${2:注释} ${3|red,green,blue,yellow,pink,purple,orange|} %}"
    ],
    "description": "Solitude 主题的 bubble tag",
    "scope": "markdown"
  },
  "card": {
    "prefix": "%card",
    "body": [
      "{% card ${1:标题}, ${2:链接}, ${3:背景}, ${4:评分}, ${5:评价}, ${6:图标}, ${7:标签}, ${8:宽度}, ${9:高度} %}"
    ]
  }
}