slidev-quick-start

Slidev 快速入门

此技能可帮助你开始使用 Slidev——面向开发者的演示文稿框架。你将学习如何创建新项目、了解基本语法并运行第一个演示文稿。

适用场景

• 从零开始创建 Slidev 演示文稿
• 首次设置 Slidev
• 了解 Slidev 的基本概念
• 将现有演示文稿转换为 Slidev
• 快速搭建演示文稿结构

前提条件

• Node.js：版本 18.0 或更高
• 包管理器：npm、pnpm 或 yarn
• 文本编辑器：推荐使用 VS Code（搭配 Slidev 扩展）

创建新项目

选项 1：使用 npm init（推荐）

npm init slidev@latest

此交互式命令将：

1. 询问项目名称
2. 创建项目目录
3. 安装依赖项
4. 启动开发服务器

选项 2：手动设置

# Create project directory
mkdir my-presentation
cd my-presentation

# Initialize package.json
npm init -y

# Install Slidev
npm install @slidev/cli @slidev/theme-default

# Create slides file
touch slides.md

在 package.json 中添加脚本：

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

创建第一个演示文稿

使用以下内容创建 slides.md：

---
theme: default
title: My First Presentation
info: |
  ## My First Slidev Presentation
  Created with Slidev
class: text-center
drawings:
  persist: false
transition: slide-left
---

# Welcome to Slidev

Presentation slides for developers

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
    Press Space for next page <carbon:arrow-right class="inline"/>
  </span>
</div>

---

# What is Slidev?

Slidev is a slides maker and presenter designed for developers

- 📝 **Markdown-based** - focus on content with Markdown
- 🎨 **Themable** - themes can be shared and installed
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding
- 🤹 **Interactive** - embed Vue components
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export to PDF, PPTX, or host online

---
layout: center
---

# Thank You!

[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev)

运行演示文稿

# Start development server
npm run dev

# Or directly with npx
npx slidev

你可以通过 http://localhost:3030 访问演示文稿。

常用键盘快捷键

快捷键	操作
Space / →	下一张幻灯片／下一个动画
←	上一张幻灯片／上一个动画
↑ / ↓	浏览幻灯片（跳过动画）
o	概览模式
d	切换深色模式
f	全屏
g	跳转到幻灯片
Esc	退出概览／全屏模式

幻灯片分隔符

在 ---（三个连字符）前后加上空行，以分隔幻灯片：

# Slide 1

Content for slide 1

---

# Slide 2

Content for slide 2

---

# Slide 3

Content for slide 3

Frontmatter 配置

第一页的 frontmatter 用于配置整个演示文稿：

---
# Presentation metadata
theme: seriph              # Theme name
title: My Presentation     # Browser tab title
info: |                    # Presentation info
  ## About
  Description here

# Appearance
colorSchema: auto          # auto, light, or dark
class: text-center         # CSS classes for first slide
background: /image.jpg     # Background image

# Features
drawings:
  persist: false           # Save drawings between reloads
transition: slide-left     # Default transition
highlighter: shiki         # Code highlighter

# Export
exportFilename: slides     # Export filename
download: true             # Show download button
---

添加布局

使用 frontmatter 为每张幻灯片指定布局：

---
layout: cover
background: https://cover.sli.dev
---

# Cover Slide

---
layout: two-cols
---

# Left Column

Content here

::right::

# Right Column

Content here

---
layout: center
---

# Centered Content

添加代码块

# Code Example

\`\`\`typescript
interface User {
  id: number
  name: string
  email: string
}

function greet(user: User): string {
  return `Hello, ${user.name}!`
}
\`\`\`

添加演讲者备注

在幻灯片末尾添加 HTML 注释作为演讲者备注：

# My Slide

Important content here

最佳实践

1. 从简单开始：先使用基本 Markdown，再逐步添加功能
2. 每张幻灯片表达一个想法：让幻灯片重点突出
3. 使用布局：利用内置布局保持设计一致
4. 版本控制：将 slides.md 提交到 Git
5. 尽早测试导出：演示前确认 PDF 导出正常

应避免的常见错误

❌ 分隔符周围缺少空行

# Slide 1
---
# Slide 2

✓ 正确的分隔符语法

# Slide 1

---

# Slide 2

❌ Frontmatter 缩进无效

---
theme:seriph  # Missing space after colon
---

✓ 正确的 frontmatter

---
theme: seriph
---

输出格式

创建新的 Slidev 演示文稿时，请提供：

PROJECT STRUCTURE:
- slides.md (main presentation file)
- package.json (with dev/build/export scripts)
- Optional: public/ directory for assets

FIRST SLIDE FRONTMATTER:
---
theme: [recommended theme]
title: [presentation title]
---

SUGGESTED SLIDE STRUCTURE:
1. Title/Cover slide
2. Introduction/Agenda
3. Main content slides
4. Summary/Conclusion
5. Thank you/Contact slide

NEXT STEPS:
- Run `npm run dev` to start
- Edit slides.md to add content
- Use `o` key for overview