用 Slidev 打造你的第一个幻灯片链接到标题

基于真实项目 slidev-in-action 的完整实战指南

生成的幻灯片项目截图：

1. 为什么选择 Slidev？链接到标题

传统的 PPT 工具（PowerPoint、Keynote）虽然功能强大，但在开发者场景下存在明显痛点：

版本控制困难：二进制文件难以用 Git 管理，协作时冲突频发
代码展示简陋：粘贴代码后丢失高亮，更新代码需要手动同步
排版效率低：调字体、拉对齐线耗费大量时间
分享不灵活：导出 PDF 后无法交互，网页分享需要额外上传

Slidev 是一个基于 Vue 的幻灯片引擎，它将 Markdown 文件渲染为交互式网页演示。对开发者而言，它的优势显而易见：

✅ 用 Markdown 编写内容，专注表达而非排版
✅ 代码高亮 原生支持，支持行号、聚焦、动画
✅ 版本控制友好，Git diff 清晰可读
✅ 内置 Mermaid 图表、LaTeX 公式、Vue 组件 支持
✅ 一键导出 PDF / PPTX，也可部署为静态站点

如果你经常做技术分享、内部培训或开源项目演示，Slidev 几乎是最佳选择。

2. 环境准备与安装链接到标题

前置要求链接到标题

Node.js >= 18.0（推荐 LTS 版本）
包管理器：npm、yarn 或 pnpm

安装 Slidev CLI 链接到标题

在已有 Node.js 环境的项目中，直接安装 Slidev 的命令行工具：

npm install @slidev/cli

如果你希望全局可用：

npm install -g @slidev/cli

安装完成后，可以通过 slidev --version 验证：

npx slidev --version
# 输出类似：52.15.1

3. 第一个 Slidev 项目链接到标题

Slidev 的极简哲学体现在：一个 slides.md 文件就是一个完整的演示文稿。

3.1 项目结构链接到标题

my-presentation/
├── package.json
├── projects/
│   └── slidev-in-action/
│       └── slides.md          # 幻灯片内容
└── themes/
    └── my-theme/              # 可选：自定义主题

3.2 初始化 package.json 链接到标题

{
  "name": "my-presentation",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "slidev projects/$npm_config_talk/slides.md",
    "build": "slidev build projects/$npm_config_talk/slides.md",
    "export": "slidev export projects/$npm_config_talk/slides.md"
  },
  "dependencies": {
    "@slidev/cli": "^52.15.1"
  }
}

3.3 创建第一张幻灯片链接到标题

创建 projects/slidev-in-action/slides.md，写入：

---
title: Hello Slidev
---

# Hello Slidev

我的第一张幻灯片

3.4 启动开发服务器链接到标题

npm run dev --talk=slidev-in-action

打开浏览器访问 http://localhost:3030，你将看到第一张幻灯片。修改 slides.md 后页面会自动热更新（HMR）。

4. Frontmatter 配置详解链接到标题

Slidev 使用 YAML frontmatter 控制幻灯片的全局和页面级配置。以下是我们项目中 slidev-in-action 的实际配置：

---
aspectRatio: 9/16
canvasWidth: 800
title: slidev in action
theme: ../../themes/my-theme
background: /circuit-board.svg
---

4.1 常用配置项链接到标题

配置项	说明	示例
`title`	演示文稿标题	`title: slidev in action`
`theme`	主题路径或名称	`theme: default` 或相对路径
`aspectRatio`	画布比例	`16/9`（横屏）、`9/16`（竖屏）
`canvasWidth`	画布宽度（px）	`800` 或 `980`
`background`	背景图路径	`/circuit-board.svg`

4.2 页面级配置链接到标题

除首页的 frontmatter 外，任何 --- 分页符后都可以插入新的 frontmatter，覆盖当前页配置：

---
layout: center
background: /endless-clouds.svg
class: end-slide
---

# 谢谢观看

这里我们做了三件事：

