作者体验基于 JavaScript 的开源演示框架 reveal.js

发布于：2022-05-05 10:00:00，作者：Neil Brown 我一直想试试 reveal.js，用它来改善我演示幻灯片的外观，现在终于腾出时间来做这件事了。 自从完全切换到 Linux，并且实在不喜欢 LibreOffice 套件里的演示工具 Impress 之后，我就一直用 markdown 写演示文稿，然后用 pandoc 转换成 beamer，再转成 PDF。 我喜欢用 markdown 写内容的简洁性，因为这样我可以专注于幻灯片里要放什么，而不是排版——排版交给模板处理。 但是——至少对我来说——在 pandoc/beamer 里把模板调对，比我希望的要费劲得多。我不得不接受一堆妥协，幻灯片虽然还凑合，但并不是我想要的效果。 reveal.js 用的是类似的思路：写你的幻灯片内容，然后用模板控制幻灯片的渲染。 幸运的是，reveal.js 用的是 html、css 和 JavaScript，我调整这些来实现自己想要的效果，比用 pandoc 容易得多。从下载基础文件到调出一个我想要的主题，只花了大约 10 分钟。 这是一个开源项目，不需要你把幻灯片托管在别人的系统上。事实上，我一直用的是 Basic 配置；虽然官方“推荐”Advanced 配置（跑一个本地 webserver），但我还没发现有什么缺失的功能。文档说外部 markdown 内容需要 Advanced 配置；而我就是用 markdown 写内容（在 Apostrophe 里写），然后粘贴到 reveal.js 的 index 文件里，这样用着完全没问题。 我花了一个晚上读文档——这时间花得值——并尝试了各种功能，很快就做出了对我的需求来说足够好看的演示文稿，而且几乎没费什么力气。 我买了视频课程，算是支持开发者，等我有几个小时空闲的时候很期待去看。（把工具用好是值得的，恕我直言，尤其是我就靠它们吃饭。） 视频、图片、花哨的背景、漂亮的转场——这些都支持，不过显然我会克制着用。我希望幻灯片是我讲话的背景，而不是主角。 它还有一个我用 PDF 那套方案时非常想念的功能：演讲者视图！我喜欢能看到下一张幻灯片/下一个动画步骤是什么，这对我做演示有帮助；能看时钟来掌握时间，也很令人满意。 （我听起来是不是有点脑残粉？大概吧，而且名副其实……） 因为它是基于 html/css/js 的，这意味着我可以把（公开的）演示文稿上传到我的 webserver，人们可以和它交互，像我自己在讲一样点击翻页。不再依赖静态 PDF 下载（虽然那些也能轻松生成），不过它确实要求启用 JavaScript。我在线放了一个示例演示文稿，你可以看看我的意思。很妙吧？！（如果你通过 Tor Browser 访问这个站点，会被自动重定向到站点的 .onion 版本，幻灯片会在 Tor 内提供。） 不利的一面是，我想用的一些功能确实需要我从 markdown 切换到 html——比如用 fragments 来“分步构建”幻灯片，这还挺常见的——但这事我能应付，而且我会用 espanso 来自动化。 更新：这已经过时了。原来我需要用比 Debian stable 里更新的 Firefox 版本。用了那个之后，我就不需要 Brave 了。 我的主力浏览器是 Firefox。我用了很多很多年，我喜欢它。 遗憾的是，它渲染 reveal.js 幻灯片的效果不好。转场有明显延迟，整体体验不好。 我最近几个月一直在用 Brave，在浏览器里跑 Microsoft Teams。一时兴起，我在 Brave 里打开了一个自己的 reveal.js 演示文稿，天哪，效果真好。完全没有延迟，一切都流畅得多。 说实话，我确实在想自己还会用 Firefox 多久；我觉得转向 Brave 是很有可能的事。 我还需要解决的一件事是：当我在 Teams（也许还有其他？）电话会议上共享 Brave 标签页时，如何在 Brave 里运行 reveal.js 演示文稿。通常，我就在 Brave 里加载幻灯片，按“F”进入全屏，然后就开始讲。但是，当我通过 Teams 共享标签页时，屏幕顶部会出现一条警告消息，提醒我正在共享标签页，这让我无法进入全屏模式。我猜这个问题是有解决办法的，但我还不知道是什么。