基於docker+reveal.js搭建一個屬於本身的在線ppt網站

前言

最近熱衷於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上同步發佈。轉載請註明來源。

---

參考文檔

• revealjs官網