Slidev，让程序员更好的完成PPT

TodayXu
1,266 阅读3分钟

u=1764295006,2700545814&fm=253&fmt=auto&app=138&f=JPEG.webp

为什么选择幻灯片

有很多功能丰富、通用、所见即所得的幻灯片制作工具，例如Microsoft PowerPoint和Apple Keynote。它们非常适合制作带有动画、图表和许多其他内容的漂亮幻灯片，同时非常直观且易于学习。那么，为什么还要费心制作 Slidev 呢？

Slidev 旨在为开发人员提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、富有表现力和吸引力。

使用所见即所得编辑器时，很容易被样式选项分散注意力。Slidev 通过分离内容和视觉效果来解决这个问题。这使您可以一次专注于一件事，同时还可以重用社区中的主题。Slidev 并不寻求完全取代其他幻灯片构建器。相反，它专注于迎合开发者社区。

搭建你的第一个演示文稿

npm init slidev

thumbnail_ea119ba794a71b438843b232a0083d6f.png

随便点了几下，居然还这样！

怎么使用它，再也不想用幻灯片叻

组件篇

删除slides.md里面的内容

# Slidev

Hello, World!

---

我们拥有了一个hello world级别的幻灯片

代码块

```ts
console.log('Hello, World!')
```

线条高亮

```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

可编辑代码块

```ts {monaco}
console.log('HelloWorld')
```

添加样式

```
# This is Red

<style>
h1 {
  color: red
}
</style>
```

静态资源

![Remote Image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d14e80193f0a466b969c94ac6c30b63a~tplv-k3u1fbpfcp-zoom-1.image)
![Local Image](/pic.png)

如果您想应用自定义尺寸或样式，您可以将它们转换为<img>标签

<img src="https://sli.dev/favicon.png" class="m-40 h-40 rounded shadow" />

笔记

This is the cover page.

<!-- This is a note -->

图标

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

插槽

新建layouts/two-cols.vue,粘贴一下代码

<script setup lang="ts">
const props = defineProps({
  class: {
    type: String,
  },
});
</script>

<template>
  <div class="slidev-layout two-columns w-full h-full grid grid-cols-2">
    <div class="col-left" :class="props.class">
      <slot />
    </div>
    <div class="col-right" :class="props.class">
      <slot name="right" />
    </div>
  </div>
</template>

在slides.md复制下面代码

---
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>

配置

---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---

了解有关前端配置的更多信息

图表

```mermaid
sequenceDiagram
  Alice->John: Hello John, how are you?
  Note over Alice,John: A typical interaction
```

了解更多  Mermaid

行文本(span)

$\sqrt{3x-1}+(1+x)^2$

块文本(p)

$$
\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \

\nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$

多个条目

---
src: ./subpage2.md
---

subpage2.md:

# Page 2

This page is from another file

前端合并

如果它们中有相同的键，则主条目中的键具有更高的优先级

slides.md ：

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

cover.md ：

---
layout: cover
background: https://sli.dev/foo.png
---

# Cover

Cover Page

动画篇

v-click

要为元素应用“点击动画”，您可以使用v-click指令或<v-click>组件

<v-click>

Hello World

</v-click>

<div v-click class="text-xl p-2">

Hey!

</div>

v-after

的用法v-after类似于，但它会在触发v-click前一个元素时使元素可见。v-click

<div v-click>Hello</div>
<div v-after>World</div>

v-click-hide

相同，v-click但不是使元素出现，而是在单击后使元素不可见。

<div v-click-hide>Hello</div>

v-clicks

v-clicks仅作为组件提供。v-click这是将指令应用于其所有子元素的简写。它在处理列表时特别有用。

<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>

每次单击“下一步”时，都会显示一个项目。

订购

将点击索引传递给您的指令，您可以自定义显示的顺序

<div v-click>1</div>
<div v-click>2</div>
<div v-click>3</div>

<!-- the order is reversed -->
<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>

---
clicks: 3
---

<!-- visible after 3 clicks -->
<v-clicks at="3">
  <div>Hi</div>
</v-clicks>

元素过渡

当您将v-click指令应用于您的元素时，它将附加类名slidev-vclick-target。当元素被隐藏时，类名slidev-vclick-hidden也将被附加。例如：

<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>

点击后会变成

<div class="slidev-vclick-target">Text</div>

<style>
.slidev-vclick-target {
  transition: all 500ms ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
}
</style>

运动

Slidev 内置了@vueuse/motion。您可以使用该v-motion指令对任何元素进行应用运动。例如

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

注意：Slidev 会预加载下一张幻灯片以提高性能，这意味着动画可能会在您导航到页面之前开始。要使其正常工作，您可以禁用特定幻灯片的预加载,在slides.md前面加入以下代码。

---
preload: false
---

或控制元素生命周期以v-if进行细粒度控制

<div
  v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

导出

安装playwright-chromium

$ yarn add -D playwright-chromium

现在使用以下命令将幻灯片导出为 PDF

$ slidev export

几秒钟后，您的幻灯片将准备就绪./slides-exports.pdf。

默认情况下，Slidev 每张幻灯片导出一页，并禁用点击动画。如果要将具有多个步骤的幻灯片导出到多个页面，请传递--with-clicks选项。

$ slidev export --with-clicks

定制

目录结构

Slidev 采用一些目录结构约定来最小化配置表面并使功能扩展灵活和直观。

基本结构如下：

your-slidev/
  ├── components/       # custom components
  ├── layouts/          # custom layouts
  ├── public/           # static assets
  ├── setup/            # custom setup / hooks
  ├── styles/           # custom style
  ├── index.html        # injections to index.html
  ├── slides.md         # the main slides entry
  └── vite.config.ts   # extending vite config

所有这些都是可选的。

样式

遵循此约定的文件将被注入到 App 根目录。如果您需要导入多个 css 条目，您可以创建以下结构并自行管理导入顺序。

your-slidev/
  ├── ...
  └── styles/
      ├── index.ts
      ├── base.css
      ├── code.css
      └── layouts.css

// styles/index.ts

import './base.css'
import './code.css'
import './layouts.css'
avatar
文章
阅读
粉丝