Solitude主题自带以及打包的标签语法极其简陋，为追求简洁而过度简化，导致实用性和适用性不高。为了提升文章排版的美观性和功能性，我对安和鱼Hexo主题的部分标签语法进行选择性移植，并根据个人需求和审美风格进行了样式重塑，现将具体用法列举如下。

段落文本 (P)

支持给一段文本增加额外样式，包括字体、颜色、大小、粗细和对齐方向。

1
{% p 样式参数, 文本内容 %}
参数选项
字体logo、code
颜色红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色
大小small、h4、h3、h2、h1、large、huge、ultra
对齐left、center、right
粗细(留空) 、bold
  • 书写要求：样式参数可以自由组合，各样式之间使用空格分隔。样式参数组与正文内容之间使用逗号隔开。正文内容支持使用任何常规中英文标点符号。
  • 字体参数：Logo字体默认使用自动主题色，Code字体尺寸固定为0.9em。

居中红色加粗大号文本

A Wonderful Theme for Hexo

Code字体红色文本

1
2
3
4
{% p red center bold large, 居中红色加粗大号文本 %}
{% p center logo huge, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}
{% p  red center code, Code字体的普通字号文本 %}

行内文本 (Span)

支持给一行里的部分文本增加额外样式，可用参数和上面的P标签完全一致。

1
{% span 样式参数, 文本内容 %}
参数选项
字体logo、code
颜色红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色
大小small、h4、h3、h2、h1、large、huge、ultra
对齐left、center、right
加粗(留空) 、bold
  • 书写要求：样式参数可以自由组合，各样式之间使用空格分隔。样式参数组与正文内容之间使用逗号隔开。正文内容支持使用任何常规中英文标点符号。
  • 字体参数：Logo字体默认使用自动主题色，Code字体尺寸固定为0.9em。
  • 在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色。
  • 也可以在一段文本中插入一段代码，就像这样Hello World 。

    A Wonderful Theme for Hexo
1
2
3
4
- 在一段话中方便插入各种颜色的标签，包括：{% span bold red, 红色 %}、{% span bold yellow, 黄色 %}、{% span bold green, 绿色 %}、{% span bold cyan, 青色 %}、{% span bold blue, 蓝色 %}、{% span bold gray, 灰色 %}、{% span bold purple, 紫色 %}、{% span bold orange, 橙色 %}、{% span bold pink, 粉色 %}、{% span bold gold, 金色 %}、{% span bold theme, 自动主题色 %}。
- 也可以在一段文本中插入一段代码，就像这样{% span code, Hello World %} 。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

行内文本样式（Text）

如果不仅想改变颜色和大小，还希望添加下划线、着重号，甚至实现刮刮乐一样的隐藏效果，可以使用下面这组特效标签。

1
2
3
4
5
6
7
8
9
{​% emp [文本] %} : 底部红点着重号
{​% wavy [文本] %} : 底部主题色波浪线
{​% u [文本] %} : 传统实线下划线
{​% del [文本] %} : 传统删除线
{​% psw [文本] %} : 灰色块（鼠标悬浮显示）
{​% spoiler [文本] %} : 纯色块（鼠标悬浮显示）
{​% spoiler blur [文本] %} : 磨砂块（鼠标悬浮显示）
{​% hide [文本], [按钮名(可选)], [背景色(可选)], [字色(可选)] %} : 点击按钮显示内容
{​% kbd [按键名称] %} : 仿真键盘按键
  • Spoiler：不填写blur则为纯色，否则为磨砂效果方块。
  • Hide：可填写任何标准 CSS 颜色代码，如skyblue、#333、rgb(255, 0, 0)，或是前述各种通用颜色。
  • Kbd：填写ctrl、shift、esc、enter、win、command、option、alt、tab会转换为标准键盘样式, 其他字符则渲染为实际内容。
  • 书写要求：hide标签各参数间以半角逗号分隔，若文本中含有半角逗号请使用全角；其他行内特效标签支持直接输入文本内容，多词无需特殊包裹。
  1. 强调：突出文本重点。
  2. 波浪线：相对轻松活泼的下划线。
  3. 下划线：相对正规严肃的下划线。
  4. 删除线：表示文本已被废弃。
  5. 灰色块：相对突兀的遮挡色块
  6. 纯色块：非常突兀的遮挡色块
  7. 磨砂色块：相对协调的色块
  8. 隐身点击显示：常规用法。
  9. 点击显示内容可自定义样式：高级用法。
  10. Ctrl + C：实体键盘按键视觉效果。
