Markdown 折叠面板 - xiaobuhui的博客

折叠面板把相关的可选细节收拢在一个紧凑组中。标题与正文保留行内和块级 Markdown，而原生折叠语义让每个面板无需客户端 JavaScript 即可使用。

独立面板#

默认情况下，各项目独立展开。给标题加 :+ 可让该项初始就展开，加 :- 可让其在组使用 expand 时保持收起。

环境要求

安装依赖前，请使用 Node.js 22 或更高版本，并启用 Corepack。

安装依赖

在仓库根目录运行工作区包命令。

1
pnpm.cmd install

校验命令

构建生产产物前，请检查内容流水线。

当只需要保留一个展开项时，添加 accordion。浏览器直接对原生折叠元素分组，因此打开另一项会关闭上一项，且无需 hydration。

expand 在这里的作用是什么？

当没有任何项带有 :+ 标记时，它会初始展开第一项。

标题可以包含 Markdown 吗？

可以。标题支持行内强调与 code，面板正文则支持完整的块级 Markdown。

在窄屏上会发生什么？

内容内边距会收紧，长文本自动换行，而内嵌代码保留自身水平滚动区域。

1
::: collapse accordion
2
- :+ First title
3

4
  First panel content.
5

6
- Second title with `code`
7

8
  Second panel content.
9
:::

容器必须恰好包含一个顶层无序列表。每个项目都需要一段标题、一个空行以及正文内容。无效或混合的输入会保持为普通可读的 Markdown 列表。