_Kerman

Slidev 使用技巧 English ​

Slidev 是一款面向开发者的幻灯片工具。它帮助我高效地制作了许多高质量的幻灯片。我最喜欢它的这些特点：

  • 文本驱动：VS Code、AI 补全、与长文互相改写
  • 更熟悉的技术栈：Markdown、原子化 CSS ...
  • 自带实用功能：主题、代码高亮 ...

本文是一些个人总结的经验，并不全面介绍所有功能，因此请您在学习 Slidev 的使用方式之后阅读。

0. 开始之前…… ​

先想清楚制作这个幻灯片的目标：

A. 尽快做完，质量不差就行
B. 追求效果，需要调整细节

Slidev 一方面有 Markdown 的直观 (A)，另一方面有 Web 的无所不能 (B)。但即使是对于专业开发者而言，它也并不总是优于 PowerPoint (X)。

记住，无论你选择了哪一种目标，不要不小心滑进 X 区域。

1. 原子化 CSS ​

Slidev 内置支持 UnoCSS 和 MDC。

比如给部分文字上色：

html
<!-- 纯 Markdown -->
This is <span style="color: blue">blue</span>.

<!-- 使用 UnoCSS -->
This is <span text-blue>blue</span>.

<!-- 同时使用 MDC 与 UnoCSS 
    （需要在 headmatter 中设置 `mdc: true`） -->
This is [blue]{.text-blue}.

这是 Slidev 编写幻灯片高效的重要原因之一，请千万记得使用它。

常用的原子类名
  • 布局：
    • flex flex-col grid grid-cols-2 items-center justify-center gap-4
    • relative absolute fixed m-4 p-4 w-4 h-4 left-4
  • 排版：text-2xl font-bold font-mono italic underline
  • 颜色：text-primary text-gray-800 bg-gray-200
  • 透明度：op-80 bg-op-20
  • 边框：<div border="1 red solid rounded">

2. 不要吝啬 HTML ​

很多时候我们自己设计和编写布局，这时的最佳办法是借助 HTML 的布局能力。不要害怕在 Markdown 里写 HTML。

以自我介绍页为例：

最高效的方式是直接在 Markdown 里写 HTML，利用 flex / grid 布局：

html
<div grid grid-cols-2>
<div flex flex-col items-center>
  <img w-46 h-46 rounded-full src="..." />
  <div mt-8>_Kerman</div>
</div>
<div>

- AAA
- BBB
- CCC

</div>
</div>

不用费心思挑选与微调模板，能省下不少时间精力。

3. 用透明度调色 ​

尤其当你想要更有“层次感”的配色时，在给定的颜色中不一定能挑到最顺眼的颜色。透明度可以把颜色和背景按比例融合，得出你想要的颜色。

 
op-100   
op-60
op-30
text-green-*
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
 
bg-op-100
bg-op-60
bg-op-30
bg-green-*
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900

4. 用缩放调整空间 ​

觉得页面太空或太挤？与其到处添加 text-2xl 来放大文本，不如直接缩放整张幻灯片。

全局调整可用 canvasWidth headmatter 选项，默认 980。如果偏空，试试调小到 784 一类的值。

单独调整某几页幻灯片则可以使用 zoom 选项。

5. 恰当使用 v-drag ​

v-drag 让你像在 PowerPoint 一样，直接拖拽定位元素。

没有 v-drag 时，通常写 <div absolute left-12 top-34>...</div> 然后一点点改数值；现在只要写 <div v-drag>...</div>，在页面上拖到合适位置，坐标会自动回写到源码。

但别滥用它：对于能用 flex/grid（见第 2 节）排版的元素，v-drag 定位更难维护。

6. 寻找灵感？ ​

https://antfu.me/talks 收录了来自 Slidev 作者的演讲；幻灯片源码在这个 GitHub 仓库 里可以找到。