内置布局系统

布局（Layout）决定幻灯片内容的排版结构：标题在顶部还是居中、是否有左右分栏、是否留出大图区域。Slidev 内置十余种布局，覆盖大多数演示场景。

布局是什么

每张幻灯片都使用一个布局渲染。布局由 Vue 组件实现，负责放置内容的位置与样式。在 Frontmatter 中指定：

---
layout: center
---

# 居中内容

不指定时使用默认布局 default。

常用布局一览

布局	效果	适用
default	标题在顶部、内容正文区	常规内容页
cover	大标题 + 副标题，适合封面	封面、章节封面
center	内容水平垂直居中	强调页、金句页
image	右侧图片 + 左侧内容	图文对照
image-right	内容左、图片右	配图说明
image-left	图片左、内容右	配图说明
fact	大号数字/事实居中	数据强调
statement	大号声明文字	观点宣言
quote	引用样式	名人名言、引用
section	章节标题页	章节分隔
two-cols	左右两栏	对比、双内容
three-cols	左右中三栏	三内容对比
grid	网格布局	多卡片、多图

布局详解

default 默认布局

---
layout: default
---

## 章节标题

正文内容，标题在顶部，正文在下方。

- 列表项
- 列表项

cover 封面布局

---
layout: cover
---

# 主标题

副标题或演讲信息

封面布局让标题占据页面上方大部分空间，适合开场页与章节封面。

center 居中布局

---
layout: center
---

# 居中展示

内容垂直水平居中，适合重点结论与金句。

image / image-right / image-left 图文布局

---
layout: image
image: /architecture.png
---

# 架构说明

配合图片讲解，图片区域在右侧。

image 与 image-right 图片居右，image-left 图片居左，正文始终与图片对置。

fact 数字布局

---
layout: fact
---

# 99.99%

可用性承诺

大号数字居中展示，适合核心指标。

statement 声明布局

---
layout: statement
---

# 简单才是终极的复杂

一段留白充足的声明式页面。

quote 引用布局

---
layout: quote
---

# 任何足够先进的技术都与魔法无异

> 亚瑟·克拉克

section 章节布局

---
layout: section
---

# 第二部分

技术架构详解

章节分隔页，与正文页视觉差异明显。

two-cols 两栏布局

---
layout: two-cols
---

# 左侧内容

左栏文字。

::right::

# 右侧内容

右栏文字。

::right:: 插槽把内容切到右栏（见「布局使用与切换」）。

three-cols 三栏布局

---
layout: three-cols
---

# 第一栏

---

# 第二栏

::right::

# 第三栏

::right::

使用分隔符 --- 切分第一栏，::right:: 依次切换到第二、三栏。

grid 网格布局

---
layout: grid
---

::grid{cols=2}

卡片一

卡片二

::

网格布局通过 ::grid{cols=n} 快速排布多列卡片。

布局选择速查

内容类型	推荐布局
封面	cover
章节分隔	section
普通正文	default
重点结论	center / fact
观点宣言	statement
引用	quote
图文讲解	image 系列
对比内容	two-cols / three-cols
多卡片	grid

内置布局覆盖了演示的主流排版需求；不满足时可在 layouts/ 目录开发自定义布局（见「自定义布局开发」）。