Back to Details

slidev-presenter-mode

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Slidev Presenter Mode

Slidev 演示者模式

This skill covers using Slidev's presenter mode for professional presentations, including speaker notes, timers, slide overview, and remote control features.
本内容介绍如何使用Slidev的演示者模式进行专业演示，包括演讲者备注、计时器、幻灯片概览和远程控制功能。

When to Use This Skill

何时使用此功能

  • Preparing for a live presentation
  • Adding speaker notes
  • Using dual-screen setup
  • Remote control from phone
  • Rehearsing with timer
  • 准备现场演示
  • 添加演讲者备注
  • 使用双屏设置
  • 通过手机远程控制
  • 借助计时器进行彩排

Accessing Presenter Mode

进入演示者模式

Via Navigation

通过导航栏

Click the presenter icon in the navigation bar (bottom-left).
点击导航栏（左下角）的演示者图标。

Via URL

通过URL

Navigate directly to:
http://localhost:3030/presenter
直接访问：
http://localhost:3030/presenter

Keyboard Shortcut

键盘快捷键

Press 
p
to toggle presenter mode (depends on configuration).
按下 
p
键切换演示者模式（取决于配置）。

Presenter Interface

演示者界面

The presenter view shows:
  1. Current Slide - What audience sees
  2. Next Slide Preview - Upcoming slide
  3. Speaker Notes - Your notes
  4. Timer - Elapsed/remaining time
  5. Slide Navigator - Quick jump to any slide
  6. Click Counter - Current animation state
演示者视图包含：
  1. 当前幻灯片 - 观众看到的内容
  2. 下一张幻灯片预览 - 即将展示的幻灯片
  3. 演讲者备注 - 你的提示笔记
  4. 计时器 - 已用/剩余时间
  5. 幻灯片导航器 - 快速跳转到任意幻灯片
  6. 点击计数器 - 当前动画状态

Speaker Notes

演讲者备注

Adding Notes

添加备注

Use HTML comments at the end of a slide:
markdown
undefined
在幻灯片末尾使用HTML注释：
markdown
undefined

My Slide

我的幻灯片

Content visible to audience.
<!-- Speaker notes here: - Remember to mention X - Demo the feature - Ask for questions --> 
undefined
观众可见的内容。
<!-- 演讲者备注： - 记得提及X - 演示该功能 - 邀请提问 --> 
undefined

Markdown in Notes

备注中的Markdown格式

Notes support Markdown formatting:
markdown
<!--
备注支持Markdown格式：
markdown
<!--

Key Points

关键点

  1. Important: Emphasize this
  2. Note: Optional detail
  3. Code reference
    : Show in demo
Quote to read aloud -->
undefined
  1. 重要：强调这一点
  2. 提示：可选细节
  3. 代码参考
    ：在演示中展示
要朗读的引用内容 -->
undefined

Multi-line Notes

多行备注

markdown
<!--
First paragraph of notes.

Second paragraph with more details.

- Bullet point 1
- Bullet point 2
-->
markdown
<!--
备注的第一段。

包含更多细节的第二段。

- 要点1
- 要点2
-->

Notes Best Practices

备注最佳实践

markdown
<!--
TIMING: 2 minutes

KEY MESSAGE:
Our solution reduces deployment time by 50%

REMEMBER TO:
- [ ] Show the demo
- [ ] Mention the case study
- [ ] Ask if there are questions

TRANSITION:
"Now let's look at how this works in practice..."
-->
markdown
<!--
时长：2分钟

核心信息：
我们的解决方案将部署时间缩短50%

需要记得：
- [ ] 展示演示
- [ ] 提及案例研究
- [ ] 询问是否有问题

过渡语：
"现在让我们看看这在实际中如何运作..."
-->

Dual-Screen Setup

双屏设置

Recommended Setup

推荐配置

  1. Open browser in Play mode on external display:
    http://localhost:3030
  2. Open browser in Presenter mode on your screen:
    http://localhost:3030/presenter
  3. Share/project the Play mode window to audience
  1. 在外部显示器上以播放模式打开浏览器：
    http://localhost:3030
  2. 在你的屏幕上以演示者模式打开浏览器：
    http://localhost:3030/presenter
  3. 将播放模式窗口共享/投影给观众

Automatic Sync

自动同步

Both windows automatically synchronize:
  • Navigation stays in sync
  • Click animations sync
  • Drawings sync (if enabled)
两个窗口会自动同步：
  • 导航保持同步
  • 点击动画同步
  • 绘图同步（如果已启用）

