这篇文章整理本站 Solace 主题当前注册的文章标签外挂。每一节都先给出页面里的实际效果，再给出对应代码；以后写文章时可以直接按需复制。

快速索引

标签 用途 是否闭合
emoji 插入本地表情图 否
label 行内彩色标签 否
note / subnote 提示块、警告块 是
hideToggle 可折叠内容 是
tabs / subtabs / subsubtabs 选项卡内容 是
gallery 图片瀑布流相册 是
audioCard 音频播放卡片 否
chartjs Chart.js 图表 是

Emoji 表情

emoji 从 /img/emoji/表情名.png 读取图片。第二个参数是尺寸，纯数字会按 px 处理，也支持 px、em、rem、%、vw、vh。

演示：今天适合记录一点东西 手机相机，写完再给自己一点肯定 值得肯定。

1
今天适合记录一点东西 {% emoji 手机相机 25 %}，写完再给自己一点肯定 {% emoji 值得肯定 42 %}。

Label 行内标签

label 适合在一句话中标注关键词。颜色 class 支持 default、blue、pink、red、orange、purple、green。

演示：这是 默认、信息、成功、警告、危险、紫色 标签。

1
这是 {% label 默认 default %}、{% label 信息 blue %}、{% label 成功 green %}、{% label 警告 orange %}、{% label 危险 red %}、{% label 紫色 purple %} 标签。

Note 提示块

note 和 subnote 都是提示块。常用类型有 default、primary、info、success、warning、danger；样式可选 flat、modern、simple、disabled。中间可以传 Font Awesome 图标类名。

1
2
3
4
5
6
7
8
9
10
11
{% note info fa-solid fa-lightbulb %}
这是一个 `info` 提示块。里面可以写 **Markdown**。
{% endnote %}

{% note success modern fa-solid fa-check %}
这是一个 `success modern` 提示块。
{% endnote %}

{% note warning simple fa-solid fa-triangle-exclamation %}
这是一个 `warning simple` 提示块。
{% endnote %}

HideToggle 折叠内容

hideToggle 用来收纳补充说明、长代码、剧透内容。末尾加 open、true、展开 或 默认展开 可以默认展开。

点击展开：这里放一段补充说明

这里是折叠起来的内容。

  • 支持 Markdown 列表
  • 支持 行内代码
  • 也支持图片、表格等常规内容
默认展开的折叠块

这个折叠块加载时就是打开状态。

1
2
3
4
5
6
7
8
9
10
{% hideToggle 点击展开：这里放一段补充说明 %}
这里是折叠起来的内容。

- 支持 Markdown 列表
- 支持 `行内代码`
{% endhideToggle %}

{% hideToggle 默认展开的折叠块 open %}
这个折叠块加载时就是打开状态。
{% endhideToggle %}

Tabs 选项卡

tabs 的参数格式是 名称,默认激活项序号。内容块用 HTML 注释分隔，标题后面可以用 @图标类名 添加图标。

先把想法写下来，不急着追求完整。这个阶段重点是让内容出现。

回头检查标题、段落顺序、例子和读者可能卡住的地方。

补齐封面、标签、摘要，最后预览一遍页面效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 写作流程,2 %}
<!-- tab 草稿@fa-solid fa-pen -->
先把想法写下来，不急着追求完整。
<!-- endtab -->

<!-- tab 修订@fa-solid fa-wand-magic-sparkles -->
回头检查标题、段落顺序、例子和读者可能卡住的地方。
<!-- endtab -->

<!-- tab 发布@fa-solid fa-paper-plane -->
补齐封面、标签、摘要，最后预览一遍页面效果。
<!-- endtab -->
{% endtabs %}

gallery 可以从内部 Markdown 图片中读取，也可以使用 url 模式传入一个地址。内部图片模式参数是 按钮,每次加载数量,首次加载数量。

[{"url":"https://r2.itxyu.cn/uploads/20260921081747346.jpg","alt":"","title":""},{"url":"https://r2.itxyu.cn/uploads/20260921081745717.jpg","alt":"","title":""},{"url":"https://r2.itxyu.cn/uploads/20260921081749840.jpg","alt":"","title":""},{"url":"https://r2.itxyu.cn/uploads/20260921081743632.jpg","alt":"","title":""},{"url":"https://r2.itxyu.cn/uploads/20260921081739326.jpg","alt":"","title":""},{"url":"https://r2.itxyu.cn/uploads/20260921081707908.jpg","alt":"","title":""}]
1
2
3
4
5
6
7
8
{% gallery %}
![](https://r2.itxyu.cn/uploads/20260921081747346.jpg)
![](https://r2.itxyu.cn/uploads/20260921081745717.jpg)
![](https://r2.itxyu.cn/uploads/20260921081749840.jpg)
![](https://r2.itxyu.cn/uploads/20260921081743632.jpg)
![](https://r2.itxyu.cn/uploads/20260921081739326.jpg)
![](https://r2.itxyu.cn/uploads/20260921081707908.jpg)
{% endgallery %}

AudioCard 音频卡片

audioCard 支持位置参数或键值参数。常用键包括 src、title、artist、cover、autoplay、loop、preload、type。

示例音频卡片
Sunny
00:00 00:00 
1
{% audioCard src="/audio/demo.mp3" title="示例音频卡片" artist="Sunny" cover="/img/icon.webp" autoplay=false loop=false %}

Chart.js 图表

chartjs 的参数格式是 宽度百分比,是否并排,图表ID。内容中必须包含 <!-- chart --> 与 <!-- endchart -->，说明文字可放在 <!-- desc --> 与 <!-- enddesc --> 中。

image-20260923155620164

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% chartjs 88,false,solace-tag-plugin-chart %}
<!-- chart -->
{
  "type": "bar",
  "data": {
    "labels": ["emoji", "note", "tabs"],
    "datasets": [{
      "label": "示例使用热度",
      "data": [25, 18, 13],
      "backgroundColor": ["#5b8def", "#7bd389", "#f6bd60"]
    }]
  },
  "options": {
    "responsive": true,
    "plugins": { "legend": { "display": false } },
    "scales": { "y": { "beginAtZero": true } }
  }
}
<!-- endchart -->
<!-- desc -->
这里写图表说明，支持 Markdown。
<!-- enddesc -->
{% endchartjs %}

常规 Markdown 与 Hexo 内置标签

除了 Solace 自己的标签外挂，文章页仍然支持 Markdown 常规语法：标题、段落、引用、列表、表格、链接、图片、代码块等。主题还保留了 Hexo 内置标签的样式，例如视频容器和左右浮动引用。

1
2
3
{% raw %}
```markdown
{% emoji 开心 48 %}
{% endraw %}

## 写作备忘

- 表情文件名必须和 `/img/emoji/` 下的图片文件名一致，例如 `手机相机.png` 对应 `{% emoji 手机相机 25% %}`。
- `tabs`、`chartjs` 都依赖 HTML 注释分隔内容，注释名称写错时通常不会报错，只是内容不显示。
- `audioCard` 需要真实音频地址才能播放；没有音频文件时只会显示卡片 UI。
- `chartjs` 标签可以生成 DOM，但主题配置关闭时不会加载对应前端库。