# 幻灯片 ## 概述 Slidev 是一个面向开发人员的演示平台，可以使用 Markdown 创建幻灯片，同时利用 Vue 和 Web 技术进行交互式、像素完美的设计。此技能为创建、自定义和导出 Slidev 演示文稿提供完整的指导。在以下情况下使用此技能： * 创建新的开发人员演示文稿 * 使用基于 Markdown 的幻灯片 * 添加交互组件和动画 * 自定义幻灯片布局和主题 * 将代码块与语法高亮集成 * 将演示文稿导出为 PDF、PPTX 或 PNG * 设置 Slidev 项目 ## 快速入门 ### 安装和设置创建一个新的 Slidev 演示文稿： # 使用 pnpm（推荐） pnpm 创建幻灯片 # 使用 npm npm 初始化幻灯片 # 使用纱线纱线创建幻灯片 # 使用发髻包子创建幻灯片或者在线尝试 (StackBlitz) ### 基本命令启动开发服务器：幻灯片 # 或者指定入口文件幻灯片v幻灯片.md 为生产而构建：幻灯片构建导出为 PDF：幻灯片导出导出为其他格式： Slidev导出--格式pptx Slidev导出--格式png Slidev 导出 --格式化 md 幻灯片格式：幻灯片格式 ** ** ## Markdown 语法 ### 滑动分离器用空行填充“---”分隔幻灯片： # 幻灯片 1 内容在这里 --- # 幻灯片 2 更多内容 ### 前题和主题使用 headmatter 配置整个牌组（第一个 YAML 块）： --- 主题：默认背景：https://cover.sli.dev 标题：我的演讲信息： | ## 幻灯片入门面向开发人员的演示幻灯片类：文本中心荧光笔：shiki --- 使用 frontmatter 配置单独的幻灯片： --- 布局：居中背景：./images/bg.jpg 类别：文本-白色 --- # 居中幻灯片内容在这里 ### 代码块带有语法高亮的代码： ````ts console.log('你好，世界！') ```` 带行号： ```ts {行：true} 函数问候（名称：字符串）{ console.log(`你好，${name}！`) } ```` 行突出显示： ```ts {2,4-6} 函数计算（）{ const x = 10 // 突出显示常量 y = 20 const sum = x + y // 突出显示 const Product = x * y // 突出显示 const Difference = x - y // 突出显示返回总和 } ```` ### 演讲者备注使用注释块在幻灯片末尾添加注释： # 幻灯片标题观众可见的内容 ** ** ## 布局 ### 使用布局在 frontmatter 中指定布局： --- 布局：封面 --- # 演示标题 ### 内置布局 **基本布局：** * `default` \- 任何内容的标准布局 * `center` \- 使内容在屏幕上居中 * `cover` \- 演示文稿的开场幻灯片 * `end` \- 关闭幻灯片 * `none` \- 无样式布局 **内容布局：** * `intro` \- 带有标题和作者详细信息的简介 * `section` \- 标记新的演示文稿部分 * `quote` \- 显示强调的引文 * `fact` \- 突出显示数据或事实 * `statement` \- 以肯定句为主要内容 * `full` \- 利用整个屏幕空间 **图像布局：** * `image` \- 全屏图像显示 * `image-left` \- 图片在左边，内容在右边 * `image-right` \- 图片在右边，内容在左边 **iframe 布局：** * `iframe` \- 全屏网页嵌入 * `iframe-left` \- 网页位于左侧 * `iframe-right` \- 网页在右侧 **多列布局：** * `two-cols` \- 两列内容分隔 * `two-cols-header` \- 标题跨越两列，左/右分割 ### 两列布局示例 --- 布局：两列 --- # 左栏左侧内容 ::对:: # 右栏右侧内容 ### 带标题的两列 --- 布局：两列标题 --- # 两列的标题 ::左:: 左栏内容 ::对:: 右栏内容 ** ** ## 组件 ### 内置组件 **导航：** * `` \- 在幻灯片之间导航 * `` \- 可自定义的方向线 * `` \- 可拖动箭头 **文字：** * `` \- 自动调整文本大小以适合容器 * `` \- 显示解析的幻灯片标题 * `` \- 目录生成 **媒体：** * `` \- 嵌入 YouTube 视频 * `` \- 嵌入 Twitter 帖子 * `` \- 具有自动播放功能的 HTML5 视频 **公用事业：** * `` \- 当前幻灯片编号 * `` \- 幻灯片总数 * `` \- 缩放和变换 * `` \- 基于主题的内容渲染 * `` \- 通过上下文进行条件渲染 * `` \- 单击时在内容之间循环 * `` \- 可拖动功能 ### 组件使用示例 <推文 ID="1234567890" /> <箭头 x1="100" y1="100" x2="200" y2="200" /> <自动调整文本：最大=“300”：最小=“20”> 该文本将自动调整大小 <目录 minDepth="1" maxDepth="2" /> ### 自定义组件在`./components/`目录中创建自定义Vue组件。它们是自动导入的，无需手动注册。结构示例： ./组件/ 我的组件.vue Countervue 幻灯片.md 在幻灯片中的使用： <我的组件/> <计数器：初始=“10”/> ** ** ## 动画 ### 点击动画 **v-click 指令：**