Timer Features

计时器功能

Starting/Stopping

启动/停止

  • Click the timer to start/pause
  • Click again to resume
  • 点击计时器开始/暂停
  • 再次点击恢复

Timer Display

计时器显示

Shows:
  • Elapsed time
  • Can be configured for countdown
显示：
  • 已用时间
  • 可配置为倒计时模式

Timer Tips

计时器使用技巧

  • Start timer when beginning presentation
  • Use for time management
  • Visible only to presenter
  • 开始演示时启动计时器
  • 用于时间管理
  • 仅对演示者可见

Remote Control

远程控制

From Another Device

通过其他设备

  1. Start server with remote access:
    bash
    slidev --remote
  2. Note the displayed URL (or use local network IP)
  3. Open URL on phone/tablet
  4. Control presentation remotely
  1. 启动支持远程访问的服务器：
    bash
    slidev --remote
  2. 记录显示的URL（或使用本地网络IP）
  3. 在手机/平板上打开该URL
  4. 远程控制演示

Password Protection

密码保护

bash
slidev --remote=your_password
Then access with:
http://[ip]:3030/presenter?password=your_password
bash
slidev --remote=your_password
然后通过以下地址访问：
http://[ip]:3030/presenter?password=your_password

QR Code

二维码

Slidev can display a QR code for easy mobile access.
Slidev可显示二维码，方便移动端访问。

Overview Mode

概览模式

Accessing Overview

进入概览模式

  • Press 
    o
    key
  • Or navigate to 
    /overview
  • 按下 
    o
    键
  • 或导航至 
    /overview

Features

功能

  • See all slides at once
  • Click to jump to any slide
  • Edit notes inline (in overview mode)
  • Preview click animations
  • 同时查看所有幻灯片
  • 点击跳转到任意幻灯片
  • 在概览模式中内联编辑备注
  • 预览点击动画

Navigation in Presenter Mode

演示者模式中的导航

Keyboard Shortcuts

键盘快捷键

KeyAction
Space
/ 
→
Next animation/slide
←
Previous animation/slide
↑
/ 
↓
Previous/next slide (skip animations)
o
Overview mode
g
Go to slide number
Esc
Exit fullscreen/overview
按键操作
Space
/ 
→
下一个动画/幻灯片
←
上一个动画/幻灯片
↑
/ 
↓
上一张/下一张幻灯片（跳过动画）
o
概览模式
g
跳转到指定编号的幻灯片
Esc
退出全屏/概览模式

Touch/Swipe

触摸/滑动

On touch devices:
  • Swipe left: Next slide
  • Swipe right: Previous slide
在触摸设备上：
  • 向左滑动：下一张幻灯片
  • 向右滑动：上一张幻灯片

Click Areas

点击区域

In presenter mode:
  • Left side: Previous
  • Right side: Next
在演示者模式中：
  • 左侧区域：上一页
  • 右侧区域：下一页

Presenter Mode Configuration

演示者模式配置

In Frontmatter

在Frontmatter中

yaml
---
yaml
---

Remote access settings

远程访问设置

remote: true
remote: true

Presenter notes settings

演示者备注设置

presenter: true

undefined

presenter: true

undefined

Disable Presenter for Shared Links

为共享链接禁用演示者模式

When sharing:
bash
slidev build
The built version doesn't include presenter mode by default.
分享时执行：
bash
slidev build
默认情况下，构建后的版本不包含演示者模式。

Drawing Tools

绘图工具

Enabling Drawings

启用绘图功能

yaml
---
drawings:
  enabled: true
  persist: false
  syncAll: true
---
yaml
---
drawings:
  enabled: true
  persist: false
  syncAll: true
---

Using Drawings

使用绘图功能

  • Click pen icon in presenter mode
  • Draw on current slide
  • Drawings sync to audience view
  • 在演示者模式中点击钢笔图标
  • 在当前幻灯片上绘图
  • 绘图内容会同步到观众视图

Presenter-Only Drawings

仅演示者可见的绘图

yaml
---
drawings:
  presenterOnly: true
---
Only presenter can draw, visible to all.
yaml
---
drawings:
  presenterOnly: true
---
仅演示者可绘图，所有观众可见。

Recording Features

录制功能

Built-in Recording

内置录制

  1. Click record button in presenter mode
  2. Select screen/window to record
  3. Optionally enable camera
  4. Start recording
  1. 在演示者模式中点击录制按钮
  2. 选择要录制的屏幕/窗口
  3. 可选启用摄像头
  4. 开始录制

Recording Options

