HTML5幻燈片庫reveal.js使用

chenhao_ch發表於2015-11-27
HTMLJS

介紹

最近在準備一個團隊內部的分享，覺得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檔案，可以部署到伺服器，這樣只需要網路就可以進行分享，不需要使用隨身碟拷來拷去了。

相關文章