演讲者备注

相关源文件

• plugin/notes/notes.esm.js
• plugin/notes/notes.js
• plugin/notes/plugin.js
• plugin/notes/speaker-view.html

本文档说明了如何在 reveal.js 演示文稿中使用和实现演讲者备注。演讲者备注为演示者提供私密信息，这些信息在演示过程中仅对他们可见，包括演讲提示、计时信息和即将到来的幻灯片预览。

目的与范围

本页面涵盖

• 如何通过不同方法为幻灯片添加演讲者备注
• 如何使用演讲者备注界面
• 演讲者备注系统的技术架构
• 演讲者备注插件的实现细节

有关其他演示文稿控件的信息，请参阅 导航。

为您的演示文稿添加演讲者备注

有几种方法可以将演讲者备注添加到 reveal.js 幻灯片中，所有这些备注都只在演讲者视图中可见。

方法一：使用 HTML <aside> 元素

添加演讲者备注最常见的方法是使用带有 notes 类的 <aside> 元素

来源：plugin/notes/plugin.js149-156

方法二：使用 data-notes 属性

您也可以通过幻灯片 section 上的 data-notes 属性添加备注

来源：plugin/notes/plugin.js124-127

方法三：为片段添加备注

您可以为特定片段附加备注，当该片段处于活动状态时，它将覆盖幻灯片备注

来源：plugin/notes/plugin.js130-145

Markdown 支持

您可以通过在备注元素上添加 data-markdown 属性来在备注中使用 Markdown

来源：plugin/notes/plugin.js134-135 plugin/notes/plugin.js155-156

使用演讲者备注界面

打开演讲者视图

要打开演讲者备注窗口，请在演示过程中按 S 键。这将打开一个新窗口，其中包含：

• 当前幻灯片（观众看到的）
• 下一张幻灯片
• 您的演讲者备注
• 计时器和时钟

来源：plugin/notes/plugin.js258-260

演讲者备注布局

演讲者备注窗口提供四种布局选项

布局	描述
默认	当前幻灯片在左侧，下一张幻灯片和备注在右侧
宽屏	当前和下一张幻灯片并排显示在顶部，备注显示在下方
纵向	当前幻灯片显示在左上方，下一张幻灯片显示在其下方，备注显示在右侧
仅显示备注	隐藏幻灯片，仅显示备注部分

来源：plugin/notes/speaker-view.html218-284

计时器和时钟功能

演讲者备注视图包含

• 显示当前时间的时钟
• 显示已用演示时间的计时器
• 显示当前幻灯片剩余时间的节奏指示器（如果提供了幻灯片计时数据）

您可以通过在幻灯片上添加 data-timing 属性来设置预期的幻灯片时长（以秒为单位）

来源：plugin/notes/speaker-view.html595-640 plugin/notes/speaker-view.html662-783

演讲者备注架构

技术概述

演讲者备注系统由两个主要组件组成

1. 运行在主演示窗口中的备注插件
2. 显示备注和幻灯片预览的演讲者视图窗口

这些组件使用 postMessage API 进行通信以保持同步。

来源：plugin/notes/plugin.js16-271

演讲者备注数据流

下图说明了演讲者备注如何从幻灯片流向演讲者视图

来源：plugin/notes/plugin.js108-158 plugin/notes/speaker-view.html486-514

窗口通信

下图显示了演示窗口和演讲者窗口之间的通信流程

来源：plugin/notes/plugin.js76-86 plugin/notes/plugin.js202-220 plugin/notes/speaker-view.html587-592

演讲者视图组件

演讲者视图窗口由几个关键组件组成

来源：plugin/notes/speaker-view.html16-302

实现细节

插件架构

演讲者备注插件遵循标准的 reveal.js 插件架构，包括初始化和事件处理。

来源：plugin/notes/plugin.js16-269

备注提取逻辑

当幻灯片切换时，插件将根据以下优先级逻辑提取备注

1. 如果活动片段有备注（通过 <aside> 或 data-notes），则使用这些备注
2. 否则，如果幻灯片有备注（通过 <aside> 或 data-notes），则使用这些备注
3. 否则，不显示任何备注

插件还会检查 markdown 格式，以便正确渲染格式化的备注。

来源：plugin/notes/plugin.js108-158 plugin/notes/speaker-view.html492-505

安全考量

演讲者备注插件包含安全功能，可防止跨源攻击

1. 仅当演讲者窗口的打开者具有相同的源时，演讲者窗口才会运行
2. 消息事件经过验证，以确保它们来自预期的源
3. XSS 防护功能于 2022 年 12 月添加，作为一项安全措施

来源：plugin/notes/plugin.js166-195 plugin/notes/speaker-view.html373-378 plugin/notes/speaker-view.html386-391

技巧和最佳实践

1. 保持备注简洁：使其易于在演示过程中快速浏览
2. 使用键盘快捷键：在开始演示之前按 'S' 键打开演讲者视图
3. 测试您的设置：在演示前务必在演示计算机上测试演讲者备注
4. 准备备用计划：以防万一出现技术问题，请准备好在没有备注的情况下进行演示
5. 使用带有备注的片段：对于复杂的幻灯片，请为每个要点使用带有特定备注的片段
6. 利用各种布局：尝试不同的演讲者视图布局，找到最适合您的方式

来源： plugin/notes/plugin.js258-260 plugin/notes/speaker-view.html357-362