录制选项

  • Screen only
  • Screen + camera
  • Camera picture-in-picture
  • 仅屏幕
  • 屏幕+摄像头
  • 摄像头画中画

Presentation Workflow

演示工作流

Before Presenting

演示前

  1. Test Setup: Verify dual-screen works
  2. Review Notes: Read through all speaker notes
  3. Practice: Run through with timer
  4. Check Animations: Verify all clicks work
  5. Test Remote: If using phone control
  1. 测试配置：验证双屏功能正常
  2. 检查备注：通读所有演讲者备注
  3. 彩排：借助计时器进行演练
  4. 检查动画：确认所有点击动画正常
  5. 测试远程控制：如果使用手机控制

During Presentation

演示中

  1. Use Notes: Glance at key points
  2. Watch Timer: Stay on schedule
  3. Preview Next: Know what's coming
  4. Control Pace: Use click counter
  1. 使用备注：查看关键点
  2. 关注计时器：保持进度
  3. 预览下一张：了解后续内容
  4. 控制节奏：使用点击计数器

Checklist

检查清单

markdown
PRE-PRESENTATION:
- [ ] Laptop charged/plugged in
- [ ] Projector/display connected
- [ ] Correct resolution set
- [ ] Browser in fullscreen (F11)
- [ ] Notifications disabled
- [ ] Presenter window on laptop screen
- [ ] Play window on projector

DURING:
- [ ] Timer started
- [ ] Notes visible
- [ ] Water nearby

POST:
- [ ] Save any drawings
- [ ] Export if needed
markdown
演示前：
- [ ] 笔记本电脑已充电/接通电源
- [ ] 投影仪/显示器已连接
- [ ] 已设置正确分辨率
- [ ] 浏览器已全屏（F11）
- [ ] 通知已禁用
- [ ] 演示者窗口在笔记本屏幕
- [ ] 播放窗口在投影仪

演示中：
- [ ] 计时器已启动
- [ ] 备注可见
- [ ] 备好饮用水

演示后：
- [ ] 保存绘图内容
- [ ] 按需导出

Advanced Features

高级功能

Custom Presenter Layout

自定义演示者布局

You can customize the presenter view through themes.
你可以通过主题自定义演示者视图。

Multiple Presenters

多位演示者

For co-presenting:
  1. Both access presenter mode
  2. Designate who controls navigation
  3. Others can view but not control
协同演示时：
  1. 两人都进入演示者模式
  2. 指定谁控制导航
  3. 其他人可查看但无法控制

Rehearsal Mode

彩排模式

bash
undefined
bash
undefined

Practice without audience

无观众情况下彩排

slidev --open

Then use presenter mode locally to practice.
slidev --open

然后本地使用演示者模式进行彩排。

Troubleshooting

故障排除

Windows Not Syncing

窗口不同步

  1. Check both are on same URL base
  2. Refresh both windows
  3. Check network/firewall
  1. 检查两者是否基于同一URL
  2. 刷新两个窗口
  3. 检查网络/防火墙

Notes Not Showing

备注不显示

  1. Verify comment syntax: 
    <!-- notes -->
  2. Notes must be at end of slide
  3. Check for syntax errors before notes
  1. 验证注释语法：
    <!-- 备注内容 -->
  2. 备注必须位于幻灯片末尾
  3. 检查备注之前的语法错误

Timer Reset

计时器重置

Timer persists during session but resets on page reload.
计时器在会话期间保持，但页面刷新后会重置。

Output Format

输出格式

When preparing presenter content:
markdown
undefined
准备演示者内容时：
markdown
undefined

[Slide Title]

[幻灯片标题]

[Visible content for audience]
<!-- TIMING: [X minutes] KEY POINTS: - [Main message to convey] - [Secondary point] DEMO/ACTION: - [What to show/do] TRANSITION TO NEXT: "[Connecting phrase to next slide]" --> 

**PRESENTER SETUP:**
1. URL for audience: `http://localhost:3030`
2. URL for presenter: `http://localhost:3030/presenter`
3. Remote URL: `http://[IP]:3030/?password=[pass]`
[观众可见的内容]
<!-- 时长：[X分钟] 关键点： - [要传达的核心信息] - [次要要点] 演示/操作： - [要展示/执行的内容] 过渡到下一张： "[连接到下一张幻灯片的语句]" --> 

**演示者配置：**
1. 观众URL：`http://localhost:3030`
2. 演示者URL：`http://localhost:3030/presenter`
3. 远程URL：`http://[IP]:3030/?password=[pass]`