Slidev简介
Slidev是什么
Slidev是一款基于Vue.js的现代化幻灯片制作工具，它可以帮助用户快速、高效地制作出美观、专业的幻灯片。
目前市面上有很多功能丰富的、通用的、所见即所得的幻灯片制作工具，例如 微软 PowerPoint 或 苹果 Keynote. 它们在制作带有动画、图表和许多其他漂亮的幻灯片方面效果相当好，同时非常直观和容易学习。
那么，为什么要使用 Slidev 呢？
Slidev 旨在为开发者提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、更具表现力和吸引力。
当使用所见即所得的编辑器时，人们很容易被样式选项所干扰。Slidev 通过分离内容和视觉效果来弥补这一点。这使开发者能够一次专注于一件事，同时也能够重复使用社区中的主题。
Slidev 并不寻求完全取代其他幻灯片制作工具。相反，它专注于迎合开发者社区的需求。
Slidev的特点和优势
- 易于学习和使用：Slidev采用了Vue.js的语法，对于Vue.js开发者来说非常友好，同时也对于没有开发经验的用户来说也非常易于学习和使用。
- 美观、专业的幻灯片设计：Slidev内置了多种主题和样式，可以帮助用户快速搭建出美观、专业的幻灯片设计。
- 灵活的布局和排版方式：Slidev支持多种布局和排版方式，用户可以根据自己的需要进行自由的调整和设计。
- 丰富的插件和扩展功能：Slidev支持多种插件和扩展功能，可以帮助用户添加动画、转场效果、代码演示等多种功能。
为什么更适合程序员使用
- 使用扩展的 Markdown 语法编写内容，编写 PPT 就像开发时编写 Markdown 文档一样
- 使用 HTML, CSS 来定制每页 PPT 的展示样式，和进行前端开发体验一致
- 图表，Slidev 内置 Mermaid, 标记为 mermaid 的代码块会自动转换成图表。平常做技术分享难免需要插入一些类图、流程图、管道图等
- 动画，内置了很多动画指令和动画组件
- 支持导出为 PDF/PNG
- 支持静态部署，你可以把最终制作完成的 PPT 打包成一个单页应用，并将其部署到服务器上，这样就可以让更多人看到你的 PPT
- 内置主题并且支持编写自定义主题。一个自定义主题就是一个 npm 包，你可以把它发布到 npm 上进行存储分发，让更多的人使用到你编写的主题
除此以外，Slidev 还支持一些其它强大的功能，但由于在我使用过程中对我帮助不大，所以我没有作为理由提及
各位同学有兴趣，可以自行去 Slidev 的官网查看：Slidev官网
安装Slidev
Slidev 需要 Node.js 的版本 >=14.0.0
使用 NPM：
npm init slidev@latest
跟随命令行的提示，它将自动为你打开幻灯片，网址是 http://localhost:3030/
我们可以用左右方向键来切换PPT，Slidev默认也提供了功能丰富的工具栏：
Slidev的基本使用
扉页配置
我们来打开刚刚创建的Slidev项目，这个slides.md就是我们编写PPT的地方，所有的页面都可以在这个md里完成
这个文件最前面是关于PPT的扉页配置，这里晒出我自己的配置，具体每行配置的参数含义见注释：
---
theme: light-icons # 主题
image: 'https://source.unsplash.com/collection/94734566/1920x1080' # 首页背景图
title: 'Slidev的使用' # 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
highlighter: 'shiki' # 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
lineNumbers: true # 在代码块中显示行号
info: false # information for your slides, can be a markdown string
transition: slide-left
download: false # 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
exportFilename: 'slidev-exported.pdf' # 要导出文件的文件名称
monaco: 'dev' # 启用 monaco 编辑器，可以是 boolean，'dev' 或者 'build'
selectable: true # 控制幻灯片中的文本是否可以选择
record: 'dev' # 启用幻灯片录制，可以是 boolean，'dev' 或者 'build'
colorSchema: 'auto' # 幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark'
routerMode: 'history' # vue-router 模式，可以使用 'history' 或 'hash' 模式
drawings:
enabled: true
persist: false
presenterOnly: false
syncAll: true
---
更多详细配置可参考 Slidev扉页配置
分页
既然是用 Markdown 写 PPT，那么PPT的每一页之间是怎么分割的呢？
Slidev提供了非常简单的做法，用三条横线作为分页标识：
---
layout: cover
---
# 第 1 页
This is the cover page.
---
# 第 2 页
The second page
代码块
我们使用 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮，这在Slidev里非常简单，只需要像Markdown里的写法一样就可以了：
```
console.log('hello world!')
```
Slidev支持 Prism 和 Shiki 作为语法高亮器，我们可以在扉页配置里自由切换
Slidev更厉害的地方在于，当你需要在演示文稿中做修改时，只需在语言 id 后添加 {monaco} —— 即可将该代码块变为一个功能齐全的 Monaco 编辑器：
```ts {monaco}
console.log('hello world!')
```
内联样式
我们还可以在 Markdown 中直接使用 <style> 标签来覆盖当前幻灯片的样式
# This is Red
<style> h1 { color: red } </style>
---
# Next slide is not affected
注意哦，Markdown 中的
<style>标签均为 scoped
公式图表
Slidev还有一个非常强大实用的功能，就是支持插入公式和图表，包括 Latex、流程图等
注意哦，这里的图表可不是直接插入图片，而且使用了Mermaid这个图表工具
具体使用方法可以看Mermaid
备注
我们可以为每张幻灯片编写备注，便于在演讲者模式中供参考
使用方法：在 Markdown 中，每张幻灯片中的最后一个注释块将被视为备注
---
layout: cover
---
# 第 1 页
This is the cover page.
<!-- 这是一条备注 -->
---
# 第 2 页
<!-- 这不是一条备注，因为它在幻灯片内容前 -->
The second page
<!--这是另一条备注-->
静态资源
和编写 Markdown 的方式一样，我们可以使用本地或远程的 URL 的图片
- 远程资源：
 - 本地资源：
