slidev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Skill

This skill helps create and edit presentation slides using Slidev, a markdown-based presentation framework for developers.

本Skill可帮助你使用Slidev（一款面向开发者的基于Markdown的演示文稿框架）创建和编辑演示幻灯片。

When to Use This Skill

何时使用本Skill

Use this skill when the user asks to:

Create a new presentation or slide deck
Edit existing slides
Add or modify slide content
Work with Slidev-specific features
Generate presentations from content

当用户提出以下需求时使用本Skill：

创建新的演示文稿或幻灯片组
编辑现有幻灯片
添加或修改幻灯片内容
使用Slidev专属功能
根据内容生成演示文稿

Project Structure

项目结构

Slides are located in

packages/slides/

directory with:

Slide files:
```
*.slides.md
```
or
```
slides.md
```
Components:
```
components/
```
directory for Vue components
Configuration:
```
package.json
```
for dependencies

幻灯片存储在

packages/slides/

目录下，包含：

幻灯片文件：
```
*.slides.md
```
或
```
slides.md
```
组件：
```
components/
```
目录用于存放Vue组件
配置：
```
package.json
```
用于管理依赖

Running Slidev

运行Slidev

Start the development server:

bash

pnpm run slides [filename]

The dev server runs on

http://localhost:3030

by default.

启动开发服务器：

bash

pnpm run slides [filename]

开发服务器默认运行在

http://localhost:3030

。

Slidev File Format

Slidev文件格式

Frontmatter Configuration

Frontmatter配置

Every Slidev file starts with YAML frontmatter:

yaml

---
theme: seriph  # or 'default'
title: Your Presentation Title
info: |
  ## Presentation description
  Additional info here
class: text-center
drawings:
  persist: false
transition: slide-left  # fade-out, slide-up, etc.
mdc: true
duration: 10min
---

每个Slidev文件都以YAML Frontmatter开头：

yaml

---
theme: seriph  # 或 'default'
title: Your Presentation Title
info: |
  ## Presentation description
  Additional info here
class: text-center
drawings:
  persist: false
transition: slide-left  # fade-out, slide-up, etc.
mdc: true
duration: 10min
---

Slide Separators

幻灯片分隔符

Slides are separated by

---

markdown

---

幻灯片通过

---

分隔：

markdown

---

Slide 1

Content here

Slide 2

Slide Configuration

单张幻灯片配置

Individual slides can have frontmatter:

markdown

---
layout: center
class: text-center
---

单张幻灯片可单独设置Frontmatter：

markdown

---
layout: center
class: text-center
---

Centered Slide

居中幻灯片

undefined

undefined

Common Layouts

常用布局

```
default
```
- Standard layout
```
center
```
- Centered content
```
two-cols
```
- Two column layout
```
image-right
```
- Image on right side
```
cover
```
- Cover slide

```
default
```
- 标准布局
```
center
```
- 内容居中布局
```
two-cols
```
- 双列布局
```
image-right
```
- 图片居右布局
```
cover
```
- 封面幻灯片

Two Column Layout Example

双列布局示例

markdown

---
layout: two-cols
---

markdown

---
layout: two-cols
---

Left Column

左列

Content here

::right::

Content here

::right::

Right Column

右列

Content here

undefined

Content here

undefined

Interactive Features

交互功能

Click Animations

点击动画

Use

v-click

for progressive reveals:

html

<v-click>
Content appears on click
</v-click>

<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>

使用

v-click

实现内容逐步展示：

html

<v-click>
点击后显示的内容
</v-click>

<v-clicks>
- 项1
- 项2
- 项3
</v-clicks>

Components

组件

Use Vue components in slides:

Custom one are stored

packages/slides/components

Code Blocks

代码块

Syntax highlighting with line highlighting:

markdown

```ts {1|3|1-3}
const message = "Hello"
console.log(message)
```

支持语法高亮及行高亮：

markdown

```ts {1|3|1-3}
const message = "Hello"
console.log(message)
```

Presenter Notes

演示者备注

Add notes in HTML comments at the end of slides:

markdown

---

在幻灯片末尾通过HTML注释添加备注：

markdown

---

Slide Title

幻灯片标题

Content

undefined

Content

undefined

Best Practices

最佳实践

Keep slides focused - One concept per slide
Use progressive disclosure - Reveal information with v-click
Add presenter notes - Document your talking points
Leverage layouts - Use built-in layouts for consistency
Interactive components - Enhance with Vue components when needed

保持幻灯片聚焦 - 每张幻灯片只讲一个概念
逐步展示内容 - 使用v-click逐步披露信息
添加演示者备注 - 记录你的演讲要点
利用内置布局 - 使用内置布局保持风格统一
使用交互组件 - 必要时通过Vue组件增强演示效果

Common Commands

常用命令

bash

undefined

bash

undefined

Development

开发模式

pnpm run slides [filename]

Build static version

构建静态版本

pnpm --filter @chris-towles/slides run build

Export to PDF

导出为PDF

pnpm --filter @chris-towles/slides run export

undefined

pnpm --filter @chris-towles/slides run export

undefined

Resources

资源

Slidev Documentation: https://sli.dev/
Themes: https://sli.dev/resources/theme-gallery
Built-in Components: https://sli.dev/builtin/components.html

Slidev文档：https://sli.dev/
主题库：https://sli.dev/resources/theme-gallery
内置组件：https://sli.dev/builtin/components.html