reveal.js讓程序員做ppt也享受快樂

前言

       程序員除了會寫的一手漂亮的代碼，也要求做出風格優雅的PPT，諸如向領導匯報工作、向小組成員反饋項目進展自己的工作等等。就本人而言，做ppt還要去找模板，還需要設計風格，內心是焦灼的。於是乎，我搜到了這樣的一款js庫，用代碼完成ppt，培訓期間論文的答辯PPT采用這一方案，得到了領導同事的一致好評。這篇文章簡單地講一下reveal.js的基礎知識，我是用了不到兩個小時做出了一個ppt，從無到有，個人覺得很簡單。

正文

       reveal.js是一個專門用來做 HTML 演示文稿的框架。只需要在index.html中引入主題樣式文件（其中包括bootstrap.min.css,如果你想用到bootstrap的樣式的話）以及js文件即可。如下所示

<link rel="stylesheet" href="css/reveal.css" />
    <link rel="stylesheet" href="css/theme/white.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/reveal.js"></script>

       reveal.js的主題部分是body內嵌的html代碼，如下圖

       所有的ppt部分要求寫在雙層div中，且外層div的class為reveal，內層div的class為slides。每個ppt即為一個section，即<section></section>。互為兄弟節點的section在ppt演示時是通過左右方向的箭頭進行切換，而section也可以內嵌section。比如我們做一個ppt分為三個章節，假設第一章節有1.1,1.2,1.3三個小節，那么三個章節就是兄弟節點關系，1.1，1.2,1.3則是兄弟節點關系，且這三個小節是內嵌在第一章節的section內部。

       還有一點，我們也可以很方便地寫出每張ppt的頁眉和頁腳，頁眉（或頁腳）的內容不寫在section，它的父節點就是<div class="slides"></div>,至於是頁眉還是頁腳，可以通過css控制定位即可。

       reveal.js也定義了自己一套默認規則，如下圖所示

    <script>
        Reveal.initialize({
            controls: true,
            progress: true,
            slideNumber: 'c/t'
        });
    </script>

       通過Reveal.initialize({});進行設置，像進度條、頁碼、自動播放控制等。reveal.js雖然是通過瀏覽器播放，但是它也提供了打印以及pdf轉換等功能。本文只是講了reveal.js最基本的用法。