初始化

¥Initialization

reveal.js 最常见的用例是制作一个覆盖整个视口的演示文稿。从 4.0 开始，我们还支持在同一页面上并行运行多个演示文稿，以及将库作为 ES 模块引入。

¥The most common reveal.js use case is to have a single presentation which covers the full viewport. As of 4.0 we also support running multiple presentations in parallel on the same page as well as including the library as an ES module.

如果页面上只有一个演示文稿，我们建议使用全局 Reveal 对象初始化 reveal.js。Reveal.initialize 方法接受一个参数；reveal.js 配置对象。

¥If you only have a single presentation on the page we recommend initializing reveal.js using the global Reveal object. The Reveal.initialize method accepts one argument; a reveal.js config object.

<script src="dist/reveal.js"></script>
<script>
  Reveal.initialize({ transition: 'none' });
</script>

initialize 方法返回一个 promise，该 promise 将在演示文稿准备就绪后立即解析，并可通过 API 进行交互。

¥The initialize method returns a promise which will resolve as soon as the presentation is ready and can be interacted with via the API.

Reveal.initialize().then(() => {
  // reveal.js is ready
});

多演示文稿 4.0.0

¥Multiple Presentations 4.0.0

要在同一页面上并排运行多个演示文稿，你可以创建 Reveal 类的实例。Reveal 构造函数接受两个参数；演示文稿的 HTML 根元素 .reveal 和可选的配置对象。

¥To run multiple presentations side-by-side on the same page you can create instances of the Reveal class. The Reveal constructor accepts two arguments; the .reveal HTML element root of the presentation and an optional config object.

请注意，你还需要将 embedded 配置选项设置为 true。此标志使演示文稿根据其 .reveal 根元素大小（而不是浏览器视口）自行调整大小。你还需要为每个 .reveal .deck* 元素手动定义 width 和 height CSS 属性才能看到它们显示。

¥Note that you will also need to set the embedded config option to true. This flag makes the presentations size themselves according to their .reveal root element size, rather than the browser viewport. You will also need to manually define the width and height CSS properties for each .reveal .deck* element in order to see them appear.

默认情况下，reveal.js 将捕获文档中的所有键盘事件。对于嵌入式演示文稿，我们建议使用 keyboardCondition: 'focused' 进行初始化，以便仅在观众聚焦演示文稿时捕获键盘事件。

¥By default reveal.js will capture all keyboard events in the document. For embedded presentations we recommend initializing with keyboardCondition: 'focused' so that keyboard events are only captured when the presentation has been focused by the viewer.

<div class="reveal deck1">...</div>
<div class="reveal deck2">...</div>

<script src="dist/reveal.js"></script>
<script>
  let deck1 = new Reveal(document.querySelector('.deck1'), {
    embedded: true,
    keyboardCondition: 'focused', // only react to keys when focused
  });
  deck1.initialize();

  let deck2 = new Reveal(document.querySelector('.deck2'), {
    embedded: true,
  });
  deck2.initialize();
</script>

ES 模块 4.0.0

¥ES Module 4.0.0

我们根据你的使用情况提供两个 JavaScript 包。我们默认的演示样板使用 dist/reveal.js，它具有广泛的跨浏览器支持（ES5），并将 Reveal 暴露给全局窗口（UMD）。

¥We provide two JavaScript bundles depending your use case. Our default presentation boilerplate uses dist/reveal.js which has broad cross browser support (ES5) and exposes Reveal to the global window (UMD).

第二个软件包是 dist/reveal.esm.js，它允许将 reveal.js 作为 ES 模块导入。此版本可以直接在浏览器中与 <script type="module"> 一起使用，也可以打包在你自己的构建过程中使用。

¥The second bundle is dist/reveal.esm.js which makes it possible to import reveal.js as an ES module. This version can be used either directly in the browser with <script type="module"> or bundled in your own build process.

以下是如何导入和初始化 reveal.js 的 ES 模块版本以及 Markdown 插件：

¥Here's how to import and initialize the ES module version of reveal.js as well as the Markdown plugin:

<script type="module">
  import Reveal from 'dist/reveal.esm.js';
  import Markdown from 'plugin/markdown/markdown.esm.js';
  Reveal.initialize({
    plugins: [Markdown],
  });
</script>

如果你使用的是从 npm 安装 reveal.js 并将其打包，则可以使用：

¥If you're installing reveal.js from npm and bundling it you should be able to use:

import Reveal from 'reveal.js';
Reveal.initialize();

正在取消初始化 reveal.js 4.3.0

¥Uninitializing reveal.js 4.3.0

如果你想取消初始化 reveal.js，你可以使用 destroy API 方法。这将撤消框架对 DOM 所做的所有更改，移除所有事件监听器并取消注册/销毁所有插件。

¥If you want to uninitialize reveal.js you can use the destroy API method. This will undo all changes that the framework has made to the DOM, remove all event listeners and unregister/destroy all plugins.

Reveal.destroy();