用途
Slidev 是一个面向开发者的基于 Markdown 的演示文稿框架。本技能用于在用户提出以下需求时创建和编辑演示幻灯片:创建新的演示文稿或幻灯片组、编辑已有幻灯片、添加或修改幻灯片内容、使用 Slidev 特有功能、根据内容生成演示文稿。
主要能力
- 使用 YAML frontmatter 进行演示级配置,例如主题(seriph 或 default)、标题、描述信息、class、drawings.persist、转场(如 slide-left、fade-out、slide-up)、mdc、duration(如 10min)。
- 使用 --- 分隔幻灯片。
- 单张幻灯片可拥有自己的 frontmatter,例如 layout: center、class: text-center。
- 内置常用布局:default(标准布局)、center(居中内容)、two-cols(双栏布局)、image-right(图片居右)、cover(封面页)。双栏布局通过 ::right:: 分隔左右两栏。
- 交互功能:使用 v-click 实现渐进显示,使用 v-clicks 包裹列表实现逐项显示。
- 组件:可在幻灯片中使用 Vue 组件,自定义组件存放在 packages/slides/components 目录。
- 代码块:支持语法高亮和行高亮,例如 ```ts {1|3|1-3}。
- 演讲者备注:在幻灯片末尾使用 HTML 注释添加,仅在演讲者模式下可见。
使用方式
项目结构中,幻灯片位于 packages/slides/ 目录,包含幻灯片文件(*.slides.md 或 slides.md)、Vue 组件目录 components/,以及用于依赖管理的 package.json。
启动开发服务器:
pnpm run slides [filename]
开发服务器默认运行在 http://localhost:3030。
常用命令:
# 开发
pnpm run slides [filename]
# 构建静态版本
pnpm --filter @chris-towles/slides run build
# 导出为 PDF
pnpm --filter @chris-towles/slides run export
适用场景
适合开发者制作技术演示、根据内容生成文稿、需要代码高亮与渐进展示效果的演讲,以及需要在幻灯片中嵌入 Vue 自定义组件的场景。
限制
资料中未提供关于收费、价格、平台支持范围、性能表现或效果保证的具体说明,这些事实暂未提供。