文章摘要
静莹莹

前言

这篇文章我本来是想和Markdown格式详解与Solitude主题Front Matter使用说明这篇文章一起发的,结果因为一大堆事情耽搁了一个月,后面就算是想起来这件事也总感觉不是还有其他大佬写过吗,就懒得去写了,最近是因为自己写文章要经常用到外挂标签,一边开着别人的网站一边写博客总感觉不太方便,再加上有朋友找我要这个东西的教程,所以我才又重新把它给写起来了,让大家久等啦!(你还有脸说)

写这篇文章的最初目的是因为 Solitude 的内置/外挂标签的文档总是不全,好几个大佬都有在自己的博客上写过,但是大家都是要不就是比别人多要不就是比别人少的,要用的话还得同时开两三个标签页去找,很麻烦。所以我就想干脆我自己来写一个说明好了。本来是想和Markdown格式详解、Solitude主题Front Matter使用说明合在一起的,结果写完之后才发现光是这两个合起来就已经有1000多行了,所以我就把他们拆分开来啦~

这篇文章同样分为两部分:Solitude内置的标签和插件标签。他们都不是标准的MarkDown语法,必须要有对应的插件/主题才能够正确解析。目前已知的完全支持以下所有标签的有Solitude主题和Astrabay主题,Anzhiyu主题和Butterfly主题部分支持,使用前请先查询对应的主题文档或博文。

OK,那废话不多说,我们马上就开始吧!

内置标签

内置标签不需要安装插件就可以直接使用。

Tabs 标签

1
2
3
4
5
6
7
8
9
{% tabs [唯一名称] [索引] %}

<!-- tab [标签标题] [@图标] -->

任何内容(也支持内联标签)。

<!-- endtab -->

