學會了slidev.js的開發者, 也許可以考慮不用ppt了?

lulu_up發表於2023-03-26
IDEdevJS

image.png

背景、

    作為一個開發者, 每次使用PPT或者Word寫簡歷或者述職都好痛苦啊, 這些App也不太適合展示程式碼, 但是今天來的家人們有福了, 一款叫做是slidev的庫露出了邪魅的微笑 官網地址。

Slidev (slide + dev, /slʌɪdɪv/) 是基於 Web 的幻燈片製作和演示工具。它旨在讓開發者專注在 Markdown 中編寫內容，同時擁有支援 HTML 和 Vue 元件的能力，並且能夠呈現畫素級完美的佈局，還在你的演講稿中內建了互動的演示樣例。

    下面直接上動圖吧:

slidevys.gif

    其實官方網站寫的還算完整, 但之所以寫這篇文章是因為官網裡一些寫法其實有bug, 並且官網裡很多出都展示了程式碼但是沒有展示效果圖, 並且官方文件的編寫順序有一點點不友好, 讓人看起來有點暈。

image.png

一、安裝

npm init slidev

   你可以把他當成是用create-react-app建立了一個react專案

image.png

   這裡要注意雖然官網說大於等於14.0.0, 但是親測至少需要14.18.0

image.png

    建立好後進入專案目錄執行:

yarn dev

二、模組分頁與動畫

   slidev每一頁都是等比縮放的, 並且每頁都是無法滾動的, 所以每頁的內容是有限的這點要注意:

slidevys.gif

   slidev有點奇怪, 專案啟動後會預設以外層的slidev.md為入口檔案進行解析:
image.png

    我們可以先把slidev.md檔案內容清空, 因為官網的例子裡是把幾乎所有頁面的程式碼都寫在了這裡, 這導致看起來亂遭遭並且寫程式碼容易竄行, 所以這裡我建議先學如何劃分頁面模組:

---
src: ./pages/1:首頁.md
---

---
src: ./pages/2:程式碼展示.md
---

---
src: ./pages/3:圖片.md
---

在 pages資料夾裡新增md檔案

image.png

    在slidev的語法裡面, "---"中間包裹的一般是一些全域性設定, 如果單獨寫"---"就類似於"

"標籤的樣式, 但是注意這裡有個bug:
---
# ---
src: ./pages/1:首頁.md
---

image.png

    上述程式碼直接導致頁面崩潰, 因為就算是被註釋掉的"---"仍然會被誤解析, 我們在註釋裡寫其他的文字都不會報錯, 這裡要注意!!

image.png

    此時我們點選下方的方向鍵可以切換頁面, 也可以透過鍵盤的左右按鍵來切換。
image.png

    我們增加頁面切換的動畫, 比如在 首頁.md 裡新增如下的程式碼, 意思是當前頁面處於下一頁的上方:

---
transition: slide-up
---

# 我可是首頁

slidevys.gif

    第一頁的佈局預設是上下居中的, 我們來為第一頁設定一個背景圖案吧:

---
transition: slide-up
background: https://source.unsplash.com/collection/94734566/1920x1080
---

# 我可是首頁

    這裡背景圖片的url是官網提供的, 圖片是隨機的每時每刻不一樣, 設定了 background 後的效果:

image.png

三、程式碼高亮步驟

    這裡要說一下對開發者很重要的能力, 程式碼展示與逐步高亮, 我以快速排序的程式碼為例:

image.png

    {2-4|6|7|all}的意思是將程式碼分成 4段, 第一次2到4行高亮, 以此類推最後全部高亮, 但是要注意{2-4|6|7| all}假如這裡哪怕只是多寫了個空格那麼這個語句都是不生效的。

slidevys.gif

    可以看出每次點選next按鈕時就會按序切換展示狀態, 並且url上會拼接clicks=n, 這裡的n就是你在當前頁點選了幾次next, slidev文件中說的擊事件的都是url上clicks的變化, 而不是真的點選某個元素。

    我們只需要加上{monaco} 就可以讓程式碼可修改:

image.png

slidevys.gif

    我們還可以貼一些連結, 寫法與Markdown一致:

[程式碼地址](https://segmentfault.com/u/lulu_up)

image.png

四、圖片

    絢麗的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" />

image.png

---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---

# 我是圖片

<img src="/images/lulu.png" class="h-40" />

image.png

五、分欄佈局

    當我們想要左右展示內容時需要再頁面頭部就設定:

---
layout: two-cols
---

<template v-slot:default>

# 左佈局

當然是內容了

</template>
<template v-slot:right>

# 右佈局

當然是內容了

</template>

image.png

    這裡值得注意的是沒有 layout: three-cols這類名稱, 當前只能兩欄佈局, 並且<template></template>標籤之外寫一些內容會報錯, 比如寫 #我是標題就會導致白屏, 下面就是錯誤寫法:

---
layout: two-cols
---

# 我是標題

<template v-slot:default>

# 左佈局

當然是內容了

</template>
<template v-slot:right>

# 右佈局

當然是內容了

</template>

image.png

六、動效

    這裡說的動效指的是元素出現的動效, 下面演示一下元素的位置變化動效:

<div
  v-motion
  :initial="{ y: 280 }"
  :enter="{ y: 0 }">
   來了老弟
</div>

slidevys.gif

    我們可以看出來, 當我在專案內左右切換的時候動效就沒了, 因為動效執行一次元素就被快取了, 那我們可以主動要求不快取:

---
preload: false
---
逐步展示

    一些元素需要我們每點一次next才會出現

<div v-click>主題1 <hr></div>

<div v-click>主題2 <hr></div>

<div v-click>主題3 <hr></div>

slidevys.gif

    這裡就開始有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>

slidevys.gif

    這裡還是有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

image.png

graph TD
B[張三] --> C{李四}
C -->|吃西瓜| D[拉肚]
C -->|喝冰水| D[拉肚]
D --> F(變瘦)
C -->|一起學習| E[沒拉肚]

image.png

graph TD豎向, graph LR橫向

八、slidev工具欄(太牛了)

    其實slidev厲害之處是他提供的各種小功能:

畫筆

image.png

slidevys.gif

    有個問題, 就是畫筆繪製的線條會一直保留, 每一頁都保留的話其實不太舒服, 大家酌情使用。

演講模式

    類似PPT的演示模式, 這裡會把視角分成"演講者"與"觀眾", "觀眾視角"會隨著"演講者"的變化而變化:

image.png

在.md檔案的最後寫備註就可以在演講者模式看到了:

---
transition: slide-up
background: https://source.unsplash.com/collection/94734566/1920x1080
title: 我可是首頁
---

# 我可是首頁

<!-- 這裡是首頁的備註文字, 看得到我嗎? -->

image.png

演講者:http://localhost:3030/presenter/1
觀眾:http://localhost:3030/1

slidevys.gif

image.png
    有個問題, 就是右上角的演講計時是每次點選演講模式都會重新計時, 所以如果你中圖要退出去一下再開啟就不要以這個時間為主。

邊改邊演示

image.png

slidevys.gif

直播演示

    呼叫攝像頭可以看到直播的人並聽到聲音:

image.png

image.png

end

    slidev還有不少強大的功能,令人驚訝的是它可以直接使用vue的元件, 還可以把專案匯出成PDF等等這些能力雖然強但會把slidev的用法弄複雜, 當前slidev提供的能力其實已經夠了, 這次就是這樣, 希望與你一起進步。

相關文章