SuperAPI AI 工具集

slidev

办公与效率

查看项目

更新于 10-16 04:00

技能介绍

用途

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 自定义组件的场景。

限制

资料中未提供关于收费、价格、平台支持范围、性能表现或效果保证的具体说明,这些事实暂未提供。