最近热衷于
,由于这段时间使用
- Docker
来折腾自己的服务器,越来越感觉这是一种极其被应该推广的技术,因此想在公司内部也做一次技术分享。当然,如果只是做的PPT,我就不写这文章了。既然把
- Docker
说这么好,那就想办法用
- Docker
来搭建一个在线的PPT展示网站吧。
- Docker
在网上搜了一下,发现
这个工具的展示效果非常好,它基于html即可完成在线PPT的制作,而且在移动设备上也有非常好的兼容性,同时也支持直接用
- reveal.js
语法来写,毫无疑问,这个就是我要找的工具,在
- markdown
上搜索了一下,果然已经有现成的镜像,对比了一下,最后决定选用
- Docker hub
。当然如果你完全不懂HTML,官方也提供了一个在线版的可视化编辑器:https://slides.com/
- nbrown/revealjs
还记得之前写的这篇:Centos7.4下用Docker-Compose部署WordPress(续)-服务器端用Nginx作为反向代理并添加SSL证书(阿里云免费DV证书) 的文章吗?
基于之前的环境,我们已经有了:
假设上面这些都已经完成,搭建一个基于
的在线PPT演示网站就是分分钟的事?确实,我们仅需要再写一个
- HTTPS
配置文件即可:
- 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
网站就建设完成了。
从revealjs的github源码上下载源码,在
中,包含了所有的使用方法,我根据自己的使用过程简单整理下它的基本功能。
- demo.html
: 可以切换到PPT页面的预览模式
- esc
: 黑屏模式,可以在需要暂停演示但又不想听众被PPT内容吸引的时候进入这个模式
- b
: Speader View模式,可以在扩展屏幕上展示提示内容、当前时间、已经展示的时间、下一屏内容等信息
- s
: 上下左右切换PPT(对,你没看错,revealjs也可以写上下切换的PPT)
- 方向键
支持好多种PPT的过场动画效果、主题样式,也支持自定义PPT背景(支持图片、视频和gif)。
- revealjs
你可以在
中找到所有你喜欢的这些内容并应用在自己的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>
在
标签中的内容,页面上不可见,但在
- <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>
最终,在本地完成了HTML文件后,将文件上传或拷贝到服务器上指定的位置,我的成品如下:Docker入门,虽然也没用到所有特性,但是常用的那些基本都有涉及。
本文在博客园和我的个人博客www.fujiabin.com上同步发布。转载请注明来源。
来源: http://www.cnblogs.com/wushangjue/p/7908037.html