slidev-layouts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Layouts

Slidev 布局

This skill covers all built-in Slidev layouts and teaches you how to use them effectively for different types of content. You'll also learn how to create custom layouts.

本技能涵盖所有Slidev内置布局，教你针对不同类型的内容高效使用它们，同时还会学习如何创建自定义布局。

When to Use This Skill

何时使用本技能

Choosing the right layout for your content
Creating visually structured slides
Using multi-column layouts
Adding background images
Building custom layouts

为你的内容选择合适的布局
创建视觉结构清晰的幻灯片
使用多列布局
添加背景图片
构建自定义布局

Using Layouts

布局使用方法

Specify a layout in the slide's frontmatter:

markdown

---
layout: center
---

在幻灯片的前置元数据中指定布局：

markdown

---
layout: center
---

Centered Content

居中内容

undefined

undefined

Built-in Layouts

内置布局

default

default（默认）

The basic layout for general content.

markdown

---
layout: default
---

适用于一般内容的基础布局。

markdown

---
layout: default
---

Default Layout

默认布局

Any content works here:

Lists
Code blocks
Images
Tables

undefined

任何内容都可在此使用：

列表
代码块
图片
表格

undefined

center

center（居中）

Centers content both horizontally and vertically.

markdown

---
layout: center
---

让内容在水平和垂直方向都居中。

markdown

---
layout: center
---

Big Statement

核心观点

Perfect for impactful single messages


**Best for**: Quotes, key takeaways, section titles

非常适合传递有冲击力的单一信息


**最佳适用场景**：引用、关键要点、章节标题

cover

cover（封面）

The opening slide with prominent title display.

markdown

---
layout: cover
background: /images/cover.jpg
---

用于开场的幻灯片，标题展示突出。

markdown

---
layout: cover
background: /images/cover.jpg
---

Presentation Title

演示文稿标题

Subtitle or author name


**Options**:
- `background`: Image URL or color

**Best for**: First slide, section openers

副标题或作者名称


**可选配置**:
- `background`: 图片URL或颜色值

**最佳适用场景**：首屏幻灯片、章节开场

intro

intro（介绍）

Introduction slide with author/presenter info.

markdown

---
layout: intro
---

用于展示作者/演讲者信息的介绍性幻灯片。

markdown

---
layout: intro
---

My Presentation

我的演示文稿

A Journey Through Code

代码之旅

<div class="absolute bottom-10"> <span class="font-700"> John Doe </span> <br> <span class="text-sm opacity-50"> Senior Developer @ TechCorp </span> </div> ```

<div class="absolute bottom-10"> <span class="font-700"> John Doe </span> <br> <span class="text-sm opacity-50"> 高级开发工程师 @ TechCorp </span> </div> ```

section

section（章节）

Marks the beginning of a new section.

markdown

---
layout: section
---

标记新章节的开始。

markdown

---
layout: section
---

Part 1 第一部分

Getting Started


**Best for**: Dividing presentation into logical sections

入门指南


**最佳适用场景**：将演示文稿划分为逻辑章节

statement

statement（声明）

Emphasizes a single statement or quote.

markdown

---
layout: statement
---

强调单一观点或引用内容。

markdown

---
layout: statement
---

Code is poetry

代码即诗


**Best for**: Powerful quotes, key messages


**最佳适用场景**：有力的引用、核心信息

quote

quote（引用）

Displays a quotation with attribution.

markdown

---
layout: quote
---

展示带有署名的引用内容。

markdown

---
layout: quote
---

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."

"任何傻瓜都能写出电脑能理解的代码。优秀的程序员写出的代码能让人理解。"

Martin Fowler

undefined

Martin Fowler

undefined

fact

fact（事实）

Highlights important facts or statistics.

markdown

---
layout: fact
---

突出重要事实或统计数据。

markdown

---
layout: fact
---

100%

of developers love Slidev*

<small>*citation needed</small>


**Best for**: Statistics, numbers, key facts

的开发者都喜爱Slidev*

<small>*需引用来源</small>


**最佳适用场景**：统计数据、数字、关键事实

two-cols

two-cols（双栏）

Two-column layout with left/right content.

markdown

---
layout: two-cols
---

左右分栏的布局。

markdown

---
layout: two-cols
---

Left Column

左栏

Point 1
Point 2
Point 3

::right::

要点1
要点2
要点3

::right::

Right Column

右栏

const code = 'here'


**Slot**: `::right::` separates columns

const code = 'here'


**插槽**：`::right::` 用于分隔左右栏

two-cols-header

two-cols-header（带标题的双栏）

Two columns with a spanning header.

markdown

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

带有跨栏标题的双栏布局。

markdown

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

Comparison

对比

::left::

Option A

选项A

Feature 1
Feature 2

::right::

特性1
特性2

::right::

Option B

选项B

Feature X
Feature Y


**Slots**: `::left::` and `::right::`

特性X
特性Y


**插槽**：`::left::` 和 `::right::`

