399 字
2 分钟
Markdown collapse-panels

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

独立面板#

默认情况下,各项独立展开。在标题前加 :+ 可让该项初始展开,或加 :- 在组使用 expand 时保持关闭。

包要求

使用 Node.js 22 或更高版本,并在安装包之前启用 Corepack。

安装依赖

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

Terminal window
pnpm.cmd install
校验命令

在构建生产输出之前检查内容管线。

  • pnpm.cmd check:manifest
  • npx.cmd astro check

手风琴模式#

当只应保留一个展开项时,添加 accordion。浏览器会直接对原生折叠元素分组,因此打开另一项会在无需注水的情况下关闭前一项。

expand 在这里有什么作用?

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

标题可以包含 Markdown 吗?

可以。标题支持行内 强调代码,而面板正文支持完整的块级 Markdown。

在窄屏上会发生什么?

内容内边距会变紧凑,长文本会换行,嵌入的代码保留自身的水平滚动区域。

编写语法#

::: collapse accordion
- :+ First title
First panel content.
- Second title with `code`
Second panel content.
:::

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

Markdown collapse-panels
https://xiaomai.l.cd/posts/折叠面板/
作者
XiaoMai
发布于
2026-08-28
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取