--- title: 折叠面板 icon: carbon:collapse-categories createTime: 2025/03/22 22:27:22 permalink: /guide/markdown/collapse/ --- ## 概述 在 markdown 中，使用 `::: collapse` 容器，包含 markdown 无序列表语法，实现 ==折叠面板== 。 - 支持通过 `accordion` 设置为 ==手风琴== 模式 ## 启用 该功能默认不启用，你需要在 `theme` 配置中启用。 ```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ markdown: { collapse: true, // [!code ++] } }) }) ``` ## 使用 在 markdown 中，使用 `::: collapse` 容器，包含 markdown 无序列表语法，每一项为一个单独的可折叠区域。 ```md title="collapse.md" ::: collapse - 标题 1 内容 - 标题 2 内容 ::: ``` 对于列表的每一个项： - 从 __首行开始__ 到 __首个空行__，均为 __标题__ - __首个空行之后__: 正文内容 :::important 请注意添加正确的缩进 ::: __一个简单的例子：__ __输入：__ ```md ::: collapse - 标题 1 正文内容 - 标题 2 正文内容 ::: ``` __输出：__ ::: collapse - 标题 1 正文内容 - 标题 2 正文内容 ::: ## 配置 在 `::: collapse` 容器语法之后，跟随配置项： - `accordion` ：折叠面板设置为 ==手风琴== 模式，在手风琴模式下，只允许展开一个面板，点击其他面板会关闭之前的面板。 - `expand` ：默认展开面板，在手风琴模式下无效。 在列表项，标题之前，可通过特殊标记 `:+` / `:-` 来设置当前项是否 __展开 / 折叠__。 ## 示例 ### 基本用法 __输入：__ ```md ::: collapse - 标题 1 正文内容 - 标题 2 正文内容 ::: ``` __输出：__ ::: collapse - 标题 1 正文内容 - 标题 2 正文内容 ::: ### 默认全部展开 添加 `expand` 选项，默认展开所有面板 __输入：__ ```md /expand/ ::: collapse expand - 标题 1 正文内容 - 标题 2 正文内容 ::: ``` __输出：__ ::: collapse expand - 标题 1 正文内容 - 标题 2 正文内容 ::: ### 手风琴模式 添加 `accordion` 选项，设置为手风琴模式，只允许展开一个面板，点击其他面板会关闭之前的面板 ```md /accordion/ ::: collapse accordion - 标题 1 正文内容 - 标题 2 正文内容 - 标题 3 正文内容 ::: ``` __输出：__ ::: collapse accordion - 标题 1 正文内容 - 标题 2 正文内容 - 标题 3 正文内容 ::: ### `:+` 标记项为展开 折叠面板默认全部关闭，可以使用 `:+` 标记项初始状态为展开。 __输入：__ ```md /:+/ ::: collapse - 标题 1 正文内容 - :+ 标题 2 正文内容 - :+ 标题 3 正文内容 ::: ``` __输出：__ ::: collapse - 标题 1 正文内容 - :+ 标题 2 正文内容 - :+ 标题 3 正文内容 ::: ### `:-` 标记项为折叠 折叠面板配置 `expand` 时默认全部展开，可以使用 `:-` 标记项初始状态为折叠。 __输入：__ ```md /:-/ ::: collapse expand - 标题 1 正文内容 - :- 标题 2 正文内容 - 标题 3 正文内容 ::: ``` __输出：__ ::: collapse expand - 标题 1 正文内容 - :- 标题 2 正文内容 - 标题 3 正文内容 :::