内置布局

本页列出了 Slidev 提供的所有内置布局。这些布局可以通过幻灯片的 frontmatter 中的 layout 选项来使用。

需要注意的是，📖 主题和插件 可以提供额外的布局。要添加自己的布局，请参见 📖 编写布局。

center

在屏幕中间展示内容。

cover

用来展示演讲稿的封面页，可以包含演讲的标题、演讲者、时间等。

default

最基础的布局，用于展示任意类型的内容。

end

演讲的最后一页。

fact

用来在屏幕上突出展示很多事实或数据。

full

使用屏幕全部空间来展示内容。

image-left

在屏幕左侧展示图片，屏幕右侧展示内容。

用法

---
layout: image-left

# the image source
image: /path/to/the/image

# a custom class name to the content
class: my-cool-content-on-the-right
---

image-right

在屏幕右侧展示图片，屏幕左侧展示内容。

用法

---
layout: image-right

# the image source
image: /path/to/the/image

# a custom class name to the content
class: my-cool-content-on-the-left
---

image

将图片作为页面的主要内容进行展示。

用法

---
layout: image

# the image source
image: /path/to/the/image
---

你可以使用 backgroundSize 选项来控制背景图片的大小：

---
layout: image
image: /path/to/the/image
backgroundSize: contain
---

---
layout: image-left
image: /path/to/the/image
backgroundSize: 20em 70%
---

iframe-left

在屏幕左侧通过 <iframe> 元素显示网页，内容将位于右侧。

用法

---
layout: iframe-left

# the web page source
url: https://github.com/slidevjs/slidev

# a custom class name to the content
class: my-cool-content-on-the-right
---

iframe-right

在屏幕右侧通过 <iframe> 元素显示网页，内容将位于左侧。

用法

---
layout: iframe-right

# the web page source
url: https://github.com/slidevjs/slidev

# a custom class name to the content
class: my-cool-content-on-the-left
---

iframe

幻灯片的内容是嵌入的网页。

用法

---
layout: iframe

# the web page source
url: https://github.com/slidevjs/slidev
---

intro

介绍演讲稿，通​​常带有演讲稿标题、简述、作者等信息。

none

没有任何样式的布局。

quote

突出显示引文。

section

用来标记演讲稿的新部分的开始。

statement

将主张/声明作为主要页面内容。

two-cols

将页面内容分为两列。

用法

---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right

two-cols-header

将页面内容分为两列，上方和下方的内容分开，第二行将左右两列分开。

用法

---
layout: two-cols-header
---

This spans both

::left::

# Left

This shows on the left

::right::

# Right

This shows on the right