theme: fancy
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
Slidev
昨天晚上为了做工程实践答辩PPT，我在某度上搜了半小时“免费PPT模板”，最后发现除了要付费的，其他的不是样式太丑就是风格不搭。静下心来一想，我不就想要个风格简约的答辩PPT吗？那就试试 Slidev 吧！
创建项目
- 使用 NPM：
$ npm init slidev@latest
- 使用 Yarn：
$ yarn create slidev
- 使用 PNPM：
$ pnpm create slidev
常用语法
幻灯片通过一个 markdown 文件 编写而成 (默认会使用项目根目录下的./slides.md)。在新版本提供了多入口特性。
你可以像平时编写 markdown 一样使用Markdown 的相关特性，同时还支持内联的 HTML 和 Vue 组件。也支持使用Windi CSS来编写样式。
分页
使用--- 添加分隔符来分隔你的幻灯片。
# Slidev
Hello, World!
---
# Page 2
Directly use code blocks for highlighting
# Page 3
<div class="p-3"><Tweet id="20" /></div>
扉页及布局
你可以通过将分隔符转换为扉页块 (front matter)，为每张幻灯片指定布局 (layout) 和其他元数据。
---
layout: cover
---
# Slidev
This is the cover page.
---
layout: center
background: './images/background-1.png'
class: 'text-white'
---
# Page 2
This is a page with the layout `center` and a background image.
---
# Page 3
This is a default page without any additional metadata.
下一页的扉页块可以作为上一页的结尾分页标识。如page1和page2就是通过page2的扉页进行分割的。
常用的扉页配置
- theme：
主题id 或 主题包名称 - title：
幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题 - highlighter：
语法高亮设置，可以使用 'prism' 或 'shiki' 方案 - lineNumbers：
代码块中是否显示行号 - selectable：
控制幻灯片中的文本是否可以选择 - colorSchema：
幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark' - routerMode：
vue-router 模式，默认使用 'history'，可选 'hash' 模式 - aspectRatio：
幻灯片的长宽比 - favicon：
图标 - …
代码块
建立 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮。同 Markdown 语法相同。
```
console.log('aaa')
```
支持Prism 和Shiki 作为语法高亮器。请参阅语法高亮器获取更多细节。
特定行高亮
如需针对特定行进行高亮展示，只需在{} 内添加对应的行号。
```ts {2,3}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
}
```
如果要在多个步骤中改变高亮，你可以用| 分隔它们。
```ts {2-3|5|all}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
}
```
这段代码会先对a: Ref<number> | number和b: Ref<number> | number进行高亮展示，当你点击幻灯片后，会高亮展示return computed(() => unref(a) + unref(b))，最后，会对整个块进行高亮展示。
Monaco 编辑器
当你需要在演示文稿中做修改时，只需在语言 id 后添加{monaco}—— 即可将该代码块变为一个功能齐全的 Monaco 编辑器。
```ts {monaco}
console.log('HelloWorld')
```
内联样式
你可以在 Markdown 中直接使用<style>标签来覆盖当前幻灯片的样式。
# This is Red
<style> h1 { color: red } </style>---
# Next slide is not affected
Markdown 中的
<style>标签均为scoped。其实就是你在写Vue应用的时候写的那个，可以控制当前页ppt的样式。
在Windi CSS的支持下，你可以直接使用嵌套的 CSS 和指令集。(例如，@apply)
# Slidev
> Hello `world`
<style> blockquote { code { @apply text-teal-500 dark:text-teal-400;} } </style>
静态资源
和编写 Markdown 的方式一样，你可以使用本地或远程的 URL 的图片。
- 如果是远程资源，内置的
[vite-plugin-remote-assets](<https://github.com/antfu/vite-plugin-remote-assets>)将在第一次运行时把它们缓存到磁盘中，即便是大图也能实现立即加载。 - 如果是本地资源，请将资源放置到根路径下的
public文件夹中，并使用/开头的 URL 来引用它们。 - 如果你想使用自定义的尺寸或样式，可以使用
<img>标签<img src="https://www.ge69.com/pic.png" class="m-40 h-40 rounded shadow" />
动画
- 如需为元素添加 “点击动画”，你可以使用
v-click指令或<v-click>组件：
# Hello
<!-- 组件用法：在你按下 “下一步” 之前，这是不可见的 --> <v-click>
Hello World
</v-click>
<!-- 指令用法：在你第二次按下 “下一步” 之前，这是不可见的 --> <div v-click class="text-xl p-2">
Hey!
</div>
-
v-click-hide，与v-click相同，但不是让元素出现，而是让元素在点击后不可见。
<div v-click-hide>Hello</div>
-
v-click="n"规定显示顺序：
<img v-click="0" class="absolute top-20 right-12 z-50 w-120" src="https://www.ge69.com/page.png">
<div v-click="1"></div>
<div v-click="2"></div>
...
- 自定义点击数量。有时候在页面中引入大量 v-click 可能会导致切换到下一页所花费的点击数量与你所想的不同，这是因为默认情况下，Slidev 会计算进入下一张幻灯片之前需要执行多少步。你可以在扉页设置中覆盖该设置：
---
# 在你进入下一页之前，需要点击 10 次
clicks: 10
---
备注
你也可以为每张幻灯片编写备注。它们将展示在演讲者模式中，供你在演示时参考。
在 Markdown 中，每张幻灯片中的最后一个注释块将被视为备注。
---
layout: cover
---
# 第 1 页
This is the cover page.
<!-- 这是一条备注 -->
---
# 第 2 页
<!-- 这不是一条备注，因为它在幻灯片内容前 -->
The second page
<!--
这是另一条备注
-->
项目结构
Slidev 对项目结构进行了一些约定，以尽量减少配置项，使功能扩展更加灵活直观。
基本结构如下所示：
your-slidev/
├── components/ # 自定义组件
├── layouts/ # 自定义布局
├── public/ # 静态资源
├── setup/ # 自定义 setup / hooks
├── styles/ # 自定义样式
├── index.html # 注入的 index.html
├── slides.md # 幻灯片主入口
└── vite.config.ts # 扩展 vite 配置
以上所有均为可选。
不常用的内容
下面的内容并不太常用，比如插槽适用于优化复杂项目但使用Slidev创作的PPT一般都比较精简、图表一般可以靠其他软件画完再当成静态资源插入进PPT等等，所以这里只粘出相关文档，有需要的小伙伴可自行查看文档使用。
图标
Slidev 允许你在 Markdown 中直接访问几乎所有的开源的图标集。
图标 ID 遵循Iconify的命名规则{collection-name}-{icon-name}。例如：
- 使用Material Design Icons，其规则为
<mdi-account-circle /> - 使用Carbon，其规则为
<carbon-badge /> - 使用Unicons Monochrome，其规则为
<uim-rocket /> - 使用Twemoji，其规则为
<twemoji-cat-with-tears-of-joy /> - 使用SVG Logos，其规则为
<logos-vue /> - ……
调整图标样式
你可以像其他 HTML 元素一样对图标的样式进行修改。例如：
<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />
插槽
类似 Vue 的具名插槽。但如果不做复杂页面一般不需要，而做复杂页面就不建议用 Slidev 了。下面是左右两列的布局方式：
---
layout: two-cols
---
<template v-slot:default>
# Left
This shows on the left
</template>
<template v-slot:right>
# Right
This shows on the right
</template>
图表
可以在 Markdown 的文本描述中创建图形或图表，具体使用请参看：Demo|Mermaid。
LaTeX
提供开箱即用的 LaTeX 支持，具体使用请参考：Demo|KaTeX|markdown-it-katex。
总结
如果你需要的PPT是那种简约风格，演讲内容倾向于有条理性的文字，那么我强烈建议你尝试一下 Slidev。我只用了十多分钟学习语法，然后编写了我的第一个基于 Slidev 的答辩PPT。最后PPT的Github链接和静态展示网址如下，供大家参考：Github地址 | PPT成品展示
感谢您的来访，获取更多精彩文章请收藏本站。
暂无评论内容