1- Cline 和 Slidev：幻灯片制作的完美组合

1.1- 简介

我们创建了一个 .clinerules 文件，用于通过 @Slidevjs 制作幻灯片 —— 现在 Cline 可以构建你的演示文稿了。

以下是我们如何将一个 YouTube 视频转换成演示文稿的详细过程：🧵

1.2- 步骤一：提取视频文字记录

这个过程始于从一个解释 Cline 工作原理的 YouTube 视频中提取文字记录，使用了 mcp-youtube 服务器。

1.2- 步骤二：创建 Slidev 项目

接下来，我们提示 Cline 创建一个新的 @Slidevjs 项目，并将文字记录内容结构化到 http://slides.md 中。Cline 处理了项目设置和初始 Markdown 生成。

1.3- 步骤三：添加视觉元素

为了使演示文稿在视觉上更具吸引力，我们要求 Cline 添加视觉元素。它使用了 EverArt Forge MCP，根据每张幻灯片的内容生成了简约的 SVG 图形。

1.4- 步骤四：整合高级布局和动画

然后，Cline 更新了 http://slides.md 文件，使用 Slidev 的布局特性（two-cols）整合了新的 SVG 图像，并添加了点击动画（v-clicks）以及微妙的运动效果（v-motion）。

1.5- Cline 如何掌握 Slidev 技能？

Cline 是如何知道如何使用 Slidev 特性的？我们首先通过将 Slidev 的文档（通过 Firecrawl MCP 抓取）输入到 .clinerules/slidev-expert.md 文件中，使其成为专家。

这个 .clinerules 文件为 Cline 提供了关于 Slidev 语法、组件和最佳实践的必要上下文。

1.6- Slidev 项目指南

以下是我们创建的 .clinerules 文件内容：

1.6.1- 概述

本文档提供了处理 Slidev 项目的完整指南。Slidev 是一个基于 Markdown 的演示工具，由 Vue 和 Vite 驱动。

1.6.2- 核心概念与结构

1. 入口点：主要的演示文稿内容通常位于 http://slides.md。
2. 幻灯片分隔：幻灯片通过在新行上的 --- 分隔。
3. Frontmatter/Headmatter：
   • 文件开头的 YAML 块 (--- … ---) 用于配置整个演示文稿 (headmatter) 或单个幻灯片 (frontmatter)。
   • Headmatter（第一个块）全局应用（例如 theme, title, addons）。
   • Frontmatter 配置特定幻灯片（例如 layout, background, class, transition, clicks）。
4. 布局 (Layouts)：
   • 定义幻灯片的结构。通过 frontmatter 中的 layout: 指定。
   • 第一张幻灯片的默认布局是 cover，其他的是 default。
   • 自定义布局放置在 layouts/ 目录中，作为 .vue 文件。使用 <slot /> 表示默认内容，使用命名插槽 (<slot name="xxx" />) 表示特定部分。
5. 组件 (Components)：
   • Vue 组件可以直接在 Markdown 中使用（例如 <MyComponent />）。
   • 组件会自动从以下位置导入：
     • Slidev 内置组件 (@slidev/client/builtin/)。
     • 当前活动的主题。
     • 已安装的插件 (addons)。
     • 本地的 components/ 目录。
   • 自定义组件放在 components/ 目录中，作为 .vue 文件。
6. 样式 (Styles)：
   • 内置 UnoCSS 用于工具优先的样式设计。直接在 Markdown 或组件中应用类。
   • 全局样式可以添加到 styles/ 目录中（例如 styles/index.css）。
   • 特定幻灯片的范围样式可以使用幻灯片 Markdown 中的 <style scoped>…</style> 添加。
7. 资源 (Assets)：
   • 静态资源（图像、视频）可以放在 public/ 目录中，并使用以 / 开头的绝对路径引用（例如 background: /my-image.png）。
   • 相对路径（例如 ./image.png）适用于标准的 Markdown 图像语法 (![alt](./image.png))，但在 frontmatter 或组件中构建后可能会失效。为了可靠性，推荐使用 public/ 目录方法。
8. 备注 (Notes)：
   • 演讲者备注作为 HTML 注释 (<!-- … -->) 添加在幻灯片 Markdown 内容的最末尾。
   • 备注支持 Markdown 格式。

