标记

以下是 reveal.js 完整演示文稿的裸骨示例

<html>
  <head>
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/white.css" />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

演示文稿标记层级需要为 .reveal > .slides > section，其中 section 元素表示一张幻灯片，可以无限重复。

如果你将多个 section 元素放置在另一个 section 内，它们将显示为垂直幻灯片。垂直幻灯片的第一个是其他幻灯片（在顶部）的“根”，并且将包含在水平序列中。例如：

<div class="reveal">
  <div class="slides">
    <section>Horizontal Slide</section>
    <section>
      <section>Vertical Slide 1</section>
      <section>Vertical Slide 2</section>
    </section>
  </div>
</div>

水平幻灯片

垂直幻灯片 1

垂直幻灯片 2

还可以使用 Markdown 编写演示文稿。

视口

reveal.js 视口是 DOM 元素包装器，决定了你的演示在网页上的尺寸。默认情况下，这将是 body 元素。如果你在同一页面上包含多个演示文稿，每个演示文稿 .reveal 元素都将充当它们的视口。

视口总是会装饰有 reveal-viewport 类，reveal.js 已初始化。

幻灯片状态

如果你在幻灯片 <section> 上设置 data-state="make-it-pop"，“make-it-pop”将在打开该幻灯片时作为类应用于视口元素。这允许你根据活动幻灯片对页面应用广泛的样式更改。

<section data-state="make-it-pop"></section>

/* CSS */
.make-it-pop {
  filter: drop-shadow(0 0 10px purple);
}

你还可以通过 JavaScript 监听这些状态更改

Reveal.on('make-it-pop', () => {
  console.log('✨');
});