本页面将引导您完成使用 reveal.js 创建演示文稿的过程，重点关注构建有效幻灯片放映所需的基本结构、内容组织和基本配置。有关核心架构和 API 详细信息，请参阅核心架构。有关样式和主题选项，请参阅样式和主题。
创建 reveal.js 演示文稿需要特定的 HTML 结构。其核心是一个带有 .reveal 类的容器元素和一个带有 .slides 类的内部容器，后者包含单个幻灯片元素。
来源： index.html16-23 demo.html25-31
Reveal.js 提供两种幻灯片导航方式
要创建水平幻灯片，请将 <section> 元素作为 .slides 容器的直接子项添加
要创建垂直幻灯片，请将 <section> 元素嵌套在父 <section> 中
来源： demo.html48-71 js/reveal.js1251-1267
幻灯片可以包含任何 HTML 内容，包括标题、段落、列表、图像等。内容结构遵循标准的 HTML 约定。
在使用 highlight.js 插件时，代码块可以显示语法高亮
来源： demo.html87-101 demo.html343-359
您可以使用 data-transition 属性指定幻灯片之间的过渡
背景颜色、图像、视频或 iframe 可以使用数据属性进行设置
来源： demo.html253-264 demo.html285-317 js/reveal.js491-497
片段（Fragments）允许您逐步展示幻灯片内的内容
自动动画（Auto-Animation）通过动画匹配的元素，实现幻灯片之间的平滑过渡
来源： demo.html224-250 demo.html149-173 js/reveal.js1436-1441
下图说明了演示文稿的 HTML 结构如何映射到 reveal.js 的内部组件
来源： js/reveal.js108-126 js/reveal.js140-143
来源： js/reveal.js131-168 js/reveal.js195-248
以下是初始化 reveal.js 时一些常用的配置选项
| 选项 | 默认 | 描述 |
|---|---|---|
controls | true | 显示演示文稿的控制箭头 |
progress | true | 显示演示文稿进度条 |
center | true | 垂直居中幻灯片 |
hash | false | 通过 URL 哈希值启用幻灯片导航 |
transition | 'slide' | 幻灯片之间的过渡样式 |
transitionSpeed | 'default' | 过渡速度（'default'、'fast'、'slow'） |
slideNumber | false | 显示幻灯片编号 |
overview | true | 启用幻灯片概览模式 |
autoSlide | 0 | 自动幻灯片间隔（毫秒）（0 表示禁用） |
loop | false | 循环播放演示文稿 |
rtl | false | 将幻灯片方向更改为从右到左 |
navigationMode | 'default' | 幻灯片导航模式（'default'、'linear'、'grid'） |
shuffle | false | 随机化幻灯片顺序 |
showNotes | false | 显示演讲者备注 |
autoPlayMedia | null | 自动播放媒体元素 |
plugins | [] | 要加载的插件数组 |
配置示例
来源： index.html32-36 demo.html487-494 js/reveal.js52-126 js/reveal.js477-551
您可以使用 data-visibility 属性将幻灯片从演示文稿中隐藏，同时将其保留在 HTML 中
默认情况下，隐藏的幻灯片会从演示文稿中移除，但可以通过将 showHiddenSlides 配置选项设置为 true 来启用它们。
来源： demo.html80-85 js/reveal.js298-316
演讲者备注可以添加到幻灯片中，使用带有 notes 类的 <aside> 元素
在演示过程中按下“S”键即可查看演讲者备注。
来源：demo.html410-417 js/reveal.js19 js/reveal.js126
Reveal.js 的功能可以通过插件进行扩展。常用的插件包括
插件在初始化时指定
确保在初始化之前包含必要的插件脚本
来源：index.html24-27 index.html32-36 demo.html477-483 demo.html487-494 js/reveal.js164-165
当你用 Reveal.initialize() 初始化演示文稿时，会发生以下过程
来源：js/reveal.js131-168 js/reveal.js195-248 js/reveal.js107-126
此结构为使用 reveal.js 创建强大且交互式的演示文稿奠定了基础。有关更高级的功能和详细的 API 信息，请参阅 Main Reveal.js API。