在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

hakimel/reveal.js

菜单

主要功能

相关源文件

本页面概述了 reveal.js 的主要特性和功能，解释了可用的功能以及这些功能在代码库中的组织方式。有关如何在演示文稿中使用这些功能的详细说明，请参阅 创建演示文稿。

reveal.js 特性概述

reveal.js 是一个 HTML 演示文稿框架，支持创建具有广泛功能的交互式幻灯片。这些功能通过控制器和插件的模块化架构来实现。

来源: README.md10-12 js/reveal.js5-19 demo.html12-463

核心演示特性

幻灯片系统

reveal.js 的基础是其强大的幻灯片系统，支持

  • 水平导航：按顺序浏览幻灯片
  • 垂直堆叠：创建垂直导航的嵌套幻灯片
  • 数据属性：使用数据属性自定义单个幻灯片
  • 状态管理：跟踪并应用幻灯片和演示文稿的状态

来源: js/reveal.js1-9 js/reveal.js108-126 index.html16-22

reveal.js 提供全面的导航选项

  • 键盘导航：箭头键、空格键、Page Up/Down
  • 触摸手势：在移动设备上滑动导航
  • 远程控制：用于远程导航的 API
  • 多种转场类型：淡入、滑动、凸出、凹陷、缩放
  • 自定义背景转场：独立于幻灯片转场

导航系统通过多个控制器实现

控制器目的
键盘处理导航的键盘快捷键
触摸支持触摸和滑动操作
控制管理 UI 导航控件
进度显示演示文稿的进度
位置管理 URL 哈希导航

来源: js/reveal.js10-17 js/reveal.js118-122 demo.html253-263

片段

片段（Fragments）允许在幻灯片内进行分步显示

  • 序列化显示：逐块显示内容
  • 多种动画样式：淡入、放大、缩小、高亮等
  • 有序控制：通过箭头键/点击浏览片段

来源: js/reveal.js8 js/reveal.js115 demo.html225-251

自动动画

自动动画（Auto-Animation）可在幻灯片元素之间创建平滑的转场

  • 匹配元素：自动动画化 ID 匹配的元素
  • 动画属性：大小、位置、颜色和其他 CSS 属性
  • 自定义计时：控制动画速度和缓动函数
  • 选择性重启：通过 data-auto-animate-restart 选项重启动画

来源: js/reveal.js5 js/reveal.js112 demo.html149-173

多种视图模式

reveal.js 支持多种视图模式以适应不同的演示场景

概览模式

  • 将所有幻灯片以网格形式显示
  • 能够快速导航到任何幻灯片
  • 按 'ESC' 或 'o' 键访问

演讲者视图/笔记

  • 包含演讲者笔记的独立窗口
  • 显示即将进行的幻灯片、计时器和笔记
  • 按 'S' 键访问
  • 通过 <aside class="notes"> 元素支持仅演讲者内容

打印/PDF 模式

  • 将演示文稿格式化以进行打印或 PDF 导出
  • 按顺序显示所有幻灯片
  • 保留大部分样式和内容

滚动视图模式

  • 以可滚动的垂直格式显示幻灯片
  • 在窄屏幕上自动激活（响应式设计）
  • 可以通过配置显式启用

来源: js/reveal.js6-7 js/reveal.js9 js/reveal.js19 js/reveal.js113-116 js/reveal.js256-286

内容特性

Markdown 支持

  • 用 Markdown 编写幻灯片
  • 行内或外部 Markdown 文件
  • 自动转换为 HTML
  • 兼容所有其他 reveal.js 功能

代码语法高亮

  • 通过 highlight.js 自动高亮代码
  • 提供多种主题
  • 行高亮和焦点
  • 行号

动态背景

幻灯片可以拥有各种背景类型

  • 纯色背景：纯色或渐变
  • 图片背景：单张图片、平铺图案
  • 视频背景：支持循环和静音选项的自动播放视频背景
  • Iframe 背景：将外部网页内容嵌入为幻灯片背景

媒体和内容集成

  • Iframes：嵌入外部内容
  • 视频和音频：原生媒体嵌入
  • 灯箱：图片和视频的全屏预览
  • 响应式元素：使用 r-stretch 和 r-fit-text 类用于自适应内容尺寸

来源: demo.html182-198 demo.html81-101 demo.html286-332 demo.html201-217

插件系统

reveal.js 拥有模块化插件系统，可扩展核心功能

来源: js/reveal.js15 js/reveal.js122 index.html25-37 demo.html477-496

核心插件

插件功能性
RevealMarkdown支持 Markdown 格式的幻灯片内容
RevealHighlight提供代码语法高亮
RevealNotes实现演讲者备注和演讲者视图
RevealMath支持通过 KaTeX 或 MathJax 显示 LaTeX 数学公式
RevealSearch添加搜索功能以查找内容
RevealZoom允许放大元素

来源: index.html25-36 demo.html478-482

配置与自定义

reveal.js 具有高度可配置性，提供众多选项来定制演示体验

主题与样式

  • 内置多种主题（black, white, league, beige 等）
  • CSS 变量，方便定制
  • SCSS 源代码，用于高级主题创建

配置选项

可以通过 Reveal.initialize() 配置对象自定义演示文稿

来源: index.html28-37 demo.html484-495 demo.html267-282

浏览器和平台支持

  • 支持所有现代浏览器（Chrome, Firefox, Safari, Edge）
  • 移动友好，优化触摸操作
  • 响应式设计，适应不同屏幕尺寸
  • 对旧版浏览器提供回退支持

来源: js/reveal.js22-23 demo.html176-180

API 和集成

reveal.js 提供全面的 JavaScript API 以实现程序化控制

API 方法

  • 导航：next()、prev()、slide(h, v)、up()、down()、left()、right()
  • 状态：isReady()、isPaused()、isOverview()、isAutoSliding()
  • 控制：pause()、resume()、toggleAutoSlide()、toggleOverview()
  • 信息：getState()、getIndices()、availableRoutes()
  • 配置：configure()、sync()

事件系统

  • 订阅事件：Reveal.on('eventName', callback)
  • 可用事件：ready、slidechanged、fragmentshown、fragmenthidden、overviewshown、overviewhidden、paused、resumed
  • 通过 data-state 属性进行自定义幻灯片事件

来源: js/reveal.js673-686 demo.html434-444 js/reveal.js715-730 js/reveal.js463-467

与外部工具集成

  • Slides.com：用于创建 reveal.js 演示文稿的可视化编辑器
  • 导出为 PDF：内置 PDF 导出功能
  • iframe 嵌入：演示文稿可以嵌入到其他网站
  • postMessage API：通过 postMessage 控制嵌入的演示文稿

来源: README.md16 demo.html421-424 js/reveal.js463-467