关于javascript:学会了slidevjs的开发者-也许可以考虑不用ppt了

背景、

    作为一个开发者, 每次应用 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 提供的能力其实曾经够了, 这次就是这样, 心愿与你一起提高。