实战：搭建你的第一份 Slidev 演示文稿

本章把前 6 天的知识点串起来，从零完成一份可运行、可发布的 Slidev 演示文稿。

一、初始化项目

pnpm create slidev my-first-deck
cd my-first-deck
pnpm dev

浏览器打开 http://localhost:3030，看到官方示例即可。接下来清空 slides.md，写入自己的内容。

二、编写 slides.md 骨架

slides.md 顶部先写全局 Frontmatter：

---
theme: seriph
title: 我的第一份演示
info: 一个 Slidev 入门实战演示
lineNumbers: true
transition: slide-left
---

# 开场

大家好，这是一份用 Slidev 制作的演示文稿。

---

保存后浏览器立即热更新，第一张"开场"页已经出现。

三、添加多页与基础语法

继续追加页面，练习 --- 分隔、列表、强调与表格：

---

## 今天的内容

- 用 Markdown 写幻灯片
- 用 `---` 分页
- 用代码块讲技术

---

---
layout: center
---

# 居中标题页

这一页使用 `layout: center` 居中展示。

---

## 对比表格

| 工具 | 上手难度 | 代码支持 |
|------|---------|---------|
| PPT | 低 | 弱 |
| Slidev | 低 | 强 |

四、加入代码块与高亮

技术演示的核心是代码。添加带语言标注、行号与行高亮的代码块：

---

## 代码示例

```java {1|2-3|4}
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello Slidev");
    }
}
```

演示时每次点击，代码高亮依次切换到第 1 行、第 2-3 行、第 4 行，实现逐行讲解。若代码较长，可加 maxHeight 限高。

五、添加演讲者备注

给每张需要提词的页面写备注：

---

## 代码示例

```java {1|2-3|4}
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello Slidev");
    }
}

上述备注写在 <!-- --> 中，观众页面不可见。按 S 键打开演讲者模式即可在副屏查看。

六、预览与演示操作

在浏览器中体验演示交互：

快捷键	功能
→ / 空格	下一页或下一动画
←	上一页
f	全屏
o	幻灯片概览
s	演讲者模式
d	切换深色模式
g	跳转到指定页

七、构建与导出

本地预览满意后构建静态站点：

pnpm build

产物输出到 dist/，可直接部署到静态服务器或 GitHub Pages。

导出 PDF 分享：

pnpm export --with-clicks

生成包含每个动画步骤的 PDF，便于发给未参会者。

八、完成检查清单

步骤	操作	检查点
初始化	pnpm create slidev my-first-deck	目录生成、pnpm dev 可启动
写全局配置	Frontmatter：theme/title/lineNumbers	页面标题与行号生效
多页分隔	用 --- 分隔至少 3 页	方向键可翻页
代码块	```java + `{1	2-3
备注	某页写 <!-- --> 备注	演讲者模式可见、观众页不可见
构建	pnpm build	dist/ 目录生成
导出	pnpm export --with-clicks	PDF 生成且包含动画帧

至此，第一份 Slidev 演示文稿完成：具备全局配置、多页结构、代码高亮与演讲者备注，并能构建导出。后续在此基础上逐步引入公式、图表、动画与自定义组件。