幻灯片生成工具

一个模块化的内容展示管道,将结构化的课程模式(YAML/JSON)转换为功能齐全的Slidev幻灯片,支持交互式Vue组件、UnoCSS主题、演示工具和导出自动化。

  • by gavanduffy
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 gavanduffy/slidev-mcp

使用说明

Slidev MCP发生器

模块化内容呈现管道,将结构化课程模式(YAML/JSON)转换为功能齐全的课程模式 幻灯片 支持交互式Vue组件、UnoCSS主题化、演示工具和导出自动化的甲板。

特性

  • 模式驱动生成 –将JSON/YAML课程定义转换为Slidev兼容的Markdown格式。
  • 资产编排 –解析托管图像URL并生成 <img query="…" /> AI生成资产的占位符。
  • 布局覆盖率 –封面、中心、双色、事实和默认布局,具有插槽感知渲染。
  • 交互式内容 –自动Vue组件注入、语法高亮代码块和markdown增强。
  • UnoCSS主题化 –准备调整 uno.config.ts 用于快速主题覆盖和每张幻灯片样式。
  • 出口自动化 –运行官方Slidev CLI以生成PDF、PPTX和静态HTML包。
  • 验证工具 –确认甲板的轻量级检查包括所需的Slidev构造(动画、笔记、键盘导航就绪结构、响应资产)。

入门指南

使用您首选的包管理器安装依赖项(建议Node.js≥18):

npm install

1.根据课程模式生成一副牌

npm run generate examples/resilience/lesson.yaml -- --out-dir decks

此命令创建一个文件夹,例如 decks/building-resilience-and-growth-mindset/slides.md 再加上一个描述摄入的项目元数据和资产的清单。

2.验证生成的甲板

npm run validate

验证检查确认生成的套牌包含演示者笔记、AI资产占位符、Vue组件、过渡、键盘导航就绪部分和用于语法突出显示的代码块。

3.开发或呈现

在开发模式下启动Slidev,包括热模块替换、绘图工具和演示者模式:

npm run dev -- decks/building-resilience-and-growth-mindset/slides.md

4.出口交付成果

使用运行时导出器调用官方Slidev管道:

npm run export:pdf -- decks/building-resilience-and-growth-mindset/slides.md
npm run export:pptx -- decks/building-resilience-and-growth-mindset/slides.md
npm run export:html -- decks/building-resilience-and-growth-mindset/slides.md

或者运行合并帮助程序:

npm run validate && npx tsx src/runtime/index.ts decks/building-resilience-and-growth-mindset/slides.md --out-dir dist/resilience

示例甲板

示例课程(examples/resilience/lesson.yaml)以及生成的Slidev甲板(examples/resilience/slides.md)演示:

  • 封面、中心和两列布局
  • 演示者笔记和退出门票
  • 带有进度跟踪的Vue测验
  • 语法突出显示的TypeScript代码段
  • 使用生成的占位符进行图像处理

项目结构

src/
  generator/        # schema parsing and markdown generation
  runtime/          # Slidev build/export automation
  validation/       # deck validation scripts
examples/           # sample lessons and generated slides
uno.config.ts       # UnoCSS presets and theme overrides

测试

npm test

vitest 确保生成器呈现预期的布局、Vue组件、媒体资产和代码围栏。

兼容性保证

  • 针对最新的Slidev CLI(@slidev/cli@^0.43.10).
  • 尊重Slidev演示模式、绘图工具、实时重新加载(HMR)、键盘导航、笔记视图和响应式缩放。
  • 支持UnoCSS主题化、自定义快捷方式和每张幻灯片的CSS覆盖。
  • 生成准备就绪的甲板 slidev export 转换为PDF、PPTX和静态HTML格式。