1
2
3
4
5
6
7
8
9
10
1. {% emp 强调 %}：突出文本重点。
2. {% wavy 波浪线 %}：相对轻松活泼的下划线。
3. {% u 下划线 %}：相对正规严肃的下划线。
4. {% del 删除线 %}：表示文本已被废弃。
5. 灰色块：{% psw 相对突兀的遮挡色块 %}
6. 纯色块：{% spoiler 非常突兀的遮挡色块 %}
7. 磨砂色块：{% spoiler blur 相对协调的色块 %}
8. {% hide 隐身点击显示 %}：常规用法。
9. {% hide 可自定义样式, 点击显示内容, var(--efu-red), #ffffff %}：高级用法。
10. {% kbd ctrl %} + {% kbd c %}：实体键盘按键视觉效果。

行内徽章 (Label)

一种极其轻量且精致的强调方式，能够在不打断正常阅读排版的情况下，标注“版本号”、“重要标签”或是“状态属性”等信息。

1
{% label 文本内容 [自选颜色] %}
  • 文本内容: 需要进行高亮展示的内联文字（支持内部带有空格）。
  • 自选颜色: 红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色。
  • 默认颜色: 如果不填写颜色，默认显示带有灰色质感的基础样式。
  • 书写要求：自选颜色需作为最后一个参数传入；若末尾参数不是有效颜色名，则整段文字均作为徽章文本并应用默认灰色样式。

今天移植了安和鱼主题的高亮徽章组件，它能够和Solitude主题完美融合，呈现出精致的文字排版。

1
今天移植了{% label 安和鱼主题的高亮徽章 blue %}组件，它能够和{% label Solitude主题 pink %}完美融合，呈现出{% label 精致的 theme %}文字排版。

会话气泡 (Bubble)

1
{​% bubble [悬停文字] [气泡文字] [气泡颜色（可选）] %}
  • 悬停文字: 悬停会弹出气泡的主体文字。
  • 气泡文字: 显示在气泡里的文字。
  • 气泡颜色:
    • 预设颜色：(留空) 、红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色。
    • 自定义颜色：支持传入标准十六进制色值，如#ff5722，系统会自动计算亮度并匹配最佳字色。
  • 书写要求：参数按空格依次传递。若悬停文字或气泡文字包含空格，必须使用英文单/双引号将该段文字包裹起来，防止被 Hexo 分词机制错位识别。

当在一段话中，想引用一个注释或者提示内容，就可以添加一个无色气泡生活愉快，或者是上色气泡万事如意，甚至使用十六进制颜色自定义色极客风范，非常简单。

1
当在一段话中，想引用一个注释或者提示内容，就可以添加一个{% bubble 无色气泡 生活愉快 %}，或者是{% bubble 上色气泡 万事如意 orange %}，甚至使用十六进制颜色{% bubble 自定义色 极客风范 #6366f1 %}，非常简单。

折叠框 (Fold)

1
2
3
{% fold [颜色(选填)] [open(选填)] [标题文本] %}
这里可以包裹任何合法的 Markdown 文本，或者嵌套其他标签
{% endfold %}
参数选项
颜色(留空) 、红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色
状态(留空) 、open
  • 参数书写: 颜色和状态（open）参数顺序可任意互换，其余文本自动组合为标题，支持包含空格和标点的长句子。
  • 内容区域: 内部支持嵌套任何 Markdown 语法（包括列表、代码块、甚至其他卡片），正文内容不受标点符号限制。
默认样式

没有设置任何参数，鼠标悬停或点击时，标题会自动铺满你的全局主题色。

需要点击展开的信息框

这是带有颜色参数的折叠框。

默认展开的信息框

带有open参数，在网页加载完毕时默认打开。

1
2
3
4
5
6
7
8
9
10
11
{% fold 默认样式 %}
没有设置任何参数，鼠标悬停或点击时，标题会自动铺满你的全局主题色。
{% endfold %}

{% fold blue 需要点击展开的信息框 %}
这是带有颜色参数的折叠框。
{% endfold %}

{% fold red open 默认展开的信息框 %}
带有open参数，在网页加载完毕时默认打开。
{% endfold %}

选项卡 (Tabs)

1
2
3
4
5
{% tabs [分组唯一ID], [默认展示(可选，默认为1)] %}
<!-- tab [标签标题]@[图标类名(可选)] -->
内容
<!-- endtab -->
{% endtabs %}
  • 分组ID: 同一个页面中如果有多个选项卡，该标识符不可重复，可用英文或拼音。
  • 默认展开: 数字。例如 “3“，则页面刷新时自动展开第三个选项卡。
  • 标签书写: @ 符号前为标题，后为 FontAwesome 图标。例如“代码示例@fas fa-code“。
  • 多级嵌套: 你可以使用 subtabs 甚至 subsubtabs 来在一级选项卡内无限嵌套子选项卡。语法与 tabs 完全一致。

这是选项卡 第一页 的简介内容。

1
console.log("Hello, Tabs!");
你可以在标签页里嵌套其他的排版元素！

你甚至可以在当前标签页里，直接无限嵌套子选项卡：

这是嵌套在内部的第一页。

这是嵌套在内部的第二页。

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
{% tabs tab_demo, 1 %}
<!-- tab 分栏简介@fas fa-info-circle -->
这是选项卡 **第一页** 的简介内容。
<!-- endtab -->

<!-- tab 代码示例@fas fa-code -->
```javascript
console.log("Hello, Tabs!");
```
<!-- endtab -->

<!-- tab 嵌套排版@fas fa-palette -->
{% note info modern %}你可以在标签页里嵌套其他的排版元素！{% endnote %}

你甚至可以在当前标签页里，直接无限嵌套子选项卡：
{% subtabs child_tabs, 1 %}
<!-- tab 二级子选项 A@fas fa-file -->
这是嵌套在内部的第一页。
<!-- endtab -->
<!-- tab 二级子选项 B@fas fa-file-alt -->
这是嵌套在内部的第二页。
<!-- endtab -->
{% endsubtabs %}
<!-- endtab -->
{% endtabs %}

任务列表 (Checkbox & Radio)

个人感觉适合用来给魔改文档或者工作计划写进度用。

1
2
{% checkbox [各种选框修饰样式组合] [checked/unchecked(可选)] 文本内容 %}
{% radio [各种选框修饰样式组合] [checked/unchecked(可选)] 文本内容 %}
参数选项
类型checkbox、radio
颜色红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色
图标默认对号、plus(加号)、minus(减号)、times(叉号)
状态默认选中、checked(选中)、unchecked(未选中)
  • 书写要求：参数顺序需遵循[选框修饰样式] [状态词(可选)] 文本内容。修饰样式与状态词需置于开头，其后文本支持 Markdown 渲染（如加粗、行内代码、链接等）。

修复 Note 组件BUg

重写全站正则

解决解析错行问题

减号图标复选框

加号图标复选框

打叉复选框

开启极简纯净模式

开启赛深灰色文本体验

1
2
3
4
5
6
7
8
{% checkbox blue checked 修复 Note 组件BUg %}
{% checkbox green 重写全站正则 %}
{% checkbox pink unchecked 解决解析错行问题 %}
{% checkbox red minus checked 减号图标复选框 %}
{% checkbox purple plus 加号图标复选框 %}
{% checkbox orange times checked 打叉复选框 %}
{% radio cyan checked 开启极简纯净模式 %}
{% radio gray unchecked 开启赛深灰色文本体验 %}

提示块 (Note Callout)

如果需要突出某项信息，提示块是文章排版中最经典且最常用的高亮模块。

1
2
3
{% note [主题] [风格] [图标类名|no-icon] %}
内容文本支持 Markdown 解析。
{% endnote %}
主题图标主题图标
defaultbolt
primaryban
successhome
infosync
warningcogs
dangerkey
errorbell
风格文字背景指示条边框
modern上色有无无
flat无色有有无
simple无色无有有
disabled无色无无无
图标配置说明
fas fa-*填写 FontAwesome 完整类名
no-icon明确声明不展示任何图标
(留空)自动匹配主题默认图标
  • 书写要求：主题、风格和图标参数支持无序自由组合。内容区域支持完整的 Markdown 语法解析（包括段落、列表、代码块等），不受标点符号限制。
Modern Primary自选图标风格
Modern Success风格
Flat Info自选图标风格
Flat Warning风格
Simple Cogs风格
Simple Default无图标风格
Disabled Info风格
Disabled 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
<!-- Modern 风格 -->
{% note primary modern fas fa-rocket %}
Modern Primary自选图标风格
{% endnote %}

{% note success modern %}
Modern Success风格
{% endnote %}

<!-- Flat 风格 -->
{% note info flat fas fa-adjust %}
Flat Info自选图标风格
{% endnote %}

{% note warning flat %}
Flat Warning风格
{% endnote %}

<!-- Simple 风格 -->
{% note cogs simple %}
Simple Cogs风格
{% endnote %}

{% note default simple no-icon %}
Simple Default无图标风格
{% endnote %}

<!-- Disabled 风格 -->
{% note info disabled %}
Disabled Info风格 
{% endnote %}

{% note danger disabled fas fa-skull %}
Disabled Danger风格
{% endnote %}

气泡提示 (Tip)

如果觉得传统的提示块过于中规中矩，也可以使用气泡提示。带有立体悬浮感的圆角卡片风格，特别适合用来插入“知识扩展”、“避坑指南”或是“小贴士”等等。

1
2
3
{% tip [主题/图标] %}
这是提示内容，支持Markdown解析。
{% endtip %}
主题图标主题图标
defaultbolt
primaryban
successhome
infosync
warningcogs
dangerkey
errorbell
  • 图标设置: 和提示块标签一样，支持在主题后直接传入 FontAwesome 完整类名（例如fas fa-fire）来覆盖上述对应主题的默认图标。
  • 书写要求：主题需放在首位（若不填则默认使用 info 样式），自选图标类名紧随其后，内容区域支持完整的 Markdown 语法解析。

信息提示 (Info)：默认样式，可用于常规信息说明

成功提示 (Success)：标识任务完成或状态正常

警告提示 (Warning)：标识需要引起注意的事项

错误提示 (Error)：标识危险或禁止的操作

通知提示 (Bell)：标识带更新或通知内容

使用 error 颜色背景 + 自选骷髅图标

使用 bolt 颜色背景 + 自选闪电图标

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
{% tip info %}
信息提示 (Info)：默认样式，可用于常规信息说明
{% endtip %}

{% tip success %}
成功提示 (Success)：标识任务完成或状态正常
{% endtip %}

{% tip warning %}
警告提示 (Warning)：标识需要引起注意的事项
{% endtip %}

{% tip error %}
错误提示 (Error)：标识危险或禁止的操作
{% endtip %}

{% tip bell %}
通知提示 (Bell)：标识带更新或通知内容
{% endtip %}

{% tip error fas fa-skull %}
使用 **error** 颜色背景 + 自选骷髅图标
{% endtip %}

{% tip bolt fas fa-bolt-lightning %}
使用 **bolt** 颜色背景 + 自选闪电图标 
{% endtip %}

时间轴 (Timeline)

1
2
3
4
5
{% timeline 年度节点 [主轴色彩(可选)] %}
<!-- timeline [时间标题] -->
[节点详情正文]
<!-- endtimeline -->
{% endtimeline %}
  • 年度节点: 顶层标题文字，支持带空格和各种标点符号。
  • 主轴色彩: (留空) 、红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色。
  • 时间标题: 通常写具体的日期或子事件标题。
  • 书写要求：大标题与主轴色彩之间支持使用逗号或空格分隔。各节点详情正文支持完整的 Markdown 语法解析。

2026年 (自定义颜色)

2026-05-09 彻底重构底层架构

今天完成了主题标签引擎解耦，彻底修复了按需加载机制导致的潜藏 BUG。

2026-05-08 引入全新的 CDN

抛弃了不稳定的 jsdelivr，全面拥抱国内顶尖前端静态库网络。

2025年 (只需留空内容即可变为新的年度节点)

2025-12-31 跨年夜

告别了充满挑战的2025年，迎接崭新的曙光！

2024年 (默认主题色)

2024-06-01 儿童节

享受这个没有颜色设定的世界！系统将自动接管它的全部配色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% timeline 2026年 (自定义颜色) green %}
<!-- timeline 2026-05-09 彻底重构底层架构 -->
今天完成了主题标签引擎解耦，彻底修复了按需加载机制导致的潜藏 BUG。
<!-- endtimeline -->
<!-- timeline 2026-05-08 引入全新的 CDN -->
抛弃了不稳定的 jsdelivr，全面拥抱国内顶尖前端静态库网络。
<!-- endtimeline -->

<!-- timeline 2025年 (只需留空内容即可变为新的年度节点) -->
<!-- endtimeline -->
<!-- timeline 2025-12-31 跨年夜 -->
告别了充满挑战的2025年，迎接崭新的曙光！
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2024年 (默认主题色) %}
<!-- timeline 2024-06-01 儿童节 -->
享受这个没有颜色设定的世界！系统将自动接管它的全部配色。
<!-- endtimeline -->
{% endtimeline %}

