前言
最近熱衷於Docker，由於這段時間使用Docker來折騰自己的服務器，越來越感覺這是一種極其被應該推廣的技術，因此想在公司內部也做一次技術分享。當然，如果只是做的PPT，我就不寫這文章了。既然把Docker說這么好，那就想辦法用Docker來搭建一個在線的PPT展示網站吧。
尋找合適的工具
在網上搜了一下，發現reveal.js這個工具的展示效果非常好，它基於HTML即可完成在線PPT的制作，而且在移動設備上也有非常好的兼容性，同時也支持直接用markdown語法來寫，毫無疑問，這個就是我要找的工具，在Docker hub上搜索了一下，果然已經有現成的鏡像，對比了一下，最后決定選用nbrown/revealjs。當然如果你完全不懂HTML，官方也提供了一個在線版的可視化編輯器：https://slides.com/
開始搭建
還記得之前寫的這篇：Centos7.4下用Docker-Compose部署WordPress（續）-服務器端用Nginx作為反向代理並添加SSL證書（阿里雲免費DV證書） 的文章嗎？
基於之前的環境，我們已經有了：
- 安裝好的docker和docker compose環境
- Docker network nginx-proxy
- ssl證書存放的目錄：wp_certs
- 從阿里雲申請免費DV的方法
假設上面這些都已經完成，搭建一個基於HTTPS的在線PPT演示網站就是分分鍾的事？確實，我們僅需要再寫一個docker-compose.yml配置文件即可：
version: '3'
services:
revealjs:
#image: nbrown/revealjs:latest
image: nbrown/revealjs:3.5.0-onbuild
container_name: myppt
restart: always
expose:
- 8000 # 這個是鏡像默認的端口
volumes:
- $PWD/content/index.html:/reveal.js/index.html # 首頁
- $PWD/content/tutorial/docker/index.html:/reveal.js/tutorial/docker/index.html # Docker教程作為一個獨立的頁面
environment:
VIRTUAL_HOST: ppt.fujiabin.com # 選用這個域名，需要在域名解析中綁定一下A記錄
networks:
default:
external:
name: nginx-proxy # 這個很眼熟，就是以前nginx反向代理的那個docker網絡
執行:
docker-compose up -d
網站就建設完成了。
開始編寫PPT
從revealjs的github源碼上下載源碼，在demo.html中，包含了所有的使用方法，我根據自己的使用過程簡單整理下它的基本功能。
鍵盤事件
esc： 可以切換到PPT頁面的預覽模式b： 黑屏模式，可以在需要暫停演示但又不想聽眾被PPT內容吸引的時候進入這個模式s： Speader View模式，可以在擴展屏幕上展示提示內容、當前時間、已經展示的時間、下一屏內容等信息方向鍵： 上下左右切換PPT（對，你沒看錯，revealjs也可以寫上下切換的PPT）
樣式及動畫效果
revealjs支持好多種PPT的過場動畫效果、主題樣式，也支持自定義PPT背景（支持圖片、視頻和gif）。
你可以在demo.html中找到所有你喜歡的這些內容並應用在自己的PPT中。
語法簡介
所有的PPT頁，需要包含到<div class="slides"></div>這個標簽中，每一頁是一個<section></section>語塊。
用markdown語法解析內容
語塊上加上標簽data-markdown即可：<section data-markdown></section>。
當前頁上可上下切換的內容
在第一級<section></section>中嵌套加入<section></section>，每個語塊即為當前頁面可上下切換的內容塊。
當前頁分段顯示
在<section id="fragments"></section>標簽內部，每個class="fragment"的元素都將作為分段內容來進行展示。
高亮代碼塊
<pre><code class="hljs" data-trim contenteditable>
xxxx
</code></pre>
漂亮的表格
<table>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Lemonade</td>
<td>$2</td>
<td>18</td>
</tr>
<tr>
<td>Bread</td>
<td>$3</td>
<td>2</td>
</tr>
</tbody>
</table>
內容引用
<blockquote cite="xxxxx">
</blockquote>
非常實用的Speaker View功能
在<aside class="notes">標簽中的內容，頁面上不可見，但在Speaker View模式下寫一些演講提示內容：
<aside class="notes">
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside>
其他特性
- 局部內容放大
- 內部頁面跳轉
- 導出為PDF
- 可擴展javascript api
- 自動播放
- 自定義鍵盤事件
- ...等
最終，在本地完成了HTML文件后，將文件上傳或拷貝到服務器上指定的位置，我的成品如下：Docker入門，雖然也沒用到所有特性，但是常用的那些基本都有涉及。
本文在博客園和我的個人博客www.fujiabin.com上同步發布。轉載請注明來源。