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

内置标签

内置标签可直接使用。

标签页 tabs

{% 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 - 默认情况下，选择第一个标签

{% subtabs 演示1 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab test2 -->
**这是标签 2。**
<!-- endtab-->
<!-- tab test3 -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

演示 2 - 预设选择标签

{% subtabs 演示2, 2 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab test2 -->
**这是标签 2。**
<!-- endtab-->
<!-- tab test3 -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

演示 3 - 没有预设标签

{% subtabs 演示3, -1 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab test2 -->
**这是标签 2。**
<!-- endtab-->
<!-- tab test3 -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

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

{% subtabs 演示4 %}
<!-- tab test1 -->
**这是标签 1。**
<!-- endtab-->
<!-- tab @fas fa-music -->
**这是标签 2。**
<!-- endtab-->
<!-- tab 音乐 @fas fa-music -->
**这是标签 3。**
<!-- endtab-->
{% endsubtabs %}

图库 gallery

{% gallery %}
![]([图片 url])
![]([图片 url])
![]([图片 url])
{% endgallery %}

    <div class="gallery-item"><img class="nolazyload" src=https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409021540032.webp alt="" /></div><div class="gallery-item"><img class="nolazyload" src=https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409062136036.webp alt="" /></div><div class="gallery-item"><img class="nolazyload" src=https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409072140582.webp alt="" /></div><div class="gallery-item"><img class="nolazyload" src=https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409021602284.webp alt="" /></div><div class="gallery-item"><img class="nolazyload" src=https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409021540815.webp alt="" /></div>
  </div>

{% gallery %}
![](https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409021540032.webp)
![](https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409062136036.webp)
![](https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409072140582.webp)
![](https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409021602284.webp)
![](https://gcore.jsdelivr.net/gh/HPCesia/PicGo-ImageBed/images/blog/202409021540815.webp)
{% endgallery %}

文章 article

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

{% article [路径] %}

[路径]：应与 _config.yml 的 permalink 配置项一致

{% article 'posts/2024/e5415539/' %}

外挂标签

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

引用 note

{% note [类型] [图标] %}
Markdown 内容
{% endnote %}

[类型]：引用的色彩类型。
- 可选项：default | primary | success | info | warning | danger
[图标]：引用前的图标
- 可填写 Font Awesome 图标名称
- 不填时不附带图标

2025 年快到了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

{% button [图标] [内容] [链接] %}

{% button 'fas fa-music' '音乐馆' '/music/' %}

折叠 fold

{% fold [标题] [默认开启] %}
Markdown 内容
{% endfold %}

[标题]：每个折叠块的标题，不包含逗号。
[默认开启]：活动标签的索引号。
- 可填写任意内容，均视为默认开启
- 可选参数

默认关闭

这是默认关闭的

默认开启

这是默认开启的

{% fold 默认关闭 %}
**这是默认关闭的**
{% endfold %}
{% fold 默认开启 1 %}
**这是默认开启的**
{% endfold %}

时间轴 timeline

{% timeline [时间轴标题] %}
{% timenode [时间节点标题] %}
内容
{% endtimenode %}
{% timenode [时间节点标题] %}
内容
{% endtimenode %}
{% endtimeline %}

时间轴样式预览

2024-09-01

更新 ijkl。

2020-11-21

更新 efgh。

2010-02-02

更新 abcd。

2000-01-01

发布文章。

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

链接卡片 link

{% link [标题] [描述] [链接] %}

站内链接

<div class="tag-link-bottom">
    <div class="tag-link-left">
      <i class="solitude fas fa-link"></i>
    </div>
    <div class="tag-link-right">
        <div class="tag-link-title">我的装备</div>
        <div class="tag-link-sitename">生活与出行的必备品</div>
    </div>
    <i class="solitude fas fa-chevron-right"></i>
</div></a>

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

仓库 repo

{% github [repo] %}
{% gitlab [repo] %}
{% gitee [repo] %}
{% gitea [repo] %}

<i class="fas fa-star"></i>
<span class='star-zru2wodrm'></span>
<i class="fas fa-code-branch"></i>
<span class='fork-zru2wodrm'></span>

<i class="fas fa-star"></i>
<span class='star-6n0lgphos'></span>
<i class="fas fa-code-branch"></i>
<span class='fork-6n0lgphos'></span>

<i class="fas fa-star"></i>
<span class='star-e5p4dr0nf'></span>
<i class="fas fa-code-branch"></i>
<span class='fork-e5p4dr0nf'></span>

<i class="fas fa-star"></i>
<span class='star-jadvjzc9f'></span>
<i class="fas fa-code-branch"></i>
<span class='fork-jadvjzc9f'></span>

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

标签 label

{% label [内容] [颜色] %}

[内容]：标签内的文字
[颜色]：标签的背景颜色
- 可用颜色：red | green | blue | yellow | pink | purple | orange

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

{% label 这是红色 red %}
{% label 这是绿色 green %}
{% label 这是蓝色 blue %}
{% label 这是黄色 yellow %}
{% label 这是粉色 pink %}
{% label 这是紫色 purple %}
{% label 这是橙色 orange %}

复选栏 checkbox

{% checkbox [颜色] [是否勾选] [内容] %}

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

这是红色

这是绿色

这是蓝色

这是黄色

这是粉色

这是紫色

这是橙色

{% checkbox red checked 这是红色 %}
{% checkbox green unchecked 这是绿色 %}
{% checkbox blue 这是蓝色 %}
{% checkbox yellow 这是黄色 %}
{% checkbox pink 这是粉色 %}
{% checkbox purple 这是紫色 %}
{% checkbox orange 这是橙色 %}

单选栏 radio

{% radio [颜色] [是否勾选] [内容] %}

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

这是红色

这是绿色

这是蓝色

这是黄色

这是粉色

这是紫色

这是橙色

{% radio red checked 这是红色 %}
{% radio green unchecked 这是绿色 %}
{% radio blue 这是蓝色 %}
{% radio yellow 这是黄色 %}
{% radio pink 这是粉色 %}
{% radio purple 这是紫色 %}
{% radio orange 这是橙色 %}

气泡注释 bubble

包含 bubble 标签的 tabs 的 position 样式会强制转为 static，以解决层叠上下文样式覆盖问题。如果你修改了 tabs 的位置样式，在使用 bubble 标签时请注意。

另：这个标签因为上述问题，还没提 PR，暂时不可用。

{% bubble [文字] [注释] [颜色] %}

[文字]：显示的文字内容
[注释]：气泡内显示的文字内容
[颜色]：气泡的背景颜色
- 可用颜色：red | green | blue | yellow | pink | purple | orange
- 也可使用十六进制颜色，如 #ec5830
- 气泡内的文字颜色会根据给定的背景颜色计算近似亮度，以此设置为白色 / 黑色

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

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

B 站视频 bvideo

{% bvideo [BV号] %}

{% bvideo BV1z34y1C7Kc %}