HTML5幻燈片庫reveal.js使用

介紹

最近在準備一個團隊內部的分享，以爲powerpoint寫幻燈片太麻煩，效率過低。做爲前端，就想到是否可使用頁面來作幻燈片。因而就去搜索了下有沒有HTML5實現幻燈片的工具。通過對比，最後選擇了了reveal.js來實現幻燈片。
reveal.js是一個用於實現幻燈片效果的庫。使用該庫。
github地址：github
提供了頁面編輯功能：slides.com
官方demo: demo
我本身作的PPT地址：vuejs-ppt

特色

reveal.js有一下幾個特色：

• 支持標籤來區分每一頁幻燈片

• 可使用markdown來寫內容

• 支持pdf的導出

• 支持演說註釋

• 提供JavaScript API來控制頁面

• 提供了多個默認主題和切換方式

幻燈片實現步驟

1. 從reveal.js上下載壓縮包，並解壓

2. 進入reveal.js文件夾，直接修改index.html文件就能夠

3. 編輯後好，打開頁面就能夠看到PPT的內容。 按下S鍵，會打開時間，下一張PPT，Notes等信息的頁面，方便演示PPT

幻燈片內容實現方法

幻燈片的內容須要包含在<div class="reveal"> <div class="slides">的標籤中。
一個section是一頁幻燈片。當section包含在section中時，是一個縱向的幻燈片。
怎麼理解呢？ 能夠這樣理解：橫向的幻燈片表明一章，縱向的幻燈片表明一章中的一節。那麼橫向的幻燈片在播放時是左右切換的，而縱向的幻燈片是上下切換的。For example:

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

html實現內容

標題和正文

section中的內容就是幻燈片的內容，你可使用h2標籤標示title, p表示內容。須要紅色的字體能夠直接設置style的color爲red。
當某一頁須要特殊背景色，可使用data-background在section上設置, data-background-transition表示背景的過渡效果。For example:

<section data-background-transition="zoom" data-background="#dddddd">

若是須要正文一段一段出現。可使用fragment。For Example:

<p class="fragment"></p>

代碼

reveal.js使用highlight.js來支持代碼高亮。能夠直接寫code標籤來實現, data-trim表示去除多餘的空格。For Example:

<pre><code data-trim>
  console.log('hello reveal.js!');
</code></pre>

註釋

在演說時，會用到註釋，對於註釋，能夠經過<aside class="notes">來實現。For Example:

<aside class="notes">
  這裏是註釋。
</aside>

在幻燈片頁面，按下s鍵，就能夠調出註釋頁面，註釋頁面包含了當前幻燈片，下一章幻燈片，註釋，以及幻燈片播放時間。

markdown實現

reveal.js不只支持html表示來實現內容， 還能夠經過markdown來實現內容。使用markdown實現內容時，須要對section標示添加data-markdown屬性，而後將markdown內容寫到一個text/template腳本中。For Example:

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>

背景色，fragment功能的實現，能夠經過註釋來實現。For Example:

<section data-markdown>
    <script type="text/template">
    <!-- .slide: data-background="#ff0000" -->
        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
    </script>
</section>

外置md文件

reveal.js能夠引用一個外置的markdown文件來解析。For Example:

<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>

分頁實現

一個markdown文件中能夠連續包含多個章內容。能夠在section中經過屬性data-separator, data-separator-vertical來劃分章節。For Example:

<section data-separator="---" data-separator-vertical="--"  >
  <script type="text/template">
    # 主題1
    - 主題1-內容1
    - 主題1-內容2
    --
    ## 主題1-內容1
    內容1-細節1
    --
    ## 主題1-內容2
    內容1-細節2
    ---
    # 主題2
  </script>
</section>

註釋

對section添加 data-separator-notes="^Note:"屬性，就能夠指定Note:後面的內容爲當前幻燈片的註釋。For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

PDF導出

能夠利用瀏覽器保存爲pdf的功能來實現pdf的轉化。步驟是

1. 再url後面添加print-pdf參數，訪問後，頁面會去加載打印用的css文件，頁面效果就是pdf的樣式。

2. 右鍵選擇打印。設置爲保存pdf。

我試過保存pdf的功能，有內容會重疊，懷疑是樣式沒有處理好。

多主題

reveal.js提供了多種樣式。能夠經過引用不一樣的主題來實現。具體主題查看reveal.js/css/theme下的css文件。

總結

用reveal.js來實現幻燈片，能夠只關注內容，忽略各類切換效果。並且可使用markdown來實現，大大提升了編寫效率。對於最後生成的html文件，能夠部署到服務器，這樣只須要網絡就能夠進行分享，不須要使用U盤拷來拷去了。