高级特性

相关源文件

• js/controllers/notes.js
• js/controllers/scrollview.js
• js/controllers/slidenumber.js
• js/reveal.js
• js/utils/constants.js

本文探讨了 reveal.js 提供的扩展其核心功能的高级功能。这些功能通过专门的视图模式、导航选项和演示工具来增强演示文稿，从而实现更具交互性和灵活性的演示。

有关基本演示文稿创建的信息，请参阅 创建演示文稿。有关插件特定功能的信息，请参阅 插件系统。

高级功能概述

Reveal.js 包含几项高级功能，超出了基本的幻灯片演示功能

1. 滚动视图模式 - 将演示文稿转换为线性可滚动文档
2. 概览模式 - 提供所有幻灯片作为缩略图的鸟瞰图
3. URL 导航 - 通过 URL 哈希实现直接导航到幻灯片
4. 讲者备注 - 提供对观众隐藏的备注演示者工具
5. Iframe 集成 - 允许在幻灯片中嵌入外部内容

功能关系图

来源： js/reveal.js113-116 js/reveal.js125-126 js/controllers/scrollview.js9-13

滚动视图模式

滚动视图模式将 reveal.js 演示文稿转换为线性、垂直滚动的文档。此模式特别适用于内容消费而非演示，允许用户将幻灯片作为连续文档进行阅读。

激活和配置

可以通过几种方式激活滚动视图

1. 配置选项：在 reveal.js 初始化中将 view: 'scroll' 设置为
2. 响应式激活：定义 scrollActivationWidth 以在窄屏上自动切换到滚动视图
3. API 方法：使用 Reveal.toggleScrollView() 以编程方式切换模式

滚动视图架构

来源： js/controllers/scrollview.js13-922 js/reveal.js256-286

滚动视图如何工作

激活后，滚动视图控制器

1. 保留当前演示文稿状态
2. 通过以下方式重构 DOM：
   • 为每个幻灯片创建页面元素
   • 对自动动画幻灯片进行分组
   • 设置背景
3. 创建滚动触发器来控制幻灯片和片段的可见性
4. 添加进度条以进行导航
5. 恢复任何先前的滚动位置

滚动行为由滚动触发器控制，这些触发器会在用户滚动浏览演示文稿时激活和停用内容。

来源： js/controllers/scrollview.js30-156 js/controllers/scrollview.js207-222

滚动视图中的关键组件

组件	目的
滚动页面	包装单个幻灯片的容器元素
滚动触发器	在用户滚动时激活/停用内容的控制点
进度条	位置的视觉指示器，具有交互式导航
自动动画页面	自动动画幻灯片的特殊处理

来源： js/controllers/scrollview.js61-104 js/controllers/scrollview.js207-222 js/controllers/scrollview.js463-496

概览模式

概览模式提供演示文稿中所有幻灯片的鸟瞰图，将它们显示为可点击导航的缩略图。

激活和行为

可以通过以下方式激活概览模式

• 按 ESC 或 O 键（默认键盘快捷键）
• 通过编程方式调用 Reveal.toggleOverview() 方法

激活后，所有幻灯片都会缩小并排列成网格，让演示者或观众一次性看到整个演示文稿结构。

来源： js/reveal.js116

URL 导航

Reveal.js 内置支持 URL 哈希导航，可直接链接到特定幻灯片。

哈希格式

URL 哈希遵循可预测的格式，反映幻灯片的水平和垂直索引

#/<horizontal-index>/<vertical-index>/<fragment-index>

例如

• #/2/3 导航到水平索引为 2、垂直索引为 3 的幻灯片
• #/4 导航到水平索引为 4 的幻灯片（无垂直幻灯片）
• #/2/3/1 导航到水平索引为 2、垂直索引为 3 的幻灯片，显示第一个片段

实现

URL 哈希由 Location 控制器管理，该控制器

1. 当前幻灯片更改时更新 URL
2. 页面加载时根据 URL 导航到相应的幻灯片
3. 响应哈希更改以导航到相应的幻灯片

来源： js/reveal.js118

演讲者备注

讲者备注提供了一种方式，让演示者可以添加仅在演示过程中对他们可见的备注。

添加讲者备注

可以通过以下两种方式为幻灯片添加讲者备注

1. 使用幻灯片元素上的 data-notes 属性

2. 使用幻灯片中的 <aside class="notes"> 元素

讲者备注架构

来源： js/controllers/notes.js4-126

讲者备注配置

讲者备注可以在主窗口或单独的讲者视图中显示

备注控制器会检查是否应显示备注，并相应地更新备注元素。update() 方法会在当前幻灯片更改时被调用，以显示当前幻灯片的相应备注。

来源： js/controllers/notes.js39-47 js/controllers/notes.js103-117

幻灯片编号

幻灯片编号为观众和演示者提供视觉参考。Reveal.js 提供灵活的幻灯片编号显示配置选项。

幻灯片编号格式

幻灯片编号系统支持各种格式

格式	描述	示例
h.v	水平点垂直	2.3
h/v	水平斜杠垂直	2/3
c	扁平化幻灯片编号	5
c/t	当前/总数	5/20

来源： js/controllers/slidenumber.js11-139 js/utils/constants.js13-17

Iframe 集成

Reveal.js 为幻灯片中的 iframe 元素提供特殊处理，允许无缝集成外部内容。

iframe 的最佳实践

• 使用 data-preload 属性在 iframe 可见前预加载它们
• 使用 data-src 而非 src 来延迟加载，直到幻灯片显示
• 使用 data-prevent-swipe 来防止在与 iframe 内容交互时触摸手势会导航幻灯片

当包含 iframe 的幻灯片激活时，reveal.js 会自动

1. 如果使用 data-src，则加载 iframe 内容
2. 如果配置了，则聚焦 iframe 以进行键盘交互
3. 妥善处理可见性和加载状态

高级配置选项

Reveal.js 为自定义高级功能提供了许多配置选项

选项	描述	默认
view（视图）	设置为 'scroll' 以实现滚动视图模式	null
scrollActivationWidth	激活滚动视图的宽度阈值	null
scrollLayout	滚动视图的布局模式（'default' 或 'compact'）	'default'
scrollSnap	滚动视图的 CSS scroll-snap 行为	'mandatory'
scrollProgress	滚动视图中的进度条（'auto'、true、false）	'auto'
showNotes	显示讲者备注（true、false、'separate-page'）	false
showSlideNumber	显示幻灯片编号（'all'、'speaker'、'print'）	null
postMessageEvents	启用跨窗口 postMessage API	false
disableLayout	禁用所有自动布局	false

来源： js/reveal.js477-551

高级控制机制

PostMessage API

Reveal.js 包含一个 PostMessage API，允许外部窗口或框架控制演示文稿

这对于以下方面特别有用：

• 创建自定义演示控制器
• 构建伴随应用程序
• 控制嵌入到 iframe 中的演示文稿

postMessage 处理程序在 setupPostMessage() 方法中设置，并允许外部应用程序远程调用几乎任何 Reveal.js API 方法。

来源： js/reveal.js463-469 js/utils/constants.js7-8

全屏模式

Reveal.js 支持进入全屏模式以获得更具沉浸感的演示

演示文稿在进入或退出全屏模式时会自动调整其布局。

来源： js/reveal.js446-451

总结

reveal.js 的高级功能为特定的演示需求提供了增强的功能。从滚动视图和概览模式等替代视图模式到讲者备注等演示者工具，这些功能极大地扩展了核心演示系统功能。

理解这些高级功能使演示者能够创建更具动态性和灵活性的演示文稿，以适应不同的观看环境和演示风格。