搜索插件

概述

搜索插件通过一个简单的搜索框界面使用户能够在 reveal.js 演示文稿中搜索文本。当执行搜索时，插件会

高亮显示演示文稿中搜索词的所有出现位置
自动导航到包含匹配项的幻灯片
允许使用重复搜索在匹配的幻灯片之间导航

该插件默认通过 Ctrl+Shift+F 键盘快捷键触发。

来源： plugin/search/plugin.js8-243

架构

搜索插件与 reveal.js 核心集成，为整个演示文稿提供搜索功能

搜索插件包含两个主要组件

搜索 UI - 处理搜索输入的图形用户界面
Hilitor 引擎 - 执行实际的文本搜索和高亮

来源： plugin/search/plugin.js8-243

关键组件

搜索 UI

搜索 UI 是一个简单的界面，由一个搜索框组成，在激活时出现在演示文稿的右上角。

搜索 UI 是动态创建的，并在需要时附加到 reveal.js 容器。它的样式旨在不显眼但易于访问。

来源： plugin/search/plugin.js22-66 plugin/search/plugin.js69-93

Hilitor 引擎

Hilitor 引擎（源自“highlighter”）负责

查找幻灯片中的文本匹配项
高亮显示匹配的文本
跟踪包含匹配项的幻灯片

Hilitor 引擎最初由 Chirp Internet 开发（www.chirp.com.au），但为用于搜索插件进行了修改。

来源： plugin/search/plugin.js127-217

搜索过程流程

下图说明了从激活到显示结果的搜索过程流程

搜索过程包含以下关键步骤

用户通过 Ctrl+Shift+F 激活搜索框
用户输入搜索词并按 Enter
插件创建一个新的 Hilitor 实例
Hilitor 引擎扫描所有幻灯片内容以查找匹配项
匹配项以彩色背景高亮显示
插件导航到第一个包含匹配项的幻灯片
再次按 Enter 导航到下一个匹配项

来源： plugin/search/plugin.js95-122 plugin/search/plugin.js209-216

高亮机制

Hilitor 引擎通过递归 DOM 遍历过程应用高亮

高亮过程

递归遍历 DOM，检查每个文本节点
找到匹配项时，确定哪个幻灯片包含匹配项
跟踪包含匹配项的幻灯片
创建一个高亮元素（默认：<em>）来包装匹配的文本
为高亮设置背景颜色
拆分文本节点并插入高亮元素

来源： plugin/search/plugin.js149-196

插件 API

搜索插件通过简单的 API 提供与 reveal.js 的集成

方法	描述
`init(reveal)`	使用 reveal.js 实例初始化插件
`open()`	打开搜索框
`close()`	关闭搜索框并移除高亮
`toggle()`	切换搜索框的可见性

在插件注册后，可以通过 reveal.js 插件 API 访问这些方法。

来源： plugin/search/plugin.js220-240

与 reveal.js 集成

搜索插件通过插件系统与 reveal.js 集成。它注册键盘快捷方式，并提供匹配内容幻灯片之间的导航。

插件使用以下 reveal.js 方法

registerKeyboardShortcut() - 用于注册 Ctrl+Shift+F 快捷键
getIndices() - 用于确定包含匹配项的幻灯片的索引
slide() - 用于导航到包含匹配项的幻灯片

来源： plugin/search/plugin.js224-235

用途

要在 reveal.js 演示文稿中使用搜索插件，请按以下方式包含并初始化它

在演示文稿 HTML 中包含插件脚本
使用您的 reveal.js 实例进行初始化
在演示过程中使用 Ctrl+Shift+F 激活搜索框

插件会自动处理高亮显示和匹配结果之间的导航。

搜索行为注意事项

搜索默认不区分大小写
插件高亮显示所有幻灯片中搜索词的所有出现位置
反复按 Enter 将循环浏览所有包含匹配项的幻灯片
当到达最后一个匹配项时，下一个 Enter 将循环回到第一个匹配项
可以通过修改输入并再次按 Enter 来随时更改搜索词
清空搜索输入并按 Enter 将移除所有高亮显示

来源： plugin/search/plugin.js95-122