503 字
3 分钟
Markdown 折叠面板

折叠面板可将相关联的可选详情整合到一个紧凑的分组中。标题与正文完整保留行内和块级 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
- :+ 第一个面板标题
第一个面板的正文内容。
- 第二个带 `code` 的标题
第二个面板的正文内容。
:::

容器内必须且仅能包含一个顶层无序列表。每个列表项需要包含标题段落、一个空行以及正文内容。格式不完整或混合的内容将安全降级为普通 Markdown 列表显示。

Markdown 折叠面板
https://shirone.mysqil.com/posts/collapse-panels/
作者
Shirone
发布于
2026-08-28
许可协议
CC BY-NC-SA 4.0

分享文章

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

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取