（请将资源放置到根路径下的public文件夹中） - 自定义尺寸样式：
<img src="/pic.png" class="m-40 h-40 rounded shadow" />
点击动画
如需为元素添加点击动画可以使用 v-click 指令或 <v-click> 组件：
<!-- 组件用法：在你按下 “下一步” 之前，这是不可见的 -->
<v-click>Hello World</v-click>
<v-clicks>
- Item 1
- Item 2
- Item 3
- Item 4
</v-clicks>
v-click-hide与 v-click 相同，但不是让元素出现，而是让元素在点击后不可见
<div v-click-hide>Slidev</div>
v-click="n" 可以规定显示顺序：
<div v-click="0"></div>
<div v-click="2"></div>
<div v-click="1"></div>
Slidev也支持自定义点击数量，有时候在页面中引入大量 v-click 可能会导致切换到下一页所花费的点击数量与你所想的不同，这是因为默认情况下，Slidev 会计算进入下一张幻灯片之前需要执行多少步
---
# 在进入下一页之前，需要点击8次
clicks: 8
---
vscode插件
在这里给大家推荐一款Slidev配套的利器
在vscode中有一款专门为Slidev准备的插件，我们在插件市场下载安装一下：
直接看安装完成之后的效果，是不是非常方便，侧边栏有PPT的目录还有每页的预览，简直是神器！
Slidev导出
导出PDF
导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染
因此，使用此功能前需要安装
playwright-chromium
接下来我们来安装 playwright-chromium：
npm i -D playwright-chromium
接着使用如下命令即可将PPT导出为 PDF：
slidev export
稍作等待，即可在 ./slides-export.pdf 路径下看到你幻灯片的 PDF 文件
如果你想要导出使用暗色主题的幻灯片，请使用 --dark 选项：
slidev export --dark
默认情况下，Slidev 会将每张幻灯片导出为 1 页，并忽略点击动画。如果想将多个步骤的幻灯片，分解为多个页面，请使用 --with-clicks 选项。
slidev export --with-clicks
导出PNG
当为命令传入 --format png 选项时，Slidev 会将每张幻灯片导出为 PNG 图片格式。
slidev export --format png
静态部署
当编写完成后，为了让更多人在线看到我们的 PPT，我们可以选择将 PPT 构建为可部署的单页应用。
我们现在将幻灯片构建成可部署的单页应用（SPA）：
slidev build
生成的应用程序会保存在 dist/ 目录下，然后你可以将该目录部署在 GitHub Pages，Netlify，Vercel，等你想部署的任何地方。接着，就可以将你幻灯片的链接分享给任何人。
总结：
Slidev是一款功能强大、易于使用的幻灯片制作工具，可以帮助开发者快速制作出美观、专业的演示文稿，并且支持多种动画、转场效果和技术细节展示。
如果开发者需要制作汇报、技术分享等主题的演示文稿，Slidev绝对是一个值得尝试的工具。
![[XR-FRAME] 1.O4 文档导览 || XR-FRAME / 让场景更丰富，环境数据](https://img-blog.csdnimg.cn/54665ff58c814519883b18920a20e8f5.png)