点击时出现

下次点击时出现

**v-after 指令：**

第一个

与前一个一起出现

**v-单击列表：** - 第一项 - 第二项 - 第三项 ### 动画定位 **绝对定位：**

在第 1 步显示

在第 2 步显示

在第 3 步显示

**相对定位：**

第一个

跳过一步

与上次时间相同

### 运动动画使用“@vueuse/motion”进行定向动画：

从左侧滑入

### 幻灯片切换在 frontmatter 中配置： --- 过渡：向左滑动 --- 可用的转换： *`淡入淡出` * `向左滑动` * `向右滑动` * `向上滑动` * `滑下` * `视图转换` ** ** ## 造型 ### UnoCSS 集成 Slidev 将 UnoCSS 与 Tailwind 兼容的实用程序结合使用：

第 1 列

第 2 列

### 自定义样式创建`./styles/index.css`： .my-自定义类{ @apply text-2xl font-bold text-blue-500； } ### 幻灯片范围样式为特定幻灯片添加样式： # 幻灯片标题内容在这里 <风格> h1 { 颜色：#3b82f6； } ### 深色模式支持 UnoCSS 暗模式实用程序：

适应主题

** ** ## 导出 ### 浏览器导出（推荐） 1.启动开发服务器：`slidev` 2. 单击导航栏中的“导出”按钮 3. 或者访问`http://localhost:3030/export` 4.选择格式并下载 ### CLI 导出首先安装剧作家： pnpm add -D 剧作家-chromium 导出为 PDF：幻灯片导出 # 或指定输出 Slidev 导出 --输出 my-presentation.pdf 导出到 PPTX： Slidev导出--格式pptx 导出为 PNG： Slidev导出--格式png 导出动画： Slidev 导出 --with-clicks 导出特定幻灯片： Slidev 导出 --范围 1,6-8,10 深色模式导出：幻灯片导出--暗 ### 导出选项 * `--output` \- 自定义文件名 * `--format` \- 导出格式（pdf、pptx、png、md） * `--with-clicks` \- 包含动画步骤 * `--range` \- 特定幻灯片（例如，1,6-8,10） * `--dark` \- 使用深色主题 * `--timeout` \- 增加大型演示的超时时间 * `--wait` \- 导出前添加延迟 * `--with-toc` \- 生成 PDF 大纲 ** ** ## 配置 ### 目录结构 ./ ├─ Components/ # 自定义Vue组件 ├─ 布局/ # 自定义布局 ├─ public/ # 静态资产 ├─ setup/ # 自定义设置代码 ├─ snippets/ # 代码片段 ├─ styles/ # 自定义样式 ├─ Slides.md # 主演示文件 ├─ vite.config.ts # Vite 配置 └─ uno.config.ts # UnoCSS 配置 ### UnoCSS 配置创建`uno.config.ts`：从'unocss'导入{defineConfig} 导出默认的defineConfig({ 快捷键：{ 'bg-main': 'bg-白色文本-[#181818] 深色:(bg-[#121212] 文本-[#ddd])' } }) ### 投票配置在`vite.config.ts`中扩展Vite配置：从“vite”导入{defineConfig} 导出默认的defineConfig({ // 您的自定义 Vite 配置 }) ** ** ## 特点 ### 代码特点 **行号：** ```ts {行：true} 函数示例() { 返回真 } ```` **行突出显示：** ```ts {2-4} 函数计算（）{ const x = 10 // 突出显示 const y = 20 // 突出显示 const sum = x + y // 突出显示返回总和 } ```` **摩纳哥编辑：** ```ts {摩纳哥} // 可编辑代码块 console.log('编辑我！') ```` **摩纳哥自动运行：** ```ts {摩纳哥运行} console.log('自动运行') ```` ### 图表 **美人鱼：** ``美人鱼图解TD A[开始] --> B[进程] B --> C[结束] ```` **植物UML：** ````植物体 @startuml 爱丽丝 -> 鲍勃：你好鲍勃 -> 爱丽丝：嗨 @enduml ```` ### 乳胶内联数学：毕达哥拉斯定理：$a^2 + b^2 = c^2$ 块数学： $$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$ ### 图标直接使用 Iconify 图标： GitHub 爱 ### 绘图启用在演示者模式下在幻灯片上绘图。绘图在设备之间同步。 ### 录音使用内置录音功能录制音频演示文稿。 ** ** ## 高级功能 ### 导入幻灯片从其他文件导入幻灯片： --- 源代码：./slides/intro.md --- --- 源代码：./slides/content.md --- ### 全局层为持久 UI 元素创建 `global-top.vue` 或 `global-bottom.vue`： <模板>

