分享一款基于Web的PPT制作框架——Reveal.js
前言
最近在做產(chǎn)品復(fù)盤和技術(shù)分享,所以需要做個(gè)PPT, 來(lái)回顧這半年來(lái)的技術(shù)貢獻(xiàn). 但苦于mac上運(yùn)行PPT那感人的流暢度, 成功的激起了我的強(qiáng)迫癥, 所以索性想辦法通過(guò)技術(shù)的手段來(lái)做個(gè)網(wǎng)頁(yè)版PPT, 這個(gè)時(shí)候我發(fā)現(xiàn)了reveal.js: 一個(gè)使用 HTML 語(yǔ)言制作演示文稿的 Web 框架，支持插入多種格式的內(nèi)容，并以類似 PPT 的形式呈現(xiàn). 花了15分鐘系統(tǒng)的調(diào)研了一下, 覺得基本滿足技術(shù)分享類PPT的要求, 所以決定采用該方案來(lái)實(shí)現(xiàn)我的網(wǎng)頁(yè)版PPT. 這里列一下我用的技術(shù)調(diào)研:
所以我接下來(lái)大致按照以上幾個(gè)衡量標(biāo)準(zhǔn), 來(lái)帶大家一起感受一下如何快速通過(guò)reveal.js實(shí)現(xiàn)一個(gè)極具動(dòng)感的PPT.
正文
首先我先來(lái)談?wù)凱PT的不足(非專業(yè)角度, 技術(shù)視角):
- PPT雖然強(qiáng)大，但占據(jù)了磁盤的大量空間，運(yùn)行時(shí)內(nèi)存占用也不??；而且在 mac上跑 PPT 來(lái)就像乘上了印度的綠皮小火車。隨著 mac 的普及和動(dòng)畫技術(shù)的發(fā)展，諸如Keynote、Prezi 等新秀陸續(xù)出現(xiàn)，它們不僅輕量且可以實(shí)現(xiàn)各種炫目的動(dòng)畫效果.
- 制作需要花費(fèi)大量時(shí)間, 受平臺(tái)限制
所以對(duì)于不熟悉PPT套路的技術(shù)工作者來(lái)說(shuō), 往往很難快速制作出精美的PPT.
接下來(lái)我們?cè)倏纯磖eveal.js的優(yōu)勢(shì).
- reveal.js可以把 Markdown 文件轉(zhuǎn)為類似 PPT 的演示文稿，輕快省力，減少排版上的時(shí)間，讓演講者更專于文字內(nèi)容；同時(shí)，也獲得 PPT 所不具有的靈活性
- 制作發(fā)布靈活、不限應(yīng)用，不限平臺(tái), 只需修改或打開 HTML 文件
- 豐富的特性，支持過(guò)渡動(dòng)畫、代碼高亮、視頻背景、Markdown 語(yǔ)法、導(dǎo)出 PDF 等
- 極度輕量，占用空間和內(nèi)存少
說(shuō)了這么多revealjs的優(yōu)點(diǎn),接下來(lái)我們就來(lái)學(xué)習(xí)如何使用它吧.
reveal.js使介紹以及核心api
作為一名前端工程師, 我們很容易把 reveal.js 集成到我們的vue或者react項(xiàng)目中, 但是作為演講類型的項(xiàng)目,我們直接用最原始的方式實(shí)現(xiàn)即可,首先我們需要引入相關(guān)的文件,具體可參考官網(wǎng)所說(shuō)的步驟去做: revealjs.com/. 最簡(jiǎn)單的使用方式如下:
<html>
<head>
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/white.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
復(fù)制代碼這樣通過(guò)短短幾行代碼, 我們就能實(shí)現(xiàn)一個(gè)兩頁(yè)的PPT.
當(dāng)然我們還能實(shí)現(xiàn)更加自由的演示動(dòng)畫, 父子嵌套結(jié)構(gòu), 專場(chǎng)動(dòng)畫等. 接下來(lái)我們介紹幾個(gè)核心API.
父子嵌套
父子嵌套主要是一個(gè)PPT主題可能包含很多子主題, 要想實(shí)現(xiàn)父子主題分明的演示文檔, 在reveal.js也很好實(shí)現(xiàn), 只需要在section內(nèi)部再包裹section標(biāo)簽即可. 代碼如下:
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<section>
Slide 2-1
</section>
<section>
Slide 2-2
</section>
</section>
<section>Slide 3</section>
</div>
</div>
復(fù)制代碼效果如下圖所示:
嵌入腳本
我們都知道技術(shù)類PPT肯定離不開代碼, 我們?cè)趓eveal.js中可以很容易的展示我們的代碼,并且支持多種語(yǔ)言, 其框架底層集成了 業(yè)界比較有名的highlight.js. 使用方式如下:
使用Markdown
Markdown是技術(shù)工作者常用的編寫文檔的工具, revealjs同樣也支持使用Markdown的方式來(lái)編寫PPT, 是不是很貼切? 具體方式如下:
動(dòng)態(tài)背景Backgrounnds
revealjs支持對(duì)每一頁(yè)幻燈片使用自定義背景(包括視頻).我們只需要在section標(biāo)簽中使用data-background即可, 并且支持背景透明. 具體demo如下:
Backgrounnds一共有如下屬性可以使用:
- data-background-image 當(dāng)前頁(yè)的背景圖片地址
- data-background-size 背景的大小
- data-background-position 背景位置
- data-background-repeat 背景的重復(fù)方式
- data-background-opacity 背景透明度
- data-background-video 視頻背景的地址
- data-background-video-loop 視頻背景的循環(huán)模式
- data-background-iframe 背景為iframe的url地址
- data-background-interactive 是否能與iframe的內(nèi)容交互
Fragments
Fragments用來(lái)高亮或者漸進(jìn)式的展現(xiàn)元素.每一個(gè)包含fragment類名的元素都被視為漸進(jìn)的元素, 它們會(huì)通過(guò)點(diǎn)擊下一步來(lái)依次呈現(xiàn)在幻燈片中.
定制主題Theme
reveal.js提供了很多種不同風(fēng)格的主題, 我們只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主題.大家可以自行感受一下.
Transitions轉(zhuǎn)場(chǎng)動(dòng)畫
不同幻燈片進(jìn)入頁(yè)面的動(dòng)畫方式我們可以使用Transitions來(lái)設(shè)定. 以下是提供的幾種默認(rèn)轉(zhuǎn)場(chǎng)動(dòng)畫:
- fade 淡出
- slide 滑出
- convex 凸面旋轉(zhuǎn)
- concave 凹面旋轉(zhuǎn)
- zoom 放大
具體demo實(shí)現(xiàn)如下:
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<section data-transition="fade">
Slide 2-1
</section>
<section data-transition="convex">
Slide 2-2
</section>
<section data-transition="concave">
Slide 2-3
</section>
<section data-transition="zoom">
Slide 2-4
</section>
</section>
<section>Slide 3</section>
</div>
</div>
復(fù)制代碼導(dǎo)出PDF
導(dǎo)出PDF作為一個(gè)附加功能也算是比較貼心了,如果想了解使用方式可以參考https://revealjs.com/pdf-export/. 接下來(lái)我們就來(lái)實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的PPT demo, 供大家學(xué)習(xí)參考.
reveal.js制作一個(gè)一個(gè)動(dòng)感PPT的demo
效果演示請(qǐng)?jiān)L問(wèn)地址: https://user-gold-cdn.xitu.io/2020/7/13/173473da6ed62d8a?imageslim
代碼如下:
<body>
<div class="reveal">
<div class="slides">
<section data-background-image="./img/z1.png" data-background-opacity=".4">
<h1>趣談前端</h1>
<p>徐小夕</p>
</section>
<section>
<section data-transition="fade" data-background-color="orange">
<h1>趣談前端 Javascript</h1>
</section>
<section data-transition="convex" data-background-color="green">
<h1>趣談前端 Vue</h1>
</section>
<section data-transition="concave" data-background-color="#61dafb">
<h1>趣談前端 React</h1>
</section>
<section data-transition="zoom" data-background-color="#b32535">
<h1>趣談前端 Angular</h1>
</section>
</section>
<section>
<h1>NodeJS</h1>
<pre><code data-trim data-noescape>
const fs = require('fs')
const Koa = require('koa')
const app = new Koa()
</code></pre>
</section>
<section>
<h3>設(shè)計(jì)模式</h3>
<p class="fragment">觀察者模式</p>
<p class="fragment">工廠模式</p>
<p class="fragment">迭代器模式</p>
</section>
<section>
<h4>數(shù)據(jù)結(jié)構(gòu)與算法</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
復(fù)制代碼
