前言
最近热衷于Docker，由于这段时间使用Docker来折腾自己的服务器，越来越感觉这是一种极其被应该推广的技术，因此想在公司内部也做一次技术分享。当然，如果只是做的PPT，我就不写这文章了。既然把Docker说这么好，那就想办法用Docker来搭建一个在线的PPT展示网站吧。
寻找合适的工具
在网上搜了一下，发现reveal.js这个工具的展示效果非常好，它基于HTML即可完成在线PPT的制作，而且在移动设备上也有非常好的兼容性，同时也支持直接用markdown语法来写，毫无疑问，这个就是我要找的工具，在Docker hub上搜索了一下，果然已经有现成的镜像，对比了一下，最后决定选用nbrown/revealjs。当然如果你完全不懂HTML，官方也提供了一个在线版的可视化编辑器：/
开始搭建
还记得之前写的这篇：Centos7.4下用Docker-Compose部署WordPress（续）-服务器端用Nginx作为反向代理并添加SSL证书（阿里云免费DV证书） 的文章吗？
基于之前的环境，我们已经有了：
安装好的docker和docker compose环境Docker network nginx-proxyssl证书存放的目录：wp_certs从阿里云申请免费DV的方法
假设上面这些都已经完成，搭建一个基于HTTPS的在线PPT演示网站就是分分钟的事？确实，我们仅需要再写一个docker-compose.yml配置文件即可：
version: '3'services:revealjs:#image: nbrown/revealjs:latestimage: nbrown/revealjs:3.5.0-onbuildcontainer_name: mypptrestart: alwaysexpose:- 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: # 选用这个域名，需要在域名解析中绑定一下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入门，虽然也没用到所有特性，但是常用的那些基本都有涉及。
本文在博客园和我的个人博客上同步发布。转载请注明来源。