1.6.3- 关键特性与语法

1. 代码块 (Code Blocks)：
   • 使用标准的 Markdown 围栏代码块（例如 ```ts … ```）。
   • 语法高亮由 Shiki 提供。
   • 支持行高亮 ({1,3-5}), 行号 ({lines:true}), Monaco 编辑器 ({monaco}), 差异比较 ({monaco-diff}), 代码导入 (<<< @/path/to/file.js#region {lines=…}). 详情请参考语法指南。
2. 动画 (点击)：
   • 使用 <v-click> 组件或 v-click 指令逐步显示元素。
   • v-after 与前一个 v-click 同时显示元素。
   • .hide 修饰符（例如 v-click.hide）隐藏元素而不是显示它们。
   • <v-clicks> 组件将其子元素应用 v-click（对列表很有用）。
   • 使用 at="…" 控制时间（例如 v-click="3" 表示绝对点击第 3 次，v-click="'+2'" 表示在前一个相对元素之后点击 2 次）。
   • 指定进入/离开范围：v-click="[2, 5]"（从点击第 2 次开始可见，直到但不包括第 5 次）。
   • 在 frontmatter 中使用 clicks: N 覆盖每张幻灯片的总点击次数。
3. 运动 (VueUse Motion)：
   • 使用 v-motion 指令进行元素过渡（例如 :initial="{ x: -80 }" :enter="{ x: 0 }"）。
   • 可以通过 :click-N 属性由点击触发（例如 :click-1="{ y: 30 }"）。
4. 幻灯片过渡 (Slide Transitions)：
   • 在 headmatter (transition: slide-left) 中设置全局效果，或在 frontmatter 中为特定幻灯片设置。
   • 内置过渡效果：fade, fade-out, slide-left, slide-right, slide-up, slide-down, view-transition。
   • 指定不同的前进/后退过渡：transition: slide-left | slide-right。
5. 图表 (Diagrams)：支持 Mermaid (```mermaid … ```) 和 PlantUML (```plantuml … ```)。
6. LaTeX: 使用 $ 表示行内数学公式 ($a^2+b^2=c^2$)，使用 $$ 表示块级数学公式。
7. 全局上下文 (Global Context)：在组件中或直接在 Markdown 中使用 {{ }} 访问运行时信息，如 $nav (导航控件), $clicks (当前点击次数), $page (当前幻灯片编号), $frontmatter, $slidev.configs。在 <script setup> 中使用 @slidev/client 的组合式函数，如 useNav()。

1.6.4- 开发工作流

1. 初始化: 使用 pnpm create slidev <project-name> (或 npm/yarn/bun 等效命令)。
2. 开发服务器: 在项目目录中运行 pnpm dev (或 npm run dev 等)。这将启动 Vite 的 HMR 服务器以实现即时更新。访问地址 http://localhost:3030。
3. 编辑: 修改 http://slides.md 并根据需要添加自定义组件/布局/样式。
4. 导出:
   • 安装 playwright-chromium (pnpm add -D playwright-chromium)。
   • 运行 pnpm export (或 npm run export 等) 生成 PDF 文件 (默认为 slides-export.pdf)。
   • 使用 --format png 或 --format pptx。
   • 使用 --with-clicks 将每个点击步骤导出为单独的页面/图像。
   • 使用 --output <filename> 指定输出文件名。
   • 使用 --dark 进行暗黑模式导出。
5. 构建用于托管:
   • 运行 pnpm build (或 npm run build 等) 在 dist/ 文件夹中创建静态 SPA。
   • 如果部署到子路径，请使用 --base /path/。
   • 将 dist 文件夹部署到静态托管平台 (Netlify, Vercel, GitHub Pages)。配置文件 (netlify.toml, vercel.json, GitHub Actions 工作流) 通常包含在启动模板中。

1.6.5- 最佳实践

• 保持 http://slides.md 专注于内容。
• 使用布局实现一致的幻灯片结构。
• 使用组件实现可重用的 UI 元素和交互性。
• 在构建自定义解决方案之前，利用主题和插件获取样式和功能。
• 对于在 frontmatter 或组件中引用的静态资源，使用 public/ 目录。
• 在演示期间利用演示者模式 (/presenter 路由或按钮) 查看备注和控件。