---
title: "页面间隙与背景"
description: "了解如何在 Tiptap Pages 扩展中更改页面之间的背景颜色和间距。"
canonical_url: "https://tiptap.zhcndoc.com/pages/core-concepts/page-gap"
---

# 页面间隙与背景

了解如何在 Tiptap Pages 扩展中更改页面之间的背景颜色和间距。

> **寻找显式分页？:**
>
> 本页介绍页面之间的视觉样式（背景颜色和间距）。如需在文档中插入显式分页符，请参阅 [PageBreak 节点](https://tiptap.zhcndoc.com/pages/core-concepts/page-break-node.md) 文档。

> **从 pageBreakBackground 重命名:**
>
> `pageBreakBackground` 选项和 `setPageBreakBackground` 命令已重命名为 `pageGapBackground` 和 `setPageGapBackground`，以避免与新的 [PageBreak 节点](https://tiptap.zhcndoc.com/pages/core-concepts/page-break-node.md) 混淆。请相应地更新您的代码。

`pageGapBackground` 和 `pageGap` 选项允许您更改页面之间的区域背景颜色以及页面之间的间距。这有助于在视觉上分隔页面，或匹配您应用的背景颜色设计。

> **Interactive demo:** [PagesCustomPageGap](https://embed-pro.tiptap.dev/preview/Extensions/PagesCustomPageGap)

## 如何设置页面间距背景

页面间距背景的初始编辑器配置可以在 `.configure()` 扩展级别完成：

```js
Pages.configure({
  pageGapBackground: '#f8f8f8', // 页面之间的浅灰色
})
```

然后，在任何时候，您都可以使用公开的编辑器命令 `setPageGapBackground(color: string)` 来更改页面间距颜色：

```js
editor.commands.setPageGapBackground(pageGapBackground)
// 您还应该执行此操作！
document.body.style.backgroundColor = pageGapBackground
```

> **有用提示:**
>
> 您还应该将 body（或编辑器容器）的背景颜色更改为与页面间距背景相匹配，因为页面间距背景仅应用于页面间距本身，而不是整个文档或 Tiptap 编辑器。

## 页面间距

- 设置每个页面之间的空间。
- 默认值：`50`（像素）

### 初始配置

```js
Pages.configure({
  pageGap: 20, // 以像素为单位
})
```

### 编辑器命令

```js
editor.commands.setPageGap(20) // 以像素为单位
```

> **提示:**
>
> `pageGap` 属性仅影响页面之间的空间，而不影响页面本身。