分享一款基于Web的PPT制作框架——Reveal.js
前言
最近在做產品復盤和技術分享,所以需要做個PPT, 來回顧這半年來的技術貢獻. 但苦于mac上運行PPT那感人的流暢度, 成功的激起了我的強迫癥, 所以索性想辦法通過技術的手段來做個網頁版PPT, 這個時候我發現了reveal.js: 一個使用 HTML 語言制作演示文稿的 Web 框架，支持插入多種格式的內容，并以類似 PPT 的形式呈現. 花了15分鐘系統的調研了一下, 覺得基本滿足技術分享類PPT的要求, 所以決定采用該方案來實現我的網頁版PPT. 這里列一下我用的技術調研:
所以我接下來大致按照以上幾個衡量標準, 來帶大家一起感受一下如何快速通過reveal.js實現一個極具動感的PPT.
正文
首先我先來談談PPT的不足(非專業角度, 技術視角):
- PPT雖然強大，但占據了磁盤的大量空間，運行時內存占用也不小；而且在 mac上跑 PPT 來就像乘上了印度的綠皮小火車。隨著 mac 的普及和動畫技術的發展，諸如Keynote、Prezi 等新秀陸續出現，它們不僅輕量且可以實現各種炫目的動畫效果.
- 制作需要花費大量時間, 受平臺限制
所以對于不熟悉PPT套路的技術工作者來說, 往往很難快速制作出精美的PPT.
接下來我們再看看reveal.js的優勢.
- reveal.js可以把 Markdown 文件轉為類似 PPT 的演示文稿，輕快省力，減少排版上的時間，讓演講者更專于文字內容；同時，也獲得 PPT 所不具有的靈活性
- 制作發布靈活、不限應用，不限平臺, 只需修改或打開 HTML 文件
- 豐富的特性，支持過渡動畫、代碼高亮、視頻背景、Markdown 語法、導出 PDF 等
- 極度輕量，占用空間和內存少
說了這么多revealjs的優點,接下來我們就來學習如何使用它吧.
reveal.js使介紹以及核心api
作為一名前端工程師, 我們很容易把 reveal.js 集成到我們的vue或者react項目中, 但是作為演講類型的項目,我們直接用最原始的方式實現即可,首先我們需要引入相關的文件,具體可參考官網所說的步驟去做: revealjs.com/. 最簡單的使用方式如下:
<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>
復制代碼這樣通過短短幾行代碼, 我們就能實現一個兩頁的PPT.
當然我們還能實現更加自由的演示動畫, 父子嵌套結構, 專場動畫等. 接下來我們介紹幾個核心API.
父子嵌套
父子嵌套主要是一個PPT主題可能包含很多子主題, 要想實現父子主題分明的演示文檔, 在reveal.js也很好實現, 只需要在section內部再包裹section標簽即可. 代碼如下:
<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>
復制代碼效果如下圖所示:
嵌入腳本
我們都知道技術類PPT肯定離不開代碼, 我們在reveal.js中可以很容易的展示我們的代碼,并且支持多種語言, 其框架底層集成了 業界比較有名的highlight.js. 使用方式如下:
使用Markdown
Markdown是技術工作者常用的編寫文檔的工具, revealjs同樣也支持使用Markdown的方式來編寫PPT, 是不是很貼切? 具體方式如下:
動態背景Backgrounnds
revealjs支持對每一頁幻燈片使用自定義背景(包括視頻).我們只需要在section標簽中使用data-background即可, 并且支持背景透明. 具體demo如下:
Backgrounnds一共有如下屬性可以使用:
- data-background-image 當前頁的背景圖片地址
- data-background-size 背景的大小
- data-background-position 背景位置
- data-background-repeat 背景的重復方式
- data-background-opacity 背景透明度
- data-background-video 視頻背景的地址
- data-background-video-loop 視頻背景的循環模式
- data-background-iframe 背景為iframe的url地址
- data-background-interactive 是否能與iframe的內容交互
Fragments
Fragments用來高亮或者漸進式的展現元素.每一個包含fragment類名的元素都被視為漸進的元素, 它們會通過點擊下一步來依次呈現在幻燈片中.
定制主題Theme
reveal.js提供了很多種不同風格的主題, 我們只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主題.大家可以自行感受一下.
Transitions轉場動畫
不同幻燈片進入頁面的動畫方式我們可以使用Transitions來設定. 以下是提供的幾種默認轉場動畫:
- fade 淡出
- slide 滑出
- convex 凸面旋轉
- concave 凹面旋轉
- zoom 放大
具體demo實現如下:
<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>
復制代碼導出PDF
導出PDF作為一個附加功能也算是比較貼心了,如果想了解使用方式可以參考https://revealjs.com/pdf-export/. 接下來我們就來實現一個動態的PPT demo, 供大家學習參考.
reveal.js制作一個一個動感PPT的demo
效果演示請訪問地址: 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>設計模式</h3>
<p class="fragment">觀察者模式</p>
<p class="fragment">工廠模式</p>
<p class="fragment">迭代器模式</p>
</section>
<section>
<h4>數據結構與算法</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>
復制代碼
