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

---
url: /guide/markdown/collapse/index.md
---
## 概述

在 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

  正文内容
  :::