按钮 (Btn)

1
2
3
4
5
6
7
8
9
10
11
12
13
{​% btn [链接], [文字], [图标(可选)], [修饰(可选)] %}

# 1.只有文字，无图标和修饰类
{% btn /链接地址, 按钮文字 %}

# 2. 文字加图标 ，无修饰类
{% btn /链接地址, 按钮文字, fas fa-download %}

# 3. 文字加修饰类，无图标 
{% btn /链接地址, 按钮文字,, blue larger %}

# 4. 文字加图标加修饰类 
{% btn /链接地址, 按钮文字, fas fa-download, blue larger %}
参数选项
链接内链 path或外链 https://…
文字任意文本
图标FontAwesome 完整类名，留空则无图标
修饰可组合多个，空格分隔（见下表）
类别选项
颜色红色、黄色、绿色、青色、蓝色、灰色、紫色、橙色、粉色、金色、自动主题色
样式(留空) 、outline
尺寸(留空) 、larger
位置center、left、right
  • 多按钮并排居中：如果想让多个按钮并排显示且整体居中，要在最外层包裹一个 <div class=”btn-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
{% btn /, 普通实心 %}{% btn /, 普通空心,, outline %}

---

{% btn /, 大号实心, fas fa-sun, red larger %}{% btn /, 大号空心, fas fa-leaf, outline green larger %}

