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

標籤：ogre   html   程式員   isp   one   本文   自己的   png   1.2   

前言

       程式員除了會寫的一手漂亮的代碼，也要求做出風格優雅的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>

View Code

       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>

View Code

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

 

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