vuepress-theme-plume/docs/guide/markdown/collapse.md

title, icon, createTime, permalink

title	icon	createTime	permalink
折叠面板	carbon:collapse-categories	2025/03/22 22:27:22	/guide/markdown/collapse/

概述

在 markdown 中，使用 ::: collapse 容器，包含 markdown 无序列表语法，实现 ==折叠面板== 。

• 支持通过 accordion 设置为 ==手风琴== 模式

启用

该功能默认不启用，你需要在 theme 配置中启用。

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      collapse: true, // [!code ++]
    }
  })
})

使用

在 markdown 中，使用 ::: collapse 容器，包含 markdown 无序列表语法，每一项为一个单独的可折叠区域。

::: collapse
- 标题 1        <!-- 标题，点击控制 展开/折叠 -->
                <!-- 标题与内容必须空一行 -->
  内容          <!-- 内容，被折叠的区域-->

- 标题 2

  内容
:::

对于列表的每一个项：

• 从 首行开始 到 首个空行，均为 标题

• 首个空行之后: 正文内容

:::important 请注意添加正确的缩进 :::

一个简单的例子：

输入：

::: collapse
- 标题 1

  正文内容

- 标题 2

  正文内容
:::

输出：

::: collapse

• 标题 1

  正文内容

• 标题 2

  正文内容 :::

配置

在 ::: collapse 容器语法之后，跟随配置项：

• accordion ：折叠面板设置为 ==手风琴== 模式，在手风琴模式下，只允许展开一个面板，点击其他面板会关闭之前的面板。
• expand ：默认展开面板，在手风琴模式下无效。

在列表项，标题之前，可通过特殊标记 :+ / :- 来设置当前项是否 展开 / 折叠。

示例

基本用法

输入：

::: collapse
- 标题 1

  正文内容

- 标题 2

  正文内容
:::

输出：

::: collapse

• 标题 1

  正文内容

• 标题 2

  正文内容 :::

默认全部展开

添加 expand 选项，默认展开所有面板

输入：

::: collapse expand
- 标题 1

  正文内容

- 标题 2

  正文内容
:::

输出：

::: collapse expand

• 标题 1

  正文内容

• 标题 2

  正文内容 :::

手风琴模式

添加 accordion 选项，设置为手风琴模式，只允许展开一个面板，点击其他面板会关闭之前的面板

::: collapse accordion
- 标题 1

  正文内容

- 标题 2

  正文内容

- 标题 3

  正文内容
:::

输出：

::: collapse accordion

• 标题 1

  正文内容

• 标题 2

  正文内容

• 标题 3

  正文内容 :::

:+ 标记项为展开

折叠面板默认全部关闭，可以使用 :+ 标记项初始状态为展开。

输入：

::: collapse
- 标题 1

  正文内容

- :+ 标题 2

  正文内容

- :+ 标题 3

  正文内容
:::

输出：

::: collapse

• 标题 1

  正文内容

• :+ 标题 2

  正文内容

• :+ 标题 3

  正文内容 :::

:- 标记项为折叠

折叠面板配置 expand 时默认全部展开，可以使用 :- 标记项初始状态为折叠。

输入：

::: collapse expand
- 标题 1

  正文内容

- :- 标题 2

  正文内容

- 标题 3

  正文内容
:::

输出：

::: collapse expand

• 标题 1

  正文内容

• :- 标题 2

  正文内容

• 标题 3

  正文内容 :::