高级幻灯片操作

2014年11月13日 by David Farrell

在六月份，我写了一个概述，介绍了App::revealup，这是一个Perl应用程序，它允许使用markdown驱动的演示文稿，并使用reveal.js。今天我想分享一些我认为有用但并非总是直观的高级特性，这些特性在使用reveal.js和markdown时并不总是显而易见。

演讲者备注

演讲者备注屏幕是reveal.js的“杀手级特性”之一。它是一个独立的浏览器窗口，显示当前幻灯片、下一张幻灯片、演讲者备注以及到目前为止经过的时间（示例）。您甚至可以控制从演讲者备注屏幕切换幻灯片，这样您就可以在大屏幕上分享演示文稿，同时从笔记本电脑上的演讲者备注屏幕来控制演示。要在演示文稿中的幻灯片上添加演讲者备注，请使用Note:语法

# This is my title #

Note:
This is the title slide for the presentation.

现在，如果我启动这个演示文稿，我可以按s键查看演讲者备注。

幻灯片切换

默认的幻灯片切换效果很可爱，但一段时间后可能会有些乏味。好消息是reveal.js提供了对幻灯片切换的精细控制，坏消息是语法丑陋得要命。您必须在markdown中包含作为HTML注释的幻灯片切换命令

<!-- .slide: data-transition="none" -->
# This is my title #

Note:
This is the title slide for the presentation.

这个markdown的第一行指示reveal.js使用“none”作为幻灯片切换样式（您可以选择默认/cube/page/concave/zoom/linear/fade）。其余的markdown与之前相同。虽然很高兴在幻灯片级别拥有这种控制，但一个缺点是您必须在每张不希望使用默认切换效果的幻灯片上包含幻灯片切换指令。

另一个选项是使用App::revealup的transition命令行选项

$ revealup server slides.md --port 5000 --transition zoom

这将应用切换样式到整个演示文稿。这个选项的好处是您可以使用上面描述的行内符号覆盖切换样式。所以，在命令行选项中选择基本切换样式，然后用行内语法对特定幻灯片进行定制。

片段

片段是可以在幻灯片上按顺序引入的幻灯片元素。我经常使用它们来保持观众的注意力在我当前谈论的项目上。这张幻灯片展示了一个相当无争议的观点

I <!-- .element: class="fragment" data-fragment-index="1" --> 

 ❤ <!-- .element: class="fragment" data-fragment-index="2" --> 

Perl<!-- .element: class="fragment" data-fragment-index="3" -->

与幻灯片切换类似，片段由HTML注释驱动。在这种情况下，当幻灯片第一次加载时，它将是空的，点击三次会逐渐显示“我喜欢Perl”。

背景

按b键将您的演示文稿淡至黑色，并吸引观众的全部注意力。再次按b键将演示文稿恢复。很简单！

样式

与幻灯片切换一样，我发现reveal.js默认主题的新奇感很快就会消失。好消息是您可以为您的演示文稿定义自己的CSS以获得适合您自己的样式。不要从一张白纸开始！App::revealup附带所有标准主题，所以选择其中一个并编辑它以满足您的需求。通过在命令行中加载它来测试您的新主题

$ revealup server presentation.md --port 5000 --theme /path/to/theme.css

您还可以使用自定义CSS为您的组织开发“house-style”。这可以帮助鼓励人们放弃那些糟糕的股票PowerPoint模板。

另存为PDF

演示文稿可以保存为PDF格式，但您必须使用Google Chrome才能实现此功能。有逐步说明，但有一件事对我来说并不清楚：如果您正在本地运行http://localhost:5000的演示文稿，您应该在URL后附加“?print-pdf”，使其变为http://localhost:5000?print-pdf。然后reveal.js将加载演示文稿，准备好保存为PDF。