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

https://images.microbadger.com/badges/image/nbrown/revealjs.svg](https://microbadger.com/images/nbrown/revealjs "Get your own image badge on microbadger.com") https://images.microbadger.com/badges/version/nbrown/revealjs.svg](https://microbadger.com/images/nbrown/revealjs "Get your own version badge on microbadger.com")

什么是reveal.js？

https://github.com/hakimel/reveal.js%E6%98%AF%E4%B8%80%E4%B8%AA%E7%94%A8%E4%BA%8E%E5%88%9B%E5%BB%BAhttps://github.com/hakimel/reveal.js/wiki/Example-Presentations%E7%9A%84%E6%A1%86%E6%9E%B6%E3%80%82%E5%9F%BA%E4%BA%8ENode.js%EF%BC%8C%E5%AE%83%E6%8F%90%E4%BE%9B%E9%AB%98%E5%BA%A6%E5%8F%AF%E5%AE%9A%E5%88%B6%E7%9A%84%E6%BC%94%E7%A4%BA%E4%BD%93%E9%AA%8C%EF%BC%8C%E5%B9%BB%E7%81%AF%E7%89%87%E5%8F%AF%E9%80%9A%E8%BF%87HTML%E5%92%8C/%E6%88%96Markdown%E7%BC%96%E5%86%99%E3%80%82

除了默认提供的多种主题外，演示文稿的行为和外观还可通过https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware%E5%92%8C%E8%BF%90%E8%A1%8C%E6%97%B6https://github.com/hakimel/reveal.js#configuration%E8%BF%9B%E4%B8%80%E6%AD%A5%E8%87%AA%E5%AE%9A%E4%B9%89%E3%80%82

如何使用该镜像

将演示文稿封装到镜像中

当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%EF%BC%89%EF%BC%9A

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%EF%BC%8C%E5%AE%9A%E4%B9%89%E5%A5%BDSass%E4%B8%BB%E9%A2%98%E5%90%8E%EF%BC%8C%E4%BD%BF%E7%94%A8%E6%A0%87%E5%87%86%E9%95%9C%E5%83%8F%E7%BC%96%E8%AF%91%E4%B8%BACSS%EF%BC%9A

$ > 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主题，可在运行时挂载到容器中使用。