用Slidev写个简单的ppt

冯海威
2,270 阅读3分钟

1.Slidev 是什么？

Slidev 就是一个基于 Node.js、Vue.js ，使用 Markdown 语法 、 tailwindcss 等技术栈来快速制作 PPT的工具库。

2.Slidev 的一些功能

  • 📝 Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件
  • 🧑‍💻 开发者友好 —— 内置代码高亮、实时编码等功能
  • 🎨 可定制主题 —— 以 npm 包的形式共享、使用主题
  • 🌈 灵活样式 —— 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表
  • 🤹 可交互 —— 无缝嵌入 Vue 组件
  • 🎙 演讲者模式 —— 可以使用另一个窗口，甚至是你的手机来控制幻灯片
  • 🎨 绘图 - 在你的幻灯片上进行绘图和批注
  • 🧮 LaTeX 支持 —— 内置了对 LaTeX 数学公示的支持
  • 📰 图表支持 —— 使用文本描述语言创建图表
  • 🌟 图标 —— 能够直接从任意图标库中获取图标
  • 💻 编辑器 —— 集成的编辑器，或者使用 VS Code 扩展
  • 🎥 演讲录制 —— 内置录制功能和摄像头视图
  • 📤 跨平台 —— 能够导出 PDF、PNG 文件
  • ⚡️ 快速 —— 基于 Vite 的即时重载
  • 🛠 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包

3.技术栈

Slidev 使用了如下的工具和技术：

4.PPT 做了哪些事？

5.Slidev安装和启动

slidev 需要Node版本在14.0.0以上

npm init slidev@latest

npm run dev

6.项目结构

your-slidev/
  ├── components/       # 自定义组件 
  ├── global-bottom.vue # 页脚
  ├── global-top.vue # 页眉
  └── slides.md         # 幻灯片主入口

6.1 components

此目录中的组件可以在markdown中直接使用，其组件名与文件名相同。

<script setup lang="ts">
  import { ref } from 'vue'
  const props = defineProps({
    count: {
      default: 0,
    },
  })
  const counter = ref(props.count)
</script>

<template>
  <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
    <button
            border="r gray-400 opacity-50"
            p="2"
            font="mono"
            outline="!none"
            hover:bg="gray-400 opacity-20"
            @click="counter -= 1"
            >
      -
    </button>
    <span m="auto" p="2">{{ counter }}</span>
    <button
            border="l gray-400 opacity-50"
            p="2"
            font="mono"
            outline="!none"
            hover:bg="gray-400 opacity-20"
            @click="counter += 1"
            >
      +
    </button>
  </div>
</template>

your-slidev/
  ├── ...
  └── components/
      └── counter.ts
      
<div>
   <Counter :count="10" m="t-4" />
</div>

6.2 页眉页脚

约定：根目录新增文件名为 global-top.vue | global-bottom.vue即为页眉页脚

<template>
  <footer
          v-if="$slidev.nav.currentPage !== 1"
          class="absolute bottom-0 left-0 right-0 p-2 font-blue"
          >
    我是页脚
  </footer>
</template>

your-slidev/
  ├── ...
  ├── ...
  ├── global-bottom.vue
  └── global-top.vue

6.3 slides.md (入口文件)

Markdown 语法 + TailwindCss +其他技术栈

7.Markdown 基本语法

7.1 扉页及分页

---
theme: Default
background: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04bd81f391524537bff81948979ac5df~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?
class: "text-center"
highlighter: shiki
lineNumbers: false
download: true
preload: false
info: |
## Slidev 的描述
学习slidev

学习slidev
---

---
第一页
---
第二页
---
第三页
---

注：每页信息都以分隔符 --- 开始，以另一个分隔符 --- 结束，每个---前后最好空一行

7.2 代码块

建立 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮。

