nbrown/revealjs

Tags及对应Dockerfile链接

• https://github.com/nbrownuk/docker-revealjs/blob/3.5.0/alpine/Dockerfile
• https://github.com/nbrownuk/docker-revealjs/blob/3.5.0/onbuild/Dockerfile
• https://github.com/nbrownuk/docker-revealjs/blob/3.5.0/Dockerfile

什么是reveal.js？

https://github.com/hakimel/reveal.js是一个用于创建https://github.com/hakimel/reveal.js/wiki/Example-Presentations的框架。基于Node.js，它提供高度可定制的演示体验，幻灯片可通过HTML和/或Markdown编写。

除了默认提供的多种主题外，演示文稿的行为和外观还可通过https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware和运行时https://github.com/hakimel/reveal.js#configuration进一步自定义。

如何使用该镜像

将演示文稿封装到镜像中

当reveal.js演示文稿编写完成后，可将其封装到Docker镜像中，便于存储和分享——演示文稿可作为Docker镜像从 registry 拉取，内容已内置其中。

要封装演示文稿，需使用onbuild变体。创建一个仅包含以下指令的Dockerfile：

FROM docker.xuanyuan.run/nbrown/revealjs:3.5.0-onbuild

并确保构建上下文包含以下文件/目录：

index.html    // 演示文稿的基础文件
md/           // 包含Markdown格式幻灯片的目录（如需）
media/        // 包含演示文稿所用媒体的目录（如需）

media目录可存放视频或图片文件，引用时使用相对路径即可，例如：

<img src="media/UTS_Namespace.svg" alt="UTS Namespace" />

此外，构建上下文还需包含以下目录以支持自定义（详见https://github.com/hakimel/reveal.js#folder-structure）：

css/
js/
plugin/
lib/

并非所有演示文稿都需要这些目录中的内容，但由于Docker目前没有条件COPY或ADD指令，上述目录必须存在于构建上下文（即使为空），否则构建会失败。

要构建封装演示文稿的镜像并运行：

$ docker build -t my_presentation .
$ docker run -it --rm -p 8000:8000 my_presentation

演示文稿封装到镜像后，配置看似固定，但onbuild镜像包含的入口脚本支持运行时配置。例如，要将手动翻页的演示文稿改为自动播放：

$ docker run -it --rm -p 8000:8000 my_presentation --loop=true --autoSlide=5000 --autoSlideStoppable=true

入口脚本会在运行时更新index.html以应用所选配置。要查看可用的运行时配置选项：

$ docker run --rm my_presentation --help

开发演示文稿

用reveal.js开发HTML演示文稿是一个迭代过程，需实时查看更改。使用标准镜像版本，将主机上的演示文稿内容挂载到容器中，无需每次更改都重新构建镜像。

运行标准镜像且不挂载内容时，会显示默认的reveal.js演示文稿：

$ docker run -it --rm -p 8000:8000 nbrown/revealjs

若当前目录包含演示文稿内容，可通过以下命令启动：

$ docker run -it --rm -p 8000:8000 -v $PWD/index.html:/reveal.js/index.html \
-v $PWD/media:/reveal.js/media -v $PWD/custom.css:/reveal.js/css/theme/custom.css \
-v $PWD/menu:/reveal.js/plugin/menu nbrown/revealjs

index.html的更改会被监控，保存后服务器会自动重载，刷新浏览器即可看到更改效果，无需重启容器。

该镜像还可用于创建reveal.js主题。主题通过https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md#creating-a-theme，定义好Sass主题后，使用标准镜像编译为CSS：

$ > custom.css
$ docker run -it --rm -v $PWD/custom.css:/reveal.js/css/themes/custom.css \
-v $PWD/custom.scss:/reveal.js/css/themes/source/custom.scss nbrown/revealjs \
grunt css-themes

custom.css会包含编译后的CSS主题，可在运行时挂载到容器中使用。