背景、
作为一个开发者, 每次应用PPT或者Word写简历或者述职都好苦楚啊, 这些App也不太适宜展现代码, 然而明天来的家人们有福了, 一款叫做是slidev的库露出了邪魅的微笑 官网地址。
Slidev (slide + dev, /sldv/) 是基于 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-upbackground: 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-leftimage: https://source.unsplash.com/collection/94734566/1920x1080---# 我是图片<img src="/images/lulu.png" class="h-40" />---layout: image-rightimage: 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-uppreload: falseclicks: 3 # 这里是要害!--- 此时在这个页面点击next超过3次就会翻页。
七、流程图
slidev的流程图解决集成了mermaid.js(美人鱼), 咱们这里简略演示一下根底用法:
graph LRA[方形]B(圆角矩形)C((圆形))D{菱形}A --> B --> C --> D graph TDB[张三] --> C{李四}C -->|吃西瓜| D[拉肚]C -->|喝冰水| D[拉肚]D --> F(变瘦)C -->|一起学习| E[没拉肚]graph TD竖向, graph LR横向
八、slidev工具栏(太牛了)
其实slidev厉害之处是他提供的各种小性能:
画笔
有个问题, 就是画笔绘制的线条会始终保留, 每一页都保留的话其实不太难受, 大家酌情应用。
演讲模式
相似PPT的演示模式, 这里会把视角分成"演讲者"与"观众", "观众视角"会随着"演讲者"的变动而变动:
在.md文件的最初写备注就能够在演讲者模式看到了:
---transition: slide-upbackground: https://source.unsplash.com/collection/94734566/1920x1080title: 我可是首页---# 我可是首页<!-- 这里是首页的备注文字, 看失去我吗? -->演讲者:http://localhost:3030/presenter/1
观众:http://localhost:3030/1
有个问题, 就是右上角的演讲计时是每次点击演讲模式都会从新计时, 所以如果你中图要退出去一下再关上就不要以这个工夫为主。
边改边演示
直播演示
调用摄像头能够看到直播的人并听到声音:
end
slidev还有不少弱小的性能,令人诧异的是它能够间接应用vue的组件, 还能够把我的项目导出成PDF等等这些能力尽管强但会把slidev的用法弄简单, 以后slidev提供的能力其实曾经够了, 这次就是这样, 心愿与你一起提高。