前言

最近热衷于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上同步发布。转载请注明来源。


参考文档

基于docker+reveal.js搭建一个属于自己的在线ppt网站的更多相关文章

  1. 使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课

    序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...

  2. 手把手搭建一个属于自己的在线 IDE

    背景 这几个月在公司内做一个跨前端项目之间共享组件/区块的工程,主要思路就是在 Bit 的基础上进行开发.Bit 主要目的是实现不同项目 共享 与 同步 组件/区块,大致思路如下: 在 A 项目中通过 ...

  3. 基于Idea从零搭建一个最简单的vue项目

    一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...

  4. 如何用webgl(three.js)搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  5. 基于Docker的服务器搭建

    -----------基于Docker的多种服务器搭建----------- 开发环境 本机上的虚拟机 Centos7.4 Docker1.13.1 Openssl1.1.1 1 Nginx 1.1 ...

  6. 用Vue.js搭建一个小说阅读网站

    目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用v ...

  7. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  8. 基于Docker和Golang搭建Web服务器

    1 场景描述 基于centos7的docker镜像搭建golang开发环境 在docker容器内,使用golang实现一个Web服务器 启动docker容器,并在容器内启动Web服务器 我购买了一个最 ...

  9. 使用 Node.js 搭建一个 API 网关

    原文地址:Building an API Gateway using Node.js 外部客户端访问微服务架构中的服务时,服务端会对认证和传输有一些常见的要求.API 网关提供共享层来处理服务协议之间 ...

随机推荐

  1. 我常用的grep命令

    查找包含某个字符的行并保存在文件 grep -rn 'test' ./*.sql >test.sql -r 是递归查找 -n 是显示行号 在当前目录下的.sql结尾的文件中查找包含 test 字 ...

  2. HDU 5360 (贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5360 题意:告诉你n个区间[ l[i],r[i] ],然后让你排序,必须左区间不大于它前边的总区间个数 ...

  3. JavaScript:复选框事件的处理

    复选框事件的处理 复选框本身也是多个组件的名字相同.所以在定义复选框的同事依然要使用document.all()取得全部的内容. 范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮 ...

  4. h5-2

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 文件搜索查找功能VC++

    1.搜索指定文件夹下的文件名和路径 #undef UNICODE #include <iostream> #include <string> #include <vect ...

  6. 关于JS的DOM操作——重要实例的操作

    1.复选框与按钮的配合使用的DOM操作 <body>                <input type="checkbox" id="ckb1&qu ...

  7. 2Sum问题

    2Sum问题是3Sum和4Sum的基础,很多OJ都是以此为最简单的练手题的. 题目描述: 从一个数组里找出两个和为target的数. LeetCode上的描述: Given an array of i ...

  8. Vue(八)发送跨域请求

    使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法 使用this.$http ...

  9. 万能poi导入功能模板

    同时支持2007版本和2003版本,空行过滤,纯数字类型数据格式处理,日期格式处理等 package com.yss.db.util; import com.yss.base.common.excep ...

  10. 铁乐学python_Day42_线程-信号量事件条件

    铁乐学python_Day42_线程-信号量事件条件 线程中的信号量 同进程的一样,Semaphore管理一个内置的计数器, 每当调用acquire()时内置计数器-1:调用release() 时内置 ...