所有幻灯片上的标题内容

### 自定义快捷键在 frontmatter 中配置： --- 快捷方式：下一个：空间上一页: Shift+空格切换概述：o --- ### 远程访问启用演示的远程控制：幻灯片--远程使用显示的 URL 从另一台设备访问。 ** ** ## 主题化 ### 使用主题安装主题包： pnpm 添加幻灯片v-主题-seriph 在 headmatter 中配置： --- 主题：塞弗 --- ### 可用的官方主题 * `default` \- 内置默认主题 * `seriph` \- 优雅的衬线主题 * `apple-basic` \- 苹果风格主题 * `bricks` \- 砖块图案主题 * `shibainu` \-可爱的柴犬主题浏览更多内容 ### 创建自定义主题生成主题包： pnpm 创建幻灯片主题有关详细的主题开发，请参阅“references/theming.md”。 ** ** ## 最佳实践 ### 组织 * 每个概念使用一张幻灯片 * 保持幻灯片的重点和最小化 * 一致地使用布局 * 将相关幻灯片分组 ### 性能 * 导入前优化图像 * 延迟加载重组件 * 尽可能使用内置组件 * 尽早测试大型演示的导出 ### 合作 * 版本控制 `slides.md` 和资源 * 记录自定义组件 * 通过 npm 包共享主题 * 使用一致的格式 ### 呈现 * 演示前测试演示者模式 * 准备演讲者笔记 * 测试所有交互功能 * 准备好PDF备份 ** ** ## 故障排除 ### 构建问题如果构建失败，请尝试： # 清除缓存 rm -rf node_modules/.vite # 重建幻灯片构建 ### 导出问题 **缺少内容：** 添加等待时间 Slidev 导出——等待 2000 **表情符号损坏：** 安装系统字体或使用图标库 **大文件大小：** 导出特定幻灯片或降低图像质量 ### 端口冲突指定自定义端口：幻灯片--端口 3333 ### 主题未加载确保主题已安装： pnpm 添加幻灯片主题名称并在 headmatter 中正确配置： --- 主题：姓名 --- ** ** ## 资源有关特定主题的综合文档，请参阅： * `references/syntax-guide.md` \- 完整的 Markdown 语法参考 * `references/components-api.md` \- 详细的组件 API 文档 * `references/theming.md` \- 主题创建和定制 * `references/features.md` \- 高级功能和集成 ### 官方链接 * 网站： * 文档： * GitHub： * 主题库： * Discord 社区： ** ** ## 常见工作流程 ### 创建基本演示文稿 # 初始化 pnpm 创建幻灯片 # 编辑slides.md # 使用 Markdown 添加内容 # 启动开发服务器幻灯片 # 完成后导出幻灯片导出 ### 使用自定义组件 # 创建组件 mkdir 组件猫 > 组件/Counter.vue << 'EOF' <脚本设置lang =“ts”> 从 'vue' 导入 { ref } 常量计数 = ref(0) <模板> <按钮@click =“计数++”> 计数：{{计数}} EOF # 在slides.md中使用 # <计数器/> ### 主题化工作流程 # 安装主题 pnpm 添加幻灯片v-主题-seriph # 在slides.md headmatter中配置 # --- # 主题：seriph # --- # 预览幻灯片 ### 多文件演示创建幻灯片文件： mkdir 幻灯片 echo“#简介”>幻灯片/intro.md echo“#内容”>幻灯片/content.md 在 `slides.md` 中导入： --- 源代码：./slides/intro.md --- --- 源代码：./slides/content.md --- ** ** ## 技术栈 Slidev 构建于： * **Vite** \- 快速构建工具 * **Vue 3** \- 组件框架 * **UnoCSS** \- 原子 CSS 引擎 * **Shiki** \- 语法荧光笔 * **摩纳哥编辑器** \- 代码编辑器 * **美人鱼** \- 图表生成 * **KaTeX** \- 数学渲染 * **VueUse** \- Vue 组合实用程序 * **Iconify** \- 图标库这使得快速开发、丰富的交互性和广泛的定制选项成为可能。

幻灯片

包含技能