{% endtabs %}
  • [唯一名称]:每个标签块的唯一名称,不包含逗号。
    • 它将用作每个标签的#id前缀及其索引号。
    • 如果名称中包含空格,则在生成的#id中将所有空格替换为连字符。
    • 文章/页面的当前URL必须是唯一的!
  • [索引]:活动标签的索引号(可选)
    • 如果未指定,将选择第一个标签(1)。
    • 如果索引为-1,则不会选择任何标签。这将是一个剧透。
  • [标签标题]:当前标签的标题(可选
    如果未指定,将使用唯一名称与标签索引后缀作为标签标题。
    如果未指定标题但指定了图标,则标题将为空。
  • [@图标]:图标名称(完整名称,例如 “fas fa-github”)(可选
    可以指定带或不带空格的空格;例如,”标签标题@图标” 类似于 “标签标题@图标”。

默认情况下,选择第一个标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab Video -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab Music @fas fa-music-->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

选定默认选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test2 2 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab Video -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab Music @fas fa-music -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

不选定默认选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test3 -1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab Video -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab Music @fas fa-music -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

默认情况下,选择第一个标签

This is Tab 1.

This is Tab 2.

This is Tab 3.

选定默认选项

This is Tab 1.

This is Tab 2.

This is Tab 3.

不选定默认选项

This is Tab 1.

This is Tab 2.

This is Tab 3.

GalleryGroup 图片组

1
{% galleryGroup '[名称]' '[描述]' '[链接]' '[预览图]' %}
  • [名称]:固定显示的标题
  • [描述]:鼠标悬浮时出现的介绍
  • [链接]:跳转链接
  • [预览图]:本图库的预览图
1
2
3
4
<div class='gallery-group-main'>
{% galleryGroup '个人喜爱' '有设计感的图片们' 'https://blog.lemonstar.me/gallery/favourite' 'https://pic-1.yoxo.top/20160319112558_mzEck.webp' %}
{% galleryGroup '亨利八世' 'Henry VIII 里面的所有图片' 'https://blog.lemonstar.me//gallery/henryviii' 'https://pic-1.yoxo.top/henry-viii-field-of-the-cloth-gold.webp' %}
</div>

Chart 图表

要使用本标签首先需要先打开主题配置文件_config.solitude.yml里面的开关

1
chart: true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% chart %}
type: 'bar',
data: {
labels: ['Richard', 'Adam', 'Anastasia', 'Paul', 'Gray', 'Joe'],
datasets: [{
label: '# of Votes',
data: [129, 190, 34, 99, 22, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
}
}
}
{% endchart %}

Mermaid 图表

同样需要先打开配置文件里面的开关。

1
mermaid: true
1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

Typeit 动画

1
typeit: true
1
2
3
{% typeit 'div' %}
// Typeit 语法
{% endtypeit %}

有关Typeit 动画的使用教程,请参阅以下网站:

参数 说明 默认值
  • [div]:Typeit 动画将以该HTML标签显示,最好不要动
1
2
3
4
{% typeit 'div' }
waitUntilVisible: true,
strings: "Lemonstar Blog",
{% endtypeit %}

插件标签

安装插件

1
npm i hexo-solitude-tag

Youtube 视频

1
{% youtube [视频ID] [视频类型] [是否使用 cookie] %}
  • [视频ID]:视频链接https://www.youtube.com/watch?v=dQw4w9WgXcQwatch?v=后面的部分
  • [视频类型]:默认使用video(有其他可能性吗?)
  • [是否使用 cookie]:Youtube 视频 cookie, true/false
    • 如果打开:会在视频加载时设置追踪cookies
    • 如果关闭:会在视频点击播放时时设置追踪cookies
    • 默认(不设置)即为false
1
{% youtube 'dQw4w9WgXcQ' %}

Bilibili 视频

1
{% bvideo [视频id] %}
  • [视频ID]:视频链接https://www.bilibili.com/video/BV1yt4y1Q7SS/video/后面的部分
1
{% bvideo 'BV1yt4y1Q7SS' %}

Fold 折叠

1
2
3
{% fold [标题] [默认开启] %}
折叠内容(可用Markdown语法)
{% endfold %}
  • [标题]:每个折叠块的标题,不包含逗号。
  • [默认开启]:活动标签的索引号。
    • 可填写任意内容,均视为默认开启。
    • 这是可选参数。
1
2
3
{% fold '叮!你有一条新的消息,请查收' %}
欢迎来到我哥哥的博客哦!我可是静莹莹,本博客的看板娘!其实你想要找我的话随时都可以在博客右下角找到我啦……不过如果要和我说话的话还是要去**Telegram**哦!点击我的虚拟形象就能够看到链接啦!哥哥也说以后会给我接上AI,这样大家就可以在博客里面直接和我对话了,不过按照现在的进度来看还是有点遥遥无期啦……
{% endfold %}
叮!你有一条新的消息,请查收

欢迎来到我哥哥的博客哦!我可是静莹莹,本博客的看板娘!其实你想要找我的话随时都可以在博客右下角找到我啦……不过如果要和我说话的话还是要去Telegram哦!点击我的虚拟形象就能够看到链接啦!哥哥也说以后会给我接上AI,这样大家就可以在博客里面直接和我对话了,不过按照现在的进度来看还是有点遥遥无期啦……

Timeline 时间轴

1
2
3
4
5
6
7
8
{% timeline [时间轴标题] %}
{% timenode [时间节点标题] %}
内容
{% endtimenode %}
{% timenode [时间节点标题] %}
内容
{% endtimenode %}
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% timenode 'no.30 Article Publish' %}
Article no.30
Published on 2026.6.30
+ 发表文章[“开发一个属于你自己的角色扮演Telegram Bot”](/post/telegram-bot/)
{% endtimenode %}

{% timenode 'no.29 Article Publish' %}
Article no.29
Published on 2026.4.13
+ 发表文章[“柠檬星博客一周年总结!”](/post/anniversary-summarize/)
{% endtimenode %}

{% timenode 'no.28 Article Publish' %}
Article no.28
Published on 2026.3.7
+ 发表文章[“本地部署Deepseek/Qwen等开源大模型”](/post/AI-deployment/)
{% endtimenode %}

no.30 Article Publish

Article no.30
Published on 2026.6.30

no.29 Article Publish

Article no.29
Published on 2026.4.13

no.28 Article Publish

Article no.28
Published on 2026.3.7

Note 注意

1
{% note '[颜色] [样式]' '[图标]' %}内容{% endnote %}

[样式]:Note的显示样式,有三种
可选项:modern | flat | simple
默认为modern

[颜色]:Note的显示颜色,有六种
可选项:default | primary | success | info | warning | danger
默认为default

[图标]:Note前面的图标
可填写Font Awesome图标名称
不填时不附带图标

1
2
3
4
5
6
{% note 'default modern' 'fas fa-battery-quarter' %}手机电量低,请及时充电{% endnote %}
{% note 'success flat' 'fas fa-wand-sparkles' %}呼神护卫!{% endnote %}
{% note 'primary simple' 'far fa-crown' %}伊拉莎白二世{% endnote %}
{% note 'info modern' 'fas fa-fingerprint' %}请解锁手机以使用Siri{% endnote %}
{% note 'danger flat' 'fas fa-wine-bottle' %}喝酒不开车,开车不喝酒{% endnote %}
{% note 'warning simple' 'fas fa-gift' %}柠檬星博客一周年生日快乐!{% endnote %}

手机电量低,请及时充电

呼神护卫!

伊拉莎白二世

请解锁手机以使用Siri

喝酒不开车,开车不喝酒

柠檬星博客一周年生日快乐!

Card 卡片

1
{% card [名称],[链接],[背景],[评分],[评价],[图标],[标签],[宽度],[高度] %}

[名称]:卡片的标题
[链接]:卡片「查看详情」按钮所指向的链接
[背景]:背景图片的链接
[评分]:星星的数量,0~5
[评价]:光标移动到卡片上时显现的文字
[图标]:左上角的Font Awesome图标
[标签]:右上角显示的文字
[宽度]:卡片宽度,默认值:200px
[高度]:卡片高度,默认值:275px

1
2
{% card '哈利·波特','https://book.douban.com/subject/24531956/','https://img9.doubanio.com/view/subject/s/public/s29101586.jpg','4.9','算是我最喜欢的小说系列了,之前还是哈迷来着,整个系列看了三遍,还把主要的几个咒语背下来了','fa-solid fa-book-open','小说' %}
{% card '别当欧尼酱了','https://bgm.tv/subject/378862','https://lain.bgm.tv/r/400/pic/cover/l/7e/ca/378862_24TnR.jpg','5.0','我的本命番,在这第一次感觉到了什么叫做完结后遗症,到现在我的所有账号的头像还是她,感觉看到了我以后想成为的样子吧','fa-brands fa-bilibili','动画','450px' %}
算是我最喜欢的小说系列了,之前还是哈迷来着,整个系列看了三遍,还把主要的几个咒语背下来了查看详情
小说
哈利·波特
我的本命番,在这第一次感觉到了什么叫做完结后遗症,到现在我的所有账号的头像还是她,感觉看到了我以后想成为的样子吧查看详情
动画
别当欧尼酱了

我因为用了psl插件所以显示的样式会和默认的不一样,这里写默认的标签语法

Checkbox 复选框

1
{% checkbox '[颜色] [样式]' [是否勾选] [内容] %}
  • [颜色]:标签的背景颜色
    • 可用颜色:red | green | blue | yellow | pink | purple | orange
    • 默认为蓝框黑字
  • [样式]:复选框内符号的样式
    • 可选样式:plus, times, minus
    • 不填即为默认打勾
  • [是否勾选]:checked | unchecked
    • 可选参数,默认为 checked
  • [内容]:标签内的文字
1
2
3
{% checkbox 'red' unchecked 'Live2d 接入 AI' %}
{% checkbox 'yellow' unchecked '博客全站换字体' %}
{% checkbox 'blue' 'checked' '更新外挂标签使用说明' %}

Live2d 接入 AI

博客全站换字体

更新外挂标签使用说明

Radio 单选框

1
{% radio [颜色] [是否勾选] [内容] %}
  • [颜色]:标签的背景颜色
    • 可用颜色:red | green | blue | yellow | pink | purple | orange
    • 默认为蓝框黑字
  • [是否勾选]:checked | unchecked
    • 可选参数,默认为 checked
  • [内容]:标签内的文字
1
2
{% radio '' checked 'Windows' %}
{% radio 'red' unchecked 'MacOS' %}

Windows

MacOS

Button 按钮

1
{% button [图标] [内容] [链接] %}
1
{% button 'far fa-address-card' '个人简介' '/about' %}

Repository 代码仓库

支持 Github, Gitea, Gitee, Gitlab 四种。

1
2
3
4
{% github '[仓库]' %}
{% gitea '[服务器]' '[仓库]' %}
{% gitee '[仓库]' %}
{% gitlab '[仓库]' %}
  • [仓库]:仓库网址https://github.com/yangle-q/Personal-Blog-Solitude域名后的用户名和仓库名
  • [服务器]:你的gitea服务器域名(只有gitea需要)
1
2
3
4
{% github 'yangle-q/Personal-Blog-Solitude' %}
{% gitea 'https://git.fsfe.org' 'FSFE/fsfe-website' %}
{% gitee 'everfu/hexo-theme-solitude' %}
{% gitlab 'gitlab-org/gitlab' %}

Bubble 注释气泡

1
{% bubble [文字] [注释] [颜色] %}
  • [文字]:显示的文字内容
  • [注释]:气泡内显示的文字内容(不支持Markdown语法)
  • [颜色]:气泡的背景颜色
    • 可用颜色:red | green | blue | yellow | pink | purple | orange
    • 也可使用十六进制颜色,如 #ec5830
    • 使用自定义颜色时,气泡内的文字颜色会根据给定的背景颜色计算近似亮度,以此设置为白色/黑色
1
{% bubble '柠檬星博客的站长非常勤劳,' '指月更都差点维持不了' 'blue' %}{% bubble '他每天都勤勤恳恳的想着新文章该怎么写,' '只是想想而已' 'blue' %}{% bubble '所以希望大家能多多给他打赏喵!' '还没开通(' 'blue' %}
柠檬星博客的站长非常勤劳喵,指月更都差点维持不了
他每天都勤勤恳恳的想着新文章该怎么写喵,只是想想而已
所以希望大家能多多给他打赏喵!还没开通(

Keyboard 键盘按键

展示键盘按键

1
{% keyboard [按键] %}
  • [按键]:按键内文字,会自动转换大小写,Enter | Windows | Command | Option 键会附带特殊图标
1
Windows 11 更新了很多新的快捷键,其中我最喜欢的是 {% keyboard 'windows' %} + {% keyboard 'prtsc' %},可以识别屏幕上的所有文字并且可以复制下来。

Windows 11 更新了很多新的快捷键,其中我最喜欢的是 Win⌘ + Q,可以识别屏幕上的所有文字并且可以复制下来。F11(或 Fn + F11)在网页浏览时相当好用。它可以让你进入网页全屏模式,让你在专注时不受其他网页的干扰。

Spoiler 剧透

展示剧透

1
{% spoiler [样式] [文字] %}
  • [样式]:剧透文本遮罩类型 blur | block
  • [文字]:遮罩的文字内容(不支持Markdown语法)
1
不要{% spoiler 'block' '绝对不要' %}打开这个网址:{% spoiler 'blur' 'https://lemonstar.me/' %}

不要绝对不要打开这个网址:https://lemonstar.me/

P 标签

HTML里面的P标签,可以自定义一段文本的格式。

1
{% p [样式] [内容] %}
  • [样式]:控制该段显示样式
    • 控制位置:center, left, right
    • 控制文字大小:h1, h2, h3, h4, h5, h6
    • 控制文字颜色:red, green, blue, yellow, purple, orange, gray
1
{% p 'center h2' 'Hello World!' %}

Hello World!

Span 标签

HTML里面的P标签,可以自定义一个文本块的格式。

与P标签不同,Span标签不会强制分行。

1
{% span [样式] [内容] %}
  • [样式]:控制该段显示样式
    • 控制位置:center, left, right
    • 控制文字大小:h1, h2, h3, h4, h5, h6
    • 控制文字颜色:red, green, blue, yellow, purple, orange, gray
1
https://blog.{% span 'h2' 'Lemonstar' %}.me

https://blog.Lemonstar.me

Img 图片

![]()语法效果差不多,主要是可以控制大小。

1
{% img [链接] [描述] [样式] %}
  • 样式:控制图片的样式
    • 所有可以作用于<img>元素的css样式应该都能用。
    • 常用的样式:
      • 控制大小:width: 100px, height:200px
      • 控制位置:float: left
    • 样式之间用;相隔
1
{% img 'https://cloud.lemonstar.me/raw/%E4%BA%8C%E6%AC%A1%E5%85%83%E7%BE%8E%E5%9B%BE%EF%BC%81/%E8%80%81%E4%BA%BA%E4%B8%8E%E6%B5%B7%E7%B4%A0%E6%9D%90%E5%9B%BE.png' 'うみと電車' 'width: 200px' %}
うみと電車

Inline Img 内联图片

1
{% img [链接] [描述] [样式] %}
  • 样式:控制图片的样式
    • 所有可以作用于<img>元素的css样式应该都能用。
    • 常用的样式:
      • 控制大小:width: 100px, height:200px
      • 控制位置:float: left
    • 样式之间用;相隔
1
{% inline_img 'https://cloud.lemonstar.me/raw/%E4%BA%8C%E6%AC%A1%E5%85%83%E7%BE%8E%E5%9B%BE%EF%BC%81/%E8%80%81%E4%BA%BA%E4%B8%8E%E6%B5%B7%E7%B4%A0%E6%9D%90%E5%9B%BE.png' 'うみと電車' '200px' %}

Audio 音频

1
{% audio [音频链接] %}
1
{% audio 'https://music.163.com/song/media/outer/url?id=1969519579.mp3' %}

Video 视频

1
{% video [视频链接] %}
1
{% video 'https://cloud.lemonstar.me/raw/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90/%E7%B2%BE%E7%BF%BBNCOP%E3%80%8C%E3%82%A2%E3%82%A4%E3%83%87%E3%83%B3%E8%B2%9E%E8%B2%9E%E3%83%A1%E3%83%AB%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3%EF%BC%88%E8%87%AA%E6%88%91%E8%8A%82%E6%93%8D%E7%86%94%E6%AF%81%E4%B8%AD%EF%BC%89%E3%80%8D(1080P).mp4' %}

Videos 视频列表

1
2
{% videos [列数] %}
{% endvideos %}
  • [列数]:一排显示的视频个数
    • 如果不设置的话默认是2
1
2
3
4
{% videos %}
{% video 'https://cloud.lemonstar.me/raw/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90/%E7%B2%BE%E7%BF%BBNCOP%E3%80%8C%E3%82%A2%E3%82%A4%E3%83%87%E3%83%B3%E8%B2%9E%E8%B2%9E%E3%83%A1%E3%83%AB%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3%EF%BC%88%E8%87%AA%E6%88%91%E8%8A%82%E6%93%8D%E7%86%94%E6%AF%81%E4%B8%AD%EF%BC%89%E3%80%8D(1080P).mp4' %}
{% video 'https://cloud.lemonstar.me/raw/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90/%E7%B2%BE%E7%BF%BBNCED%E3%80%8C%E3%81%B2%E3%82%81%E3%81%94%E3%81%A8%EF%BC%8A%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BA%EF%BC%88%E9%97%BA%E5%AF%86%EF%BC%8A%E5%8D%B1%E6%9C%BA%E5%A7%90%E5%A6%B9%EF%BC%89%E3%80%8D(1080P).mp4' %}
{% endvideos %}

后记

正如前言所言,这篇文章本来是要和Markdown格式详解与Solitude主题Front Matter使用说明一起发的,但是由于这篇文章的标签整理起来相当累人,所以拖到现在才发,到了写后记的这个时间点连前言都是一年多前写的了(应该是本博客拖更时间最久的一篇文章了吧?)

看了下这篇文章的文件是在2025年6月7号08:11创建的……

熬了这么久本来找的3篇参考文章有两篇都下线了,幸好我找其中一篇文章的站长拿到了文章的源文件,再参照另外一篇还没下线的文章写了这篇,应该是整理得比较全的一篇了吧,虽然说有一篇参考文章下线了就没法拿到其中缺的标签用法就是了。

这篇文章整理用了我整整8个小时……难怪我之前不愿意做呢……人之常情嘛

那么这篇文章就这样啦,也是补上了我的一个大坑,本博客还是会尽量保持月更的,那就拜拜!