切换布局：使用 layout: center 替代默认布局
更换背景：使用 /endless-clouds.svg 平铺背景
添加自定义类：class: end-slide 用于后续 CSS 精准定位样式

5. 编写幻灯片内容链接到标题

5.1 分页语法链接到标题

用三个或更多连字符 --- 分隔幻灯片：

# 第一页

内容...

---

# 第二页

更多内容...

5.2 基础 Markdown 链接到标题

Slidev 完整支持标准 Markdown 语法：

## 为什么需要行动？

- 想法再完美，不行动等于零
- 行动是连接梦想与现实的桥梁
- 每一次行动都是一次成长

5.3 渐进动画（v-clicks）链接到标题

技术演示中，经常需要点击逐条显示内容。Slidev 提供 <v-clicks> 组件：

## 核心原则

<v-clicks>

1. **从小开始** - 不要等待完美时机
2. **持续迭代** - 完成优于完美
3. **保持专注** - 一次做好一件事

</v-clicks>

演示时，每次点击出现一条，观众注意力被逐步引导。

5.4 代码高亮链接到标题

原生支持语法高亮，支持 100+ 种语言：

## Java Hello World

```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

进阶玩法：

行号显示：在代码块标注 {1|2-4|all} 实现逐行高亮
聚焦模式：{lines:true} 只高亮当前讲解的行
** Monaco 编辑器**：直接嵌入可交互的代码编辑区

5.5 Mermaid 图表链接到标题

无需截图或外部工具，直接在 Markdown 中写 Mermaid：

## 可用性保障流程

```mermaid
graph TD
    A[用户研究] --> B[需求定义]
    B --> C[设计开发]
    C --> D[测试部署]
    D --> E[监控优化]
    E -.-> A

流程图、时序图、甘特图等均可原生渲染。

5.6 引用与强调链接到标题

## 立即行动

> "现在开始永远比明天开始更好。"

6. 自定义主题实战链接到标题

当官方主题无法满足需求时，Slidev 允许创建完全自定义的主题。

6.1 主题结构链接到标题

themes/my-theme/
├── layouts/
│   ├── center.vue          # 居中布局
│   ├── cover.vue           # 封面布局
│   └── default.vue         # 默认布局
├── styles/
│   ├── font.css            # 字体导入
│   ├── index.ts            # 样式入口
│   └── layout.css          # 布局样式
├── layoutHelper.ts         # 背景处理工具
└── package.json

6.2 修改居中布局实现垂直居中链接到标题

我们发现 layout: center 默认只实现了水平居中，内容并未垂直居中。解决方法是修改布局组件和样式：

layouts/center.vue：

<template>
  <div class="slidev-layout center" :style="style">
    <div class="center-content">
      <slot />
    </div>
  </div>
</template>

styles/layout.css：

