基于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官网