399 字
2 分钟
Markdown collapse-panels
collapse-panels把相关的可选细节放在一个紧凑的组里。标题与正文保留行内和块级 Markdown,而原生的折叠语义让每个面板都无需客户端 JavaScript 即可使用。
独立面板
默认情况下,各项独立展开。在标题前加 :+ 可让该项初始展开,或加 :- 在组使用 expand 时保持关闭。
包要求
使用 Node.js 22 或更高版本,并在安装包之前启用 Corepack。
安装依赖
从仓库根目录运行工作区的包命令。
pnpm.cmd install校验命令
在构建生产输出之前检查内容管线。
pnpm.cmd check:manifestnpx.cmd astro check
手风琴模式
当只应保留一个展开项时,添加 accordion。浏览器会直接对原生折叠元素分组,因此打开另一项会在无需注水的情况下关闭前一项。
expand 在这里有什么作用?
当没有任何项带有 :+ 标记时,它会初始展开第一项。
标题可以包含 Markdown 吗?
可以。标题支持行内 强调 和 代码,而面板正文支持完整的块级 Markdown。
在窄屏上会发生什么?
内容内边距会变紧凑,长文本会换行,嵌入的代码保留自身的水平滚动区域。
编写语法
::: collapse accordion- :+ First title
First panel content.
- Second title with `code`
Second panel content.:::容器必须恰好包含一个顶层无序列表。每个项都需要有标题段落、一个空行以及正文内容。无效或混合的输入会保持为普通可读的 Markdown 列表。
分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 19 天
部分内容可能已过时