相信或多或少，大家都有製作投影片進行簡報的經驗，以製作投影片來說最主要的軟體大概非PoertPoint莫屬了；而想要使用PowerPoint做出絢麗的簡報沒有一番功夫可是做不到的...不過，我們可是前端工程師阿！如果有一款簡報軟體，可以使用我們熟悉的前端技術來完成，不是很棒的一件事情嗎？而Reveal.js就是這樣一款好用的簡報框架。
關於Reveal.js
Reveal.js是一款允許使用HTML來完成簡報的框架，透過Reveal.js前端工程師們可以使用自己最熟悉的HTML/CSS/JS來完成精美的投影片，也有許多內建的themes以及plugins可以選擇，讓你製作投影片更加得心應手！
開始使用Reveal.js
下載Reveal後，我們先載入reveal.js及reveal.css，然後可以再themes選擇一個喜歡的主題使用，接著加入以下HTML
<div class="reveal">
<div class="slides">
</div>
</div>
這是最基本的簡報外框，我們可以在裡面加入許多的<section>區塊，這些區塊就代表了每一張投影片，例如：
<div class="reveal">
<div class="slides">
<section>
<h1>
使用Reveal.js
</h1>
<h2>
前端製作簡報好簡單！
</h2>
</section>
</div>
</div>
接著在JavaScript加入一段簡單的程式碼
Reveal.initialize();
一張標準的簡報就完成啦！
加入多張投影片
剛剛已經提過了，每個<section>區塊就代表一張投影片，因此我們需要幾張投影片，就加入幾個<section>
<section>Page 1</section>
<section>Page 2</section>
接著我們就可以使用方向鍵的左(←)右(→)來切換投影片，除了左右建以外，我們也可以在一個<section>中再加入多個子<section>，此時就可以使用上(↑)下(↓)鍵來切換，例如：
<section>Page 1</section>
<section>
<section>我是第2頁，請按方向鍵(↓)</section>
<section>我是第2-1頁</section>
</section>
我們也可以按下esc，一次可以看到多張的投影片。
程式碼DEMO: https://jsfiddle.net/wellwind/46ufzs2b/
加入其他plugins
Reveal.js也內建了一些plugins可以使用，例如我們希望可以在簡報中直接使用markdown語法，那麼可以修改JavaScript為
Reveal.initialize({
dependencies: [{
src: '/plugin/markdown/marked.min.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/markdown/markdown.min.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
}]
});
接著在<section>加上data-markdown這個attribute，然後把markdown語法放在<script type="text/template">裡面，就可以啦！
關於Markdown與plugins的細節可以參考Markdown說明與Dependencies的說明部分。
其他參數設定
Reveal.js也有很多參數可以讓你調整簡報的細節，可以考Configuration說明，以下簡單舉個例子，假設我們希望可以自動加上頁碼，以及每3秒自動播放下張投影片，那麼JavaScript如下
Reveal.initialize({
slideNumber: true,
autoSlide: 3000
});
其他...
Reveal.js還有其他更多的設定部分，一篇文章很難介紹得完，有興趣可以直接上GitHub的文件去看看，或先到官方DEMO參考看看囉！
類似資源
- Deck.js：也是一款功能強大、擴充性強的簡報框架，小缺點是相依於jQuery及Modernizr。
- fullPage.js：也是非常強大的簡報框架，同樣相依於jQuery，不過最特別的是他提供了Wordpress的外掛，以及對Reace/Angular 1.x/Angular 2.x的支援，在設計上能更加方便。