标记

¥Markup

以下是一个可以完全运行的 reveal.js 演示文稿的简单示例：

¥Here's a barebones example of a fully working reveal.js presentation:

<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 元素代表一张幻灯片，并且可以无限重复。

¥The presentation markup hierarchy needs to be .reveal > .slides > section where the section element represents one slide and can be repeated indefinitely.

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

¥If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example:

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

Horizontal Slide

Vertical Slide 1

Vertical Slide 2

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

¥It's also possible to write presentations using Markdown.

视口

¥Viewport

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

¥The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the body element. If you're including multiple presentations on the same page each presentations .reveal element will act as their viewport.

视口始终使用 reveal-viewport 类 reveal.js 进行装饰，并初始化。

¥The viewport is always decorated with a reveal-viewport class reveal.js is initialized.

幻灯片状态

¥Slide States

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

¥If you set data-state="make-it-pop" on a slide <section>, "make-it-pop" will be applied as a class on the viewport element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

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

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

你还可以通过 JavaScript 监听这些状态变化：

¥You can also listen to these changes in state via JavaScript:

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