基于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上同步发布。转载请注明来源。
参考文档
最新文章
- Maven与Ant比较
- ijkplayer导入AS时,出现more than one library with package name错误
- SQL Server时间粒度系列
- android蓝牙技术
- easyUi学习备忘
- Log Parser 2.2
- VBA 打印设置相关属性及方法
- Spark history-server 配置 !运维人员的强大工具
- HBase笔记--安装及启动过程中的问题
- c# 正则表达式对网页进行内容抓取
- HUST 1371 Emergency relief
- TCP常见的定时器三次握手与四次挥手
- ios video标签部分mp4文件无法播放的问题
- protobuf/android 交叉编译笔记
- SQL SERVER-创建Alwayson
- Hbase常用操作记录
- Python递归_打印节点信息
- spring重要知识点总结
- Codeforces Round #417 (Div. 2) C. Sagheer and Nubian Market
- ScrollView嵌套RecyclerView、ScrollView嵌套Listview、ScrollView嵌套各种布局,默认不在顶部和回到顶部的解决方法;
热门文章
- Ubuntu安装Java8和Java9
- 吾八哥学Python(一):搭建Python开发环境(Windows)
- win10 UWP 序列化
- LINUX下分区命令Parted详解
- JS中replace()用法举例
- mybatis 的mapper配置文件sql语句中, 有时用到 大于, 小于等等
- LeetCode 167. Two Sum II - Input array is sorted (两数之和之二 - 输入的是有序数组)
- LeetCode 100. Same Tree (相同的树)
- Hdu 1698(线段树 区间修改 区间查询)
- POJ2318 TOYS(叉积判断点与直线的关系+二分)