```ts {2,3}
interface TableSearch {
  settlementBillNo: string | number; //采购结算单号
  warehouseBillNo: string | number; //所属入库单
  merchandiseName: string; //商品名称
  supplierName: string; //供应商名称
  paymentMode: string; //是否可线上支付
}
```

7.3 静态资源(自测无效)及图标

![远程图片](https://sli.dev/favicon.png)
![本地图片](/pic.png)   //slidev会报错

😀 能够直接从任意图标库中获取图标

7.4 图表

|                                                    |     |                    |
| -------------------------------------------------- | --- | ------------------ |
| <kbd>right</kbd> / <kbd>space</kbd>                | 1   | 下一个动画或幻灯片 |
| <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | 2   | 上一个动画或幻灯片 |
| <kbd>up</kbd>                                      | 3   | 上一张幻灯片       |
| <kbd>down</kbd>                                    | 4   | 下一张幻灯片       |

```mermaid
pie title 饼状图
"周一" : 1
"周二" : 2
"周三" : 3
"周四" : 4
"周五" : 5

```

\

7.5 多入口（自测无效）

slides.md：

---
# Page 1

This is a normal page

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

8.Vue全局上下文

$slidev.nav ：一个响应式对象，它拥有幻灯片导航的属性以及控制权

$slidev.nav.next() // 执行下一步

$slidev.nav.nextSlide() // 跳转下一张幻灯片 (忽略 v-clicks)

$slidev.nav.go(10) // 去到幻灯片的第 10 页

$slidev.nav.currentPage // 获取当前幻灯片的页数

$slidev.nav.currentLayout // 当前的布局 id

$slidev.nav.clicks // 目前的点击次数

$slidev.configs ： 一个响应式对象，它存储着你 slides.md 中解析后的 第一个 frontmatter 中的配置

---
title: My First Slidev!
---

{{ $slidev.configs.title }} // 'My First Slidev!'

9.导航

将鼠标移至窗口左下角，即可显示导航栏。

10.动画

点击动画： v-click / v-after / v-click-hide /v-clicks

运动 ：Slidev 内置了 @vueuse/motion。你可以对任何元素应用 v-motion 指令，以对它们施加运动效果

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

11.导出

导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染。

//安装
npm i -D playwright-chromium

//导出为PDF
slidev export

//导出为PNG
slidev export --format png

12.部署

官方推荐部署方式 Netlify、Vercel 、GitHub Pages

由于Netlify部署可以通过导入github项目来部署，所以下面就讲一下通过Github Action 将幻灯片部署到 Github Pages；

a. 根目录创建 .github/workflows/deploy.yml 文件

Github 只要发现该目录中由 yml 文件就会自动运行该文件。

name: Deploy pages
on: push
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy pages
uses: crazy-max/ghaction-github-pages@v2
with:
build_dir: dist
env:
    GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

b. 获取密钥并存储到对应项目中

创建密钥：进入Github的Settings中github.com/settings/，依次点击Developer settings、Personal access tokens。然后点击Generate new token创建。因为要操作仓库，所以需要勾选repo权限。获取后保留好密钥；

c. 将密钥存储到Github仓库

到需要部署的仓库的Settings/Secret/Actions下，点击New repository secret将刚才保存的密钥保存，并命名为ACCESS_TOKEN（注意，和.github/workflows/deploy.yml的 GITHUB_TOKEN 值保持一致）

d. 代码提交到Github前

修改编译文件配置，去掉dist .remote-assets index.html 后进行编译

node_modules
.DS_Store
//dist
*.local
//index.html
//.remote-assets
components.d.ts

tips：每次编译后dist中index.html 引入文件的路径有问题需修改，提交后自动开始部署

e. 查看部署信息

部署的地址：fenghaiwei.github.io/far_okr_sli…

git地址 ：github.com/Fenghaiwei/…

13. 问题：

1 官方主题使用

2 静态资源引用

3 各幻灯片的背景、布局的设置

4 分割slides.md

5 演讲者模式的意义

\

\

avatar
文章
阅读
粉丝