title: 布局

布局

内置布局

由于主题可能会覆盖布局的行为，因此精确理解主题的使用、参数和例子最好的方式是查阅主题文档。

center

在屏幕中间展示内容。

cover

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

default

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

end

演讲的最后一页。

fact

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

full

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

image-left

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

用法

  1. ---
  2. layout: image-left
  4. # the image source
  5. image: ./path/to/the/image
  7. # a custom class name to the content
  8. class: my-cool-content-on-the-right
  9. ---

image-right

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

用法

  1. ---
  2. layout: image-right
  4. # the image source
  5. image: ./path/to/the/image
  7. # a custom class name to the content
  8. class: my-cool-content-on-the-left
  9. ---

image

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

用法

  1. ---
  2. layout: image
  4. # the image source
  5. image: ./path/to/the/image
  6. ---

iframe-left

Shows a web page on the left side of the screen, the content will be placed on the right side.

Usage

  1. ---
  2. layout: iframe-left
  4. # the web page source
  5. url: https://github.com/slidevjs/slidev
  7. # a custom class name to the content
  8. class: my-cool-content-on-the-right
  9. ---

iframe-right

Shows a web page on the right side of the screen, the content will be placed on the left side.

Usage

  1. ---
  2. layout: iframe-right
  4. # the web page source
  5. url: https://github.com/slidevjs/slidev
  7. # a custom class name to the content
  8. class: my-cool-content-on-the-left
  9. ---

iframe

Shows a web page as the main content of the page.

Usage

  1. ---
  2. layout: iframe
  4. # the web page source
  5. url: https://github.com/slidevjs/slidev
  6. ---

intro

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

none

没有任何样式的布局。

quote

突出显示引文。

section

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

statement

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

two-cols

将页面内容分为两列。

用法

  1. ---
  2. layout: two-cols
  3. ---
  5. # Left
  7. This shows on the left
  9. ::right::
  11. # Right
  13. This shows on the right

自定义布局 {#custom-layouts}

在你的项目根目录里创建一个 layouts/ 文件夹，然后直接把你的自定义 Vue 组件放进去。

欲了解更多，请参阅 自定义 章节。

主题提供的布局 {#theme-provided-layouts}

主题可以提供布局或者覆盖已有的。请阅读它们各自的文档，以知晓它们提供了什么。