---

{% btn /, 居左按钮, fas fa-align-left, left %}{% btn /, 居中按钮, fas fa-align-center, center %}{% btn /, 居右按钮, fas fa-align-right, right %}

---

<span>
{% btn 'https://example.com/',不设置,,larger %}
{% btn 'https://example.com/',居中时,,blue larger %}
{% btn 'https://example.com/',会自动,,pink larger %}
{% btn 'https://example.com/',换行,,red larger %}
{% btn 'https://example.com/',行内,,purple larger %}
{% btn 'https://example.com/',自适应,,orange larger %}
{% btn 'https://example.com/',排列,,green larger %}
</span>

---

<div class="btn-center">
{% btn 'https://example.com/',设置,,outline larger %}
{% btn 'https://example.com/',居中时,,outline blue larger %}
{% btn 'https://example.com/',会自动,,outline pink larger %}
{% btn 'https://example.com/',根据,fas fa-sun,outline red  larger %}
{% btn 'https://example.com/',容器,,outline purple larger %}
{% btn 'https://example.com/',自适应,,outline orange larger %}
{% btn 'https://example.com/',居中排列,,outline green larger %}
</div>

按钮卡组 (Btns)

1
2
3
4
{% btns [布局/网格/模式类名(可选)] %}
{% cell 标题, 链接（可选）, 图片URL或图标类名, 描述文字（可选） %}
{% cell 标题, 链接, 图片URL或图标类名 %}
{% endbtns %}
参数选项
网格grid2~grid5（默认 grid3），等宽网格，屏幕缩小时会自动减列
图标circle/rounded，头像或图标呈圆形/圆角矩形，布局竖排（上图下字）
排列fill/wide/around/center，均匀拉伸铺满/加宽内边距/等距散开不贴边/居中排列不拉伸
  • btns：外层容器，接受各类修饰类名（空格分隔，见参数配置）。
  • cell：卡片子项，参数必须以逗号分隔，第3个参数如果以http开头，或包含 .*或者 /，将自动识别为图片 URL，否则识别为 FontAwesome 图标类名。
  • 文本：如果标题或描述文本中本身带有英文逗号，需用单双引号将该段文字包裹起来（如 ‘包含, 逗号的标题’）。

