基于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: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: 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官网
转载于:https://www.cnblogs.com/wushangjue/p/7908037.html
基于docker+reveal.js搭建一个属于自己的在线ppt网站相关推荐
- 使用reveal.js制作一个酷炫的网页ppt
今天教大家使用reveal.js,制作一个简洁优雅的网页ppt.在这之前,你需要一些基本的HTML以及CSS的技能基础. 1.准备工作 下载插件,插件下载地址:https://github.com/h ...
- 使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课
使用webgl(three.js)搭建一个3D建筑,3D消防模拟--第三课 项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位 ...
- Docker学习之路05:五分钟用docker compose搭建一个自己的个人博客网站!
五分钟用docker compose搭建一个自己的个人博客网站! Docker学习路线传送门: Docker学习之路01:Docker的安装 Docker学习之路02:阿里云镜像加速器 Docker学 ...
- 基于Docker和Golang搭建Web服务器
1 场景描述 基于centos7的docker镜像搭建golang开发环境 在docker容器内,使用golang实现一个Web服务器 启动docker容器,并在容器内启动Web服务器 我购买了一个最 ...
- test.php创建,基于phpstudy简单快速搭建一个php程序
原标题:基于phpstudy简单快速搭建一个php程序 人人都是程序员,希望在零碎的阅读时间里,给您一些技术提升. 1 安装phpstudy 通过以下链接download.csdn.net/downl ...
- 基于docker - 单机版FastDFS搭建
基于docker - 单机版FastDFS搭建 ###### 安装单机版 ###### # make docker container docker run -it -P -v /home/insun ...
- 教你三分钟用docker compose搭建一个自己的个人博客网站
hi,大家好,我是 jack xu,今天和大家聊一个轻松.好玩.易懂的话题,就是教大家搭建一个自己的个人博客网站,可以在同事朋友面前炫耀一把.事情的缘由是我们公司有个同事,有一天他给了我一个网站,我打 ...
- 用css,html,js搭建一个书店购物系统
用css,html,js搭建一个书店购物系统,如下: <!DOCTYPE html> <html> <head> <meta charset="ut ...
- Node.js搭建一个简单的服务器
文章目录 Node.js的安装 了解Node.js模块系统 服务器的搭建 一.创建一个Web服务器 注意 程序代码 运行 二.静态资源托管 静态资源 注意 程序代码 运行 三.简单接口的实现(简单服务 ...
最新文章
- [JS]计算字符串中出现最多的字符和其出现次数
- Perl通过WIN32 OLE来操作EXCEL
- ubuntu 13.04 找回丢失的grub2
- win7 重启dns
- 东方通 no suitable default request_【官】海宁鸿翔东方郡璀璨来袭,不容错过!【营销官网】...
- 论文中怎么引用yolo_论文中怎么加入脚注,并且对脚注的序号、位置、格式进行调整...
- 浙江富润拟12亿并购泰一指尚 跨界互联网及大数据
- 深度比较Map的遍历
- python教程简书_python基础教程
- 关于阿里巴巴发布普惠体的一些思考
- python偏最小二乘法公式,python3 偏最小二乘法实现
- android如何虚标内存,答疑 | 手机运存明明是6GB,但实际可用才3.5GB?是虚标还是什么?...
- lens flare:镜头光晕
- jmeter 接口请求出现安全验证解决方案
- C++字母大小写转换方法
- 远程桌面计算机用户名,远程桌面设置及使用
- music-音符与常用记号
- paddle 40 支持任意维度数据的梯度平衡机制GHM Loss的实现(支持ignore_index、class_weight,支持反向传播训练,支持多分类)
- cad高程点怎么抽稀_CAD地形图纸打开后不显示高程点怎么办?
- Mysql事务隔离机制