slidev-layouts

Slidev 布局

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

何时使用此技能

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

使用布局

在幻灯片的 frontmatter 中指定布局：

---
layout: center
---

# Centered Content

内置布局

default

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

---
layout: default
---

# Default Layout

Any content works here:
- Lists
- Code blocks
- Images
- Tables

center

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

---
layout: center
---

# Big Statement

Perfect for impactful single messages

最适合：引言、要点回顾、章节标题

cover

以醒目标题为主的开场幻灯片。

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

# Presentation Title

Subtitle or author name

选项：

• background：图片 URL 或颜色

最适合：首页、章节开场页

intro

包含作者／演讲者信息的介绍幻灯片。

---
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>

section

标记新章节的开始。

---
layout: section
---

# Part 1

Getting Started

最适合：将演示文稿划分为逻辑清晰的章节

statement

突出显示单条陈述或引言。

---
layout: statement
---

# Code is poetry

最适合：有力的引言、关键信息

quote

展示带有出处的引言。

---
layout: quote
---

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

Martin Fowler

fact

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

---
layout: fact
---

# 100%

of developers love Slidev*

<small>*citation needed</small>

最适合：统计数据、数字、重要事实

two-cols

左右分栏布局。

---
layout: two-cols
---

# Left Column

- Point 1
- Point 2
- Point 3

::right::

# Right Column

```js
const code = 'here'

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

### two-cols-header

Two columns with a spanning header.

```markdown
---
layout: two-cols-header
---

# Comparison

::left::

## Option A

- Feature 1
- Feature 2

::right::

## Option B

- Feature X
- Feature Y

插槽：::left:: 和 ::right::

image

全屏背景图片。

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

选项：

• image：图片路径
• backgroundSize：CSS background-size（cover、contain 等）

image-left

图片在左，内容在右。

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

# Explanation

The diagram shows:
- Component A
- Component B
- Their relationship

image-right

图片在右，内容在左。

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

# Feature Overview

Our new feature includes:
- Fast performance
- Easy to use
- Beautiful design

iframe

嵌入网页。

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

选项：

• url：要嵌入的 URL

iframe-left / iframe-right

iframe 位于一侧，内容位于另一侧。

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

# Live Demo

Check out the live example on the right

full

不留内边距，使用整个屏幕。

---
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>

none

不应用任何样式，提供完全空白的画布。

---
layout: none
---

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

end

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

---
layout: end
---

# Thank You!

Questions?

布局快速参考

布局	使用场景
default	一般内容
center	单条重点信息
cover	开场幻灯片
intro	作者介绍
section	章节分隔页
statement	醒目的陈述
quote	引言
fact	统计数据／数字
two-cols	并排内容
two-cols-header	带标题的比较
image	全屏背景图片
image-left	图片 + 文字
image-right	文字 + 图片
iframe	嵌入网页
full	边缘到边缘的内容
end	结束幻灯片

创建自定义布局

基本自定义布局

创建 layouts/my-layout.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>

使用命名插槽的布局

<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>

用法：

---
layout: split-header
---

::header::
# Comparison Overview

::left::
## Before

Old approach details

::right::
## After

New approach details

使用 Props 的布局

<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>

用法：

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

# Branded Content

主题布局

主题通常会提供额外的布局。例如，seriph 主题包含以下变体：

• 采用精致排版的 default
• 采用优雅样式的 cover
• 主题专属的自定义布局

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

最佳实践

1. 让布局匹配内容：用 center 突出重点，用 two-cols 进行比较
2. 统一章节标记：始终使用 section 布局
3. 图片质量：为 cover 和 image 布局使用高分辨率图片
4. 测试响应式效果：检查布局在不同尺寸下的呈现效果
5. 避免内容过密：布局最适合呈现重点明确的内容

常见布局模式

演示文稿结构

---
layout: cover
---
# Title

---
layout: intro
---
# About Me

---
layout: section
---
# Part 1

---
layout: default
---
# Content...

---
layout: section
---
# Part 2

---
layout: end
---
# Thank You

功能比较

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

# React vs Vue

::left::
## React
- JSX syntax
- Large ecosystem
- Facebook backing

::right::
## Vue
- Template syntax
- Gentle learning curve
- Community driven

输出格式

推荐布局时，请提供：

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]