默认排列 (flex wrap)：

下载源码

查看源码

查看文档

官方文档

访问主页

个人主页

居中排列 (center)：

设计

UI/UX

开发

Frontend

部署

DevOps

grid3 网格：

Hexo

博客框架

Solitude

主题

GitHub

代码托管

grid4 网格 + rounded 圆角矩形图标：

VS Code

编辑器

Terminal

命令行

Git

版本控制

Docker

容器化

fill (均匀拉伸填满)：

首页
归档
关于

wide center (加宽 + 居中)：

标签
分类

around (等距分散)：

设计
开发
运维
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
默认排列 (flex wrap)：

{% btns %}
{% cell 下载源码, https://github.com, fab fa-github, 查看源码 %}
{% cell 查看文档, https://hexo.io, fas fa-book, 官方文档 %}
{% cell 访问主页, /, fas fa-home, 个人主页%}
{% endbtns %}

居中排列 (center)：

{% btns center %}
{% cell 设计, /, fas fa-palette, UI/UX %}
{% cell 开发, /, fas fa-code, Frontend %}
{% cell 部署, /, fas fa-rocket, DevOps %}
{% endbtns %}

grid3 网格：

{% btns grid3 %}
{% cell Hexo, https://hexo.io, fas fa-h-square, 博客框架 %}
{% cell Solitude, https://github.com/everfu/hexo-theme-solitude, fas fa-moon, 主题 %}
{% cell GitHub, https://github.com, fab fa-github, 代码托管 %}
{% endbtns %} 

grid4 网格 + rounded 圆角矩形图标：

{% btns rounded grid4 center %}
{% cell VS Code, https://code.visualstudio.com, fas fa-code, 编辑器 %}
{% cell Terminal, /, fas fa-terminal, 命令行 %}
{% cell Git, https://git-scm.com, fab fa-git-alt, 版本控制 %}
{% cell Docker, https://docker.com, fab fa-docker, 容器化 %}
{% endbtns %}

fill (均匀拉伸填满)：

{% btns fill %}
{% cell 首页, /, fas fa-home %}
{% cell 归档, /archives, fas fa-archive %}
{% cell 关于, /about, fas fa-user %}
{% endbtns %}

wide center (加宽 + 居中)：

{% btns wide center %}
{% cell 标签, /tags, fas fa-tags %}
{% cell 分类, /categories, fas fa-layer-group %}
{% endbtns %}

around (等距分散)：

{% btns around %}
{% cell 设计, /, fas fa-palette %}
{% cell 开发, /, fas fa-code %}
{% cell 运维, /, fas fa-server %}
{% endbtns %}
1
{​% link2 [标题],[副标题],[链接] %}
参数选项
标题链接主标题
副标题链接描述信息
链接站内链接/path或站外链接 https://…
引用站外链接
Solitude主题文档
极简而强大的Hexo主题
1
{% link2 Solitude主题文档, 极简而强大的Hexo主题, https://solitude.js.org/ %}

评分卡片 (Card)

1
{% card [名称],[链接],[封面图],[评分],[短评],[图标类名],[标签文字],[宽度],[高度] %}
参数默认
名称未知
链接地址(空)
封面背景图纯色 #333
评分 (0~5)0
短评文字此作品博主暂未作出评价
图标类名(空)
标签文字(空)
卡片宽度200px
卡片高度275px
  • 书写要求：参数按位置严格对应，参数间以半角英文逗号分隔。可省略尾部参数使用默认值；若需配置后置参数（如修改评分或宽高），中间未配置项必须使用逗号占位，例如 {​% card 作品名, 链接, 封面, 4.5 %​}。标题与短评内部请避免使用半角逗号。
快速简单且强大的博客框架查看详情
博客框架
Hexo官方
1
{% card Hexo官方, https://hexo.io/, /img/banner.avif, 4.5, 快速简单且强大的博客框架, fas fa-blog, 博客框架 %}

代码仓库名片 (Repositories)

1
2
3
4
{​% github [拥有者/仓库名] %}
{​% gitee [拥有者/仓库名] %}
{​% gitlab [拥有者/仓库名] %}
{​% gitea [拥有者/仓库名] %}
  • 支持平台: GitHub、Gitee、GitLab、Gitea。
  • 拥有者/仓库名: 填写目标仓库的相对路径，例如 everfu/hexo-theme-solitude，无需填写完整链接。

1
{% github everfu/hexo-theme-solitude %}

多媒体播放器 (Media)

1
2
3
4
5
1. 网易/QQ 音乐：{​% music [平台] [类型] [ID] [宽度(可选)] [位置(可选)] %}
2. YouTube 视频：{​% youtube [视频ID] [类型] [Cookie模式] [宽度(可选)] [位置(可选)] %}
3. Bilibili 视频：{​% bvideo [BV号] [宽度(可选)] [位置(可选)] %}
4. 音频直链播放器：{​% audio [音频直链] [宽度(可选)] [位置(可选)] %}
5. 视频直链播放器：{​% video [视频直链] [宽度(可选)] [位置(可选)] %}
Music选项
平台(留空) （netease）、tencent
类型(留空) （song）、playlist
Youtube选项
类型(留空) （video） 、playlist
Cookie(留空) （true） 、false
排版选项
宽度(留空) （100%）、百分比（如 80%）、像素值（如 600px），或键值对 width=80%
位置(留空) （无特定边距）、center（居中）、left（靠左）、right（靠右），或键值对 align=center
  • 说明：所有多媒体标签均可附加宽度与对齐参数。音频请使用 audio，视频直链请使用 video。
1
2
3
4
5
6
{% music netease playlist 13234120933 80% left %}
{% music tencent song 001nr3og1nNDK4 80% center %}
{% youtube PNu_ifvonjc 80% right %}
{% bvideo BV1QK4y1a7Uv 80% center %}
{% audio https://npm.elemecdn.com/[email protected]/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 80% left %}
{% video https://example.com/video.mp4 80% center %}

图片 (Pic)

1
2
3
4
5
6
7
8
9
10
11
12
# 1.日常排版（自动在页面中居中，并自带底部描述文本）
{% pic 图片链接, [可选：图片描述], [可选：自定义间距] %}

# 2.行内小图（在文字中间插入表情包或小 Icon）
{% pic 图片链接, inline, [可选：对齐], [可选：高度] %}

# 3.指定宽度
{% pic 图片链接, [可选：宽度], [可选：图片描述] %}

# 4.悬浮环绕（用于图文混排）
大段文字前半部分...{% pic 图片链接, [可选：宽度], [可选：浮动方向], [可选：图片描述], [可选：自定义间距] %}...紧接着写剩下的环绕文字...
{% clear %}
参数选项
尺寸纯数字或以px、%、em 结尾的数值，控制图片宽度或高度
版式inline（行内小图）、left（左悬浮）、right（右悬浮）、center（居中）
对齐top（顶部）、bottom（底部）、middle（默认垂直居中），仅 inline 模式可用
间距以 margin:开头的文本（如 margin: 10px 0），强制覆盖默认边距
描述不符合上述规则的其他中英文字符串，自动识别为底部说明文本
  • 各参数之间必须使用半角英文逗号分隔。除首位图片链接外，其余参数均可选且无序。
  • 描述文字内请勿使用半角逗号，以免被解析引擎误切分为多个参数。
  • 悬浮模式不建议写图片描述，以保证混排美观。
  • 默认版式预设外边距:
    左悬浮：margin: 6px 10px 0 0
    右悬浮：margin: 6px 0 0 10px
    居中：margin: 0 auto 0.8rem

日常排版：
图片描述说明

行内小图：
它能够完全融入文本流，绝不会把你的行距给撑爆。如果你不写尺寸，默认就是跟随字体的1.2em。

指定宽度：
图片描述说明

悬浮环绕：
当你写下游记、或者是摄影日记时，你现在的目光正跟随着这段文字正常地从左到右阅读。你看，在遇见图片之前，这里的文字是完整地铺满整个屏幕宽度的。而当你读到这里，奇妙的事情发生了！因为我们在段落的正中间插入了一张靠右浮动的风景图，顺滑的文字流就像遇到了礁石，立刻分流到了这张图片的左侧。这种排版彻底打破了千篇一律的居中死板格局，为你的文章带来了高级商业杂志般的视觉张力。文字会自动去填补侧边的空白，不仅如此，由于这段文字经过了刻意的加长，当文字的行数足够多、高度超过了右侧悬浮的图片时，你会惊喜地发现，这股文字洪流并没有就此停止，而是顺其自然地流淌并完美地包裹住了图片的下方边缘！这就是最纯正的杂志级全包围排版，不仅极大地提升了阅读的趣味性，更让整个页面的空间利用率达到了极致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
日常排版：
{% pic /img/banner.avif, 图片描述说明 %}

---

行内小图：
它能够{% pic /img/inline.png, inline, 1.5em %} 完全融入文本流，绝不会把你的行距给撑爆。如果你不写尺寸，默认就是跟随字体的1.2em。

---

指定宽度：
{% pic /img/banner.avif, 300px, 图片描述说明 %}

---

**悬浮环绕：
当你写下游记、或者是摄影日记时，你现在的目光正跟随着这段文字正常地从左到右阅读。你看，在遇见图片之前，这里的文字是完整地铺满整个屏幕宽度的。{% pic /img/banner.avif, 250px, right %}而当你读到这里，奇妙的事情发生了！因为我们在段落的正中间插入了一张靠右浮动的风景图，顺滑的文字流就像遇到了礁石，立刻分流到了这张图片的左侧。这种排版彻底打破了千篇一律的居中死板格局，为你的文章带来了高级商业杂志般的视觉张力。文字会自动去填补侧边的空白，不仅如此，由于这段文字经过了刻意的加长，当文字的行数足够多、高度超过了右侧悬浮的图片时，你会惊喜地发现，这股文字洪流并没有就此停止，而是顺其自然地流淌并完美地包裹住了图片的下方边缘！这就是最纯正的杂志级全包围排版，不仅极大地提升了阅读的趣味性，更让整个页面的空间利用率达到了极致。
{% clear %}
1
2
3
4
5
6
7
8
# 1.相册入口卡片
{% galleryGroup [相册名称] [相册描述] [跳转链接] [封面链接] %}
# 2.瀑布流相册页
{% gallery %}
![图片描述](图片链接)
![图片描述](图片链接)
![图片描述](图片链接)
{% endgallery %}
参数说明
相册名称显示在卡片上方的主标题
相册描述显示在主标题下方的描述文字
跳转链接点击卡片后前往的页面地址（若不需要跳转，可填入#）
封面链接卡片背景封面地址，支持相对路径或外部 URL
图片描述中括号内的文字，可选，图片加载失败时的替代文本和悬浮提示词
图片链接小括号内的链接，图片真实地址，支持相对路径或外部 URL
  • 书写要求：galleryGroup 参数按空格解构。若相册名称或相册描述中包含空格，必须使用单/双引号包裹该参数，例如 {​% galleryGroup "我的相册" "记录生活 的 每一个瞬间" # /img/banner.avif %​}，以免被错位解析。
Group Image Gallery
我的相册

记录生活中的美好瞬间

横幅图片
横幅图片
横幅图片
横幅图片
横幅图片
横幅图片
1
2
3
4
5
6
7
8
9
10
{% galleryGroup 我的相册 记录生活中的美好瞬间 # /img/banner.avif %}

{% gallery %}
![横幅图片](/img/banner.avif)
![横幅图片](/img/banner.avif)
![横幅图片](/img/banner.avif)
![横幅图片](/img/banner.avif)
![横幅图片](/img/banner.avif)
![横幅图片](/img/banner.avif)
{% endgallery %}

结语：抛弃繁臃冗长的堆砌，所有的极简克制，皆是为了衬托文字本身的重量。