背景、
作为一个开发者, 每次应用 PPT 或者 Word 写简历或者述职都好苦楚啊, 这些 App 也不太适宜展现代码, 然而明天来的家人们有福了, 一款叫做 是 slidev的库露出了邪魅的微笑 官网地址。
Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专一在 Markdown 中编写内容，同时领有反对 HTML 和 Vue 组件的能力，并且可能出现像素级完满的布局，还在你的演讲稿中内置了互动的演示样例。
上面间接上动图吧:
其实官方网站写的还算残缺, 但之所以写这篇文章是因为官网里一些写法 其实有 bug, 并且官网里很多出都展现了代码然而没有展现效果图, 并且官网文档的编写程序有一点点不敌对, 让人看起来有点晕。
一、装置
npm init slidev 你能够把他当成是用 create-react-app 创立了一个 react 我的项目
这里要留神尽管官网说大于等于14.0.0, 然而亲测至多须要14.18.0
创立好后进入我的项目目录运行:
yarn dev二、模块分页与动画
slidev每一页都是等比缩放的, 并且每页都是无奈滚动的, 所以每页的内容是无限的这点要留神:
slidev有点奇怪, 我的项目启动后会默认以外层的 slidev.md 为入口文件进行解析:
咱们能够先把 slidev.md 文件内容清空, 因为官网的例子里是把简直所有页面的代码都写在了这里, 这导致看起来乱遭遭并且写代码容易窜行, 所以这里我倡议先学如何划分页面模块:
---
src: ./pages/1: 首页.md
---
---
src: ./pages/2: 代码展现.md
---
---
src: ./pages/3: 图片.md
---在 pages文件夹里新增 md 文件
在 slidev 的语法外面, “—“ 两头包裹的个别是一些全局设置, 如果独自写 ”—“ 就相似于 ”
“ 标签的款式, 然而 留神这里有个 bug:
---
# ---
src: ./pages/1: 首页.md
---上述代码间接导致页面解体, 因为就算是被正文掉的 ”—“ 依然会被误解析, 咱们在正文里写其余的文字都不会报错, 这里要留神!!
此时咱们点击下方的方向键能够切换页面, 也能够通过键盘的左右按键来切换。
咱们减少页面切换的动画, 比方在 首页.md 里增加如下的代码, 意思是以后页面处于下一页的上方:
---
transition: slide-up
---
# 我可是首页第一页的布局默认是高低居中的, 咱们来为第一页设置一个背景图案吧:
---
transition: slide-up
background: https://source.unsplash.com/collection/94734566/1920x1080
---
# 我可是首页这里背景图片的 url 是官网提供的, 图片是随机的每时每刻不一样, 设置了 background 后的成果:
三、代码高亮步骤
这里要说一下对开发者很重要的能力, 代码展现与逐渐高亮, 我以疾速排序的代码为例:
{2-4|6|7|all}的意思是将代码分成 4 段, 第一次 2 到 4 行高亮, 以此类推最初全副高亮, 然而要留神 {2-4|6|7| all} 如果这里哪怕只是多写了个空格那么这个语句都是不失效的。
能够看出每次点击 next 按钮时就会按序切换展现状态, 并且 url 上会拼接 clicks=n, 这里的n 就是你在当前页点击了几次 next, slidev 文档中说的 击事件 的都是 url 上 clicks 的变动, 而不是真的点击某个元素。
咱们只须要加上{monaco} 就能够让代码可批改:
咱们还能够贴一些链接, 写法与 Markdown 统一:
[代码地址](https://segmentfault.com/u/lulu_up)四、图片
壮丽的 ppt 当然离不开图片, 之前咱们写了背景图, 这里咱们要写图片标签与图片布局:
<img src="/images/lulu.png" class="h-40" /> img标签里能够管制图片的款式, h-40是高度为 40, class 名称遵循 Windi CSS 的标准
设置布局的背景图
---
layout: image-left
image: https://source.unsplash.com/collection/94734566/1920x1080
---
# 我是图片
<img src="/images/lulu.png" class="h-40" />---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---
# 我是图片
<img src="/images/lulu.png" class="h-40" />五、分栏布局
当咱们想要左右展现内容时须要再页面头部就设置:
---
layout: two-cols
---
<template v-slot:default>
# 左布局
当然是内容了
</template>
<template v-slot:right>
# 右布局
当然是内容了
</template> 这里值得注意的是没有 layout: three-cols这类名称, 以后只能两栏布局, 并且 <template></template> 标签之外写一些内容会报错, 比方写 # 我是题目 就会导致白屏, 上面就是谬误写法:
---
layout: two-cols
---
# 我是题目
<template v-slot:default>
# 左布局
当然是内容了
</template>
<template v-slot:right>
# 右布局
当然是内容了
</template>六、动效
这里说的动效指的是元素呈现的动效, 上面演示一下元素的地位变动动效:
<div
v-motion
:initial="{y: 280}"
:enter="{y: 0}">
来了老弟
</div>
咱们能够看进去, 当我在我的项目内左右切换的时候动效就没了, 因为动效执行一次元素就被缓存了, 那咱们能够被动要求不缓存:
---
preload: false
---逐渐展现
一些元素须要咱们每点一次 next 才会呈现
<div v-click> 主题 1 <hr></div>
<div v-click> 主题 2 <hr></div>
<div v-click> 主题 3 <hr></div>
这里就开始有 bug 了, 如果是 主题 2 设置了动画属性, 然而这个动画无奈执行, 开启禁止预加载也有效, 因为默认会在进入页面后就立刻执行一次, 以后临时还没找到简略的解决方案。
还能够设置当 url 处于 clicks=n 的时候才展现, 比方 <div v-click="2"> 主题 2 的解释 </div> 就是当url 处于 clicks=2 时才展现:
<div v-click> 主题 1 <hr></div>
<div v-click> 主题 2 <hr></div>
<div v-click> 主题 3 <hr></div>
<div v-click="1"> 主题 1 的解释 </div>
<div v-click="2"> 主题 2 的解释 </div>
<div v-click="3"> 主题 3 的解释 </div> 这里还是有 bug, v-click 会被计算进 next 事件, 上述代码会变成点击 6 次 next 才能够翻到下一页, 所以这个 bug 咱们须要限度一下以后页面最多 n 次点击next:
---
transition: slide-up
preload: false
clicks: 3 # 这里是要害!
--- 此时在这个页面点击 next 超过 3 次就会翻页。
七、流程图
slidev的流程图解决集成了mermaid.js(美人鱼), 咱们这里简略演示一下根底用法:
graph LR
A[方形]
B(圆角矩形)
C((圆形))
D{菱形}
A --> B --> C --> D graph TD
B[张三] --> C{李四}
C -->| 吃西瓜 | D[拉肚]
C -->| 喝冰水 | D[拉肚]
D --> F(变瘦)
C -->| 一起学习 | E[没拉肚]graph TD竖向, graph LR横向
八、slidev工具栏(太牛了)
其实 slidev 厉害之处是他提供的各种小性能:
画笔
有个问题, 就是画笔绘制的线条会始终保留, 每一页都保留的话其实不太难受, 大家酌情应用。
演讲模式
相似 PPT 的演示模式, 这里会把视角分成 ” 演讲者 ” 与 ” 观众 ”, “ 观众视角 ” 会随着 ” 演讲者 ” 的变动而变动:
在 .md 文件的最初写备注就能够在演讲者模式看到了:
---
transition: slide-up
background: https://source.unsplash.com/collection/94734566/1920x1080
title: 我可是首页
---
# 我可是首页
<!-- 这里是首页的备注文字, 看失去我吗? -->演讲者:http://localhost:3030/presenter/1
观众:http://localhost:3030/1
有个问题, 就是右上角的演讲计时是每次点击演讲模式都会从新计时, 所以如果你中图要退出去一下再关上就不要以这个工夫为主。
边改边演示
直播演示
调用摄像头能够看到直播的人并听到声音:
end
slidev还有不少弱小的性能, 令人诧异的是它能够间接应用 vue 的组件, 还能够把我的项目导出成 PDF 等等这些能力尽管强但会把 slidev 的用法弄简单, 以后 slidev 提供的能力其实曾经够了, 这次就是这样, 心愿与你一起提高。