image

image（图片）

Full-slide background image.

markdown

---
layout: image
image: /images/photo.jpg
backgroundSize: cover
---

Options:

```
image
```
: Image path
```
backgroundSize
```
: CSS background-size (cover, contain, etc.)

全屏背景图片布局。

markdown

---
layout: image
image: /images/photo.jpg
backgroundSize: cover
---

可选配置:

```
image
```
: 图片路径
```
backgroundSize
```
: CSS背景尺寸属性（cover、contain等）

image-left

image-left（左图右文）

Image on left, content on right.

markdown

---
layout: image-left
image: /images/diagram.png
backgroundSize: contain
---

图片在左侧，内容在右侧的布局。

markdown

---
layout: image-left
image: /images/diagram.png
backgroundSize: contain
---

Explanation

说明

The diagram shows:

Component A
Component B
Their relationship

undefined

该图表展示：

组件A
组件B
它们的关系

undefined

image-right

image-right（左文右图）

Image on right, content on left.

markdown

---
layout: image-right
image: /images/screenshot.png
---

图片在右侧，内容在左侧的布局。

markdown

---
layout: image-right
image: /images/screenshot.png
---

Feature Overview

特性概览

Our new feature includes:

Fast performance
Easy to use
Beautiful design

undefined

我们的新特性包括：

性能出色
易于使用
设计美观

undefined

iframe

iframe（内嵌网页）

Embeds a webpage.

markdown

---
layout: iframe
url: https://sli.dev
---

Options:

```
url
```
: URL to embed

用于嵌入网页的布局。

markdown

---
layout: iframe
url: https://sli.dev
---

可选配置:

```
url
```
: 要嵌入的网页地址

iframe-left / iframe-right

iframe-left / iframe-right（内嵌网页+内容）

Iframe with content on the opposite side.

markdown

---
layout: iframe-right
url: https://example.com
---

内嵌网页与内容分栏展示的布局。

markdown

---
layout: iframe-right
url: https://example.com
---

Live Demo

在线演示

Check out the live example on the right

undefined

查看右侧的在线示例

undefined

full

full（全屏）

Uses the entire screen without padding.

markdown

---
layout: full
---

<div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600">
  <h1 class="text-white text-center pt-40">Full Screen</h1>
</div>

使用整个屏幕空间，无内边距。

markdown

---
layout: full
---

<div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600">
  <h1 class="text-white text-center pt-40">全屏展示</h1>
</div>

none

none（无样式）

No styling applied - complete blank slate.

markdown

---
layout: none
---

<div class="custom-everything">
  Completely custom content
</div>

不应用任何样式，完全空白的布局。

markdown

---
layout: none
---

<div class="custom-everything">
  完全自定义的内容
</div>

end

end（结尾）

Final slide of the presentation.

markdown

---
layout: end
---

演示文稿的最后一页幻灯片。

markdown

---
layout: end
---

Thank You!

谢谢观看！

Questions?

undefined

有问题吗？

undefined

Layout Quick Reference

布局速查

Layout	Use Case
`default`	General content
`center`	Single focused message
`cover`	Opening slide
`intro`	Author introduction
`section`	Section divider
`statement`	Bold statement
`quote`	Quotations
`fact`	Statistics/numbers
`two-cols`	Side-by-side content
`two-cols-header`	Comparison with header
`image`	Full background image
`image-left`	Image + text
`image-right`	Text + image
`iframe`	Embedded webpage
`full`	Edge-to-edge content
`end`	Closing slide

布局	适用场景
`default`	通用内容
`center`	单一核心信息
`cover`	开场幻灯片
`intro`	作者介绍
`section`	章节分隔
`statement`	醒目声明
`quote`	引用内容
`fact`	统计数据/数字
`two-cols`	并列内容
`two-cols-header`	带标题的对比内容
`image`	全屏背景图片
`image-left`	图片+文字
`image-right`	文字+图片
`iframe`	内嵌网页
`full`	边缘到边缘的内容
`end`	结尾幻灯片

Creating Custom Layouts

创建自定义布局

Basic Custom Layout

基础自定义布局

Create

layouts/my-layout.vue

vue

<template>
  <div class="slidev-layout my-layout">
    <slot />
  </div>
</template>

<style scoped>
.my-layout {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>

创建

layouts/my-layout.vue

文件：

vue

<template>
  <div class="slidev-layout my-layout">
    <slot />
  </div>
</template>

<style scoped>
.my-layout {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>

Layout with Named Slots

带命名插槽的布局

vue

<!-- layouts/split-header.vue -->
<template>
  <div class="slidev-layout split-header">
    <header class="header">
      <slot name="header" />
    </header>
    <main class="content">
      <div class="left">
        <slot name="left" />
      </div>
      <div class="right">
        <slot name="right" />
      </div>
    </main>
  </div>
</template>

<style scoped>
.split-header {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.header {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e5e7eb;
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}
</style>

Usage:

markdown

---
layout: split-header
---

::header::

vue

<!-- layouts/split-header.vue -->
<template>
  <div class="slidev-layout split-header">
    <header class="header">
      <slot name="header" />
    </header>
    <main class="content">
      <div class="left">
        <slot name="left" />
      </div>
      <div class="right">
        <slot name="right" />
      </div>
    </main>
  </div>
</template>

<style scoped>
.split-header {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.header {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e5e7eb;
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}
</style>

使用方式：

markdown

---
layout: split-header
---

::header::

Comparison Overview

对比概览

::left::

Before

之前

Old approach details

::right::

旧方案细节

::right::

After

之后

New approach details

undefined

新方案细节

undefined

Layout with Props

带属性的布局

vue

<!-- layouts/branded.vue -->
<script setup>
defineProps({
  logo: {
    type: String,
    default: '/logo.png'
  },
  color: {
    type: String,
    default: '#3b82f6'
  }
})
</script>

<template>
  <div class="slidev-layout branded">
    <img :src="logo" class="logo" />
    <div class="content" :style="{ borderColor: color }">
      <slot />
    </div>
  </div>
</template>

Usage:

markdown

---
layout: branded
logo: /company-logo.png
color: '#ef4444'
---

vue

<!-- layouts/branded.vue -->
<script setup>
defineProps({
  logo: {
    type: String,
    default: '/logo.png'
  },
  color: {
    type: String,
    default: '#3b82f6'
  }
})
</script>

<template>
  <div class="slidev-layout branded">
    <img :src="logo" class="logo" />
    <div class="content" :style="{ borderColor: color }">
      <slot />
    </div>
  </div>
</template>

使用方式：

markdown

---
layout: branded
logo: /company-logo.png
color: '#ef4444'
---

Branded Content

品牌化内容

undefined

undefined

Theme Layouts

主题布局

Themes often provide additional layouts. For example, the

seriph

theme includes variations like:

```
default
```
with refined typography
```
cover
```
with elegant styling
Custom layouts specific to the theme

Check theme documentation for available layouts.

主题通常会提供额外的布局。例如，

seriph

主题包含以下变体：

排版优化的
```
default
```
布局
样式优雅的
```
cover
```
布局
主题专属的自定义布局

请查看主题文档了解可用布局。

Best Practices

最佳实践

Match Layout to Content: Use
```
center
```
for emphasis,
```
two-cols
```
for comparisons
Consistent Section Markers: Use
```
section
```
layout consistently
Image Quality: Use high-resolution images for
```
cover
```
and
```
image
```
layouts
Test Responsiveness: Check how layouts appear at different sizes
Don't Overcrowd: Layouts work best with focused content

布局匹配内容：使用
```
center
```
布局强调重点，使用
```
two-cols
```
布局进行对比
统一章节标记：始终使用
```
section
```
布局标记章节
图片质量：为
```
cover
```
和
```
image
```
布局使用高分辨率图片
测试响应性：检查布局在不同尺寸下的显示效果
避免内容过载：布局在内容聚焦时效果最佳

Common Layout Patterns

常见布局模式

Presentation Structure

演示文稿结构

markdown

---
layout: cover
---

markdown

---
layout: cover
---

Title

标题

layout: intro

About Me

关于我

layout: section

Part 1 第一部分

layout: default

Content...

内容...

layout: section

Part 2 第二部分

layout: end

Thank You

谢谢观看

undefined

undefined

Feature Comparison

特性对比

markdown

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

markdown

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

React vs Vue

::left::

React

JSX syntax
Large ecosystem
Facebook backing

::right::

JSX语法
庞大的生态系统
Facebook支持

::right::

Vue

Template syntax
Gentle learning curve
Community driven

undefined

模板语法
平缓的学习曲线
社区驱动

undefined

Output Format

输出格式

When recommending layouts, provide:

SLIDE STRUCTURE:
1. [layout: cover] - Opening with title
2. [layout: intro] - Speaker introduction
3. [layout: section] - Topic 1 header
4. [layout: default/two-cols] - Content slides
5. [layout: section] - Topic 2 header
6. [layout: image-right] - Demo/screenshot
7. [layout: fact] - Key statistic
8. [layout: end] - Closing

LAYOUT RECOMMENDATION:
- For this content type, use [layout]
- Reason: [explanation]

EXAMPLE:
---
layout: [recommended]
[additional options if needed]
---

[Content structure]

推荐布局时，请提供以下格式：

幻灯片结构:
1. [layout: cover] - 开场标题页
2. [layout: intro] - 演讲者介绍
3. [layout: section] - 主题1标题
4. [layout: default/two-cols] - 内容页
5. [layout: section] - 主题2标题
6. [layout: image-right] - 演示/截图
7. [layout: fact] - 关键数据
8. [layout: end] - 结尾页

布局推荐:
- 针对此类内容，使用[layout]
- 原因: [说明]

示例:
---
layout: [推荐布局]
[如有需要，添加额外配置]
---

[内容结构]