.slidev-layout.center {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slidev-layout.center .center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

现在所有使用 layout: center 的页面都会自动垂直居中。

6.3 背景图放大 4 倍平铺链接到标题

我们的结束页使用了 endless-clouds.svg 平铺背景，但默认尺寸太小。由于 SVG 原始尺寸是 56x28 像素，放大 4 倍即 224x112：

.slidev-layout.center.end-slide {
  background-size: 224px auto !important;
}

通过 class: end-slide 精准定位，只影响结束页，不影响其他 layout: center 的页面。

7. 构建与导出链接到标题

7.1 开发模式链接到标题

npm run dev --talk=slidev-in-action

支持热更新（HMR），保存即刷新
默认端口 3030

7.2 静态构建链接到标题

npm run build --talk=slidev-in-action

输出到 dist/ 目录，可部署到任何静态托管服务（Vercel、Netlify、GitHub Pages）。

7.3 导出 PDF 链接到标题

npm run export --talk=slidev-in-action

需要提前安装 playwright-chromium：

npm install -D playwright-chromium

8. 完整案例复盘：slidev-in-action 链接到标题

让我们逐页拆解这个 7 页演示的设计思路：

第 1 页：标题页链接到标题

---
aspectRatio: 9/16
canvasWidth: 800
title: slidev in action
theme: ../../themes/my-theme
background: /circuit-board.svg
---

# slidev in action

一个专注于行动的幻灯片演示

设计要点：

选择 9/16 竖屏比例，适合手机端浏览和短视频平台分享
使用 circuit-board.svg 作为科技感背景
简洁的标题 + 副标题结构

第 2-3 页：内容页（带动画）链接到标题

## 为什么需要行动？

<v-clicks>

- 想法再完美，不行动等于零
- 行动是连接梦想与现实的桥梁
- 每一次行动都是一次成长

</v-clicks>

设计要点：

使用 <v-clicks> 实现点击逐条显示
控制信息密度，每页 3-4 个要点

第 4 页：流程图链接到标题

## 可用性保障流程

```mermaid
graph TD
    A[用户研究] --> B[需求定义]
    B --> C[设计开发]
    C --> D[测试部署]
    D --> E[监控优化]
    E -.-> A

设计要点：

Mermaid 流程图直观展示循环迭代过程
避免了手动绘制和维护图片的麻烦

第 5 页：引用 + 行动号召链接到标题

## 立即行动

> "现在开始永远比明天开始更好。"

<v-clicks>

- 今天就开始第一步
- 不要犹豫，不要拖延
- 你的未来取决于今天的行动

</v-clicks>

设计要点：

引用块突出金句
结合渐进动画强化紧迫感

第 6 页：代码展示链接到标题

## Java Hello World

```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

设计要点：

展示 Slidev 的代码高亮能力
适合技术演讲中的代码讲解环节

第 7 页：结束页（自定义样式）链接到标题

---
layout: center
background: /endless-clouds.svg
class: end-slide
---

# 谢谢观看

一起行动起来吧！

设计要点：

layout: center 实现内容完全居中
endless-clouds.svg 平铺背景营造轻松氛围
通过 CSS 将背景图放大 4 倍，避免过于密集

9. 进阶技巧与最佳实践链接到标题

9.1 多 Talk 管理链接到标题

我们的 package.json 使用 $npm_config_talk 变量管理多个演示：

{
  "scripts": {
    "dev": "slidev projects/$npm_config_talk/slides.md",
    "build": "slidev build projects/$npm_config_talk/slides.md",
    "export": "slidev export projects/$npm_config_talk/slides.md"
  }
}

新增一个 talk 只需：

mkdir projects/new-talk
touch projects/new-talk/slides.md
npm run dev --talk=new-talk

无需修改任何配置。

9.2 资源引用规则链接到标题

/file.svg：从项目根目录的 public/ 或主题 public/ 目录查找
./image.png：相对当前 slides.md 的路径
网络图片：直接使用完整 URL

9.3 移动端适配建议链接到标题

选择 9/16 竖屏比例时：

canvasWidth: 800 是一个平衡点，兼顾手机阅读和桌面演示
字号建议不小于 40px，确保手机端可读
避免过宽的表格或代码块，控制在画布宽度内

9.4 主题开发注意事项链接到标题

样式隔离：主题样式使用 .slidev-layout 前缀，避免污染全局
布局组件：必须包含 <slot /> 插槽，否则内容无法渲染
背景处理：使用 layoutHelper.ts 中的 handleBackground() 统一处理图片路径和透明度

10. 结语与资源链接到标题

通过本文，我们完成了从安装 Slidev 到开发自定义主题的完整流程。回顾核心步骤：

✅ 安装 @slidev/cli
✅ 创建 slides.md 并配置 frontmatter
✅ 用 Markdown + 组件编写内容
✅ 自定义主题实现特殊布局需求
✅ 构建并导出为 PDF / 静态站点

Slidev 的学习曲线非常平缓——如果你会写 Markdown，就已经掌握了 80% 的用法。剩下的 20%（动画、图表、主题开发）可以在实际需求中逐步探索。

官方资源链接到标题

📖 官方文档：https://sli.dev
🎨 主题市场：https://sli.dev/themes/gallery.html
💡 示例集合：https://github.com/slidevjs/slidev/tree/main/demo
🐦 社区讨论：GitHub Discussions 或 Discord

行动建议：现在就打开终端，运行 npm install @slidev/cli，创建你的第一张幻灯片。最好的学习就是动手做。

用 Slidev 打造你的第一个幻灯片 链接到标题

1. 为什么选择 Slidev？ 链接到标题

2. 环境准备与安装 链接到标题

前置要求 链接到标题

安装 Slidev CLI 链接到标题

3. 第一个 Slidev 项目 链接到标题

3.1 项目结构 链接到标题

3.2 初始化 package.json 链接到标题

3.3 创建第一张幻灯片 链接到标题

3.4 启动开发服务器 链接到标题

4. Frontmatter 配置详解 链接到标题

4.1 常用配置项 链接到标题

4.2 页面级配置 链接到标题

5. 编写幻灯片内容 链接到标题

5.1 分页语法 链接到标题

5.2 基础 Markdown 链接到标题

5.3 渐进动画（v-clicks） 链接到标题

5.4 代码高亮 链接到标题

5.5 Mermaid 图表 链接到标题

5.6 引用与强调 链接到标题

6. 自定义主题实战 链接到标题

6.1 主题结构 链接到标题

6.2 修改居中布局实现垂直居中 链接到标题

6.3 背景图放大 4 倍平铺 链接到标题

7. 构建与导出 链接到标题

7.1 开发模式 链接到标题

7.2 静态构建 链接到标题

7.3 导出 PDF 链接到标题

8. 完整案例复盘：slidev-in-action 链接到标题

第 1 页：标题页 链接到标题

第 2-3 页：内容页（带动画） 链接到标题

第 4 页：流程图 链接到标题

第 5 页：引用 + 行动号召 链接到标题

第 6 页：代码展示 链接到标题

第 7 页：结束页（自定义样式） 链接到标题

9. 进阶技巧与最佳实践 链接到标题

9.1 多 Talk 管理 链接到标题

9.2 资源引用规则 链接到标题

9.3 移动端适配建议 链接到标题

9.4 主题开发注意事项 链接到标题

10. 结语与资源 链接到标题

官方资源 链接到标题

用 Slidev 打造你的第一个幻灯片链接到标题

1. 为什么选择 Slidev？链接到标题

2. 环境准备与安装链接到标题

前置要求链接到标题

3. 第一个 Slidev 项目链接到标题

3.1 项目结构链接到标题

3.3 创建第一张幻灯片链接到标题

3.4 启动开发服务器链接到标题

4. Frontmatter 配置详解链接到标题

4.1 常用配置项链接到标题

4.2 页面级配置链接到标题

5. 编写幻灯片内容链接到标题

5.1 分页语法链接到标题

5.3 渐进动画（v-clicks）链接到标题

5.4 代码高亮链接到标题

5.5 Mermaid 图表链接到标题

5.6 引用与强调链接到标题

6. 自定义主题实战链接到标题

6.1 主题结构链接到标题

6.2 修改居中布局实现垂直居中链接到标题

6.3 背景图放大 4 倍平铺链接到标题

7. 构建与导出链接到标题

7.1 开发模式链接到标题

7.2 静态构建链接到标题

第 1 页：标题页链接到标题

第 2-3 页：内容页（带动画）链接到标题

第 4 页：流程图链接到标题

第 5 页：引用 + 行动号召链接到标题

第 6 页：代码展示链接到标题

第 7 页：结束页（自定义样式）链接到标题

9. 进阶技巧与最佳实践链接到标题

9.1 多 Talk 管理链接到标题

9.2 资源引用规则链接到标题

9.3 移动端适配建议链接到标题

9.4 主题开发注意事项链接到标题

10. 结语与资源链接到标题

官方资源链接到标题