本文档提供了 reveal.js 中所有可用配置选项的全面参考。这些选项允许您自定义演示文稿的外观、行为和功能。有关在 HTML 结构中应用这些配置的信息,请参阅 HTML 结构。
Reveal.js 配置选项被定义为一个 JavaScript 对象,您在初始化演示文稿时将其传递。所有选项的默认值均在 js/config.js 中定义。初始化演示文稿时,您的自定义选项将与这些默认值合并。
可以通过三种方式设置配置选项
初始化期间:
初始化后使用 configure() 方法
通过 URL 查询参数:
https://example.com/presentation?controls=false&transition=fade
下图说明了 reveal.js 中配置选项的处理和应用方式
来源:js/reveal.js145-152 js/reveal.js477-551
这些选项控制演示文稿的尺寸和缩放行为。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
width | 数字/字符串 | 960 | 演示文稿的宽度(以像素为单位或 CSS 值,例如“100%”) |
height | 数字/字符串 | 700 | 演示文稿的高度(以像素为单位或 CSS 值,例如“100%”) |
margin | 数字 | 0.04 | 内容周围应留空的显示尺寸的因子(0.04 = 4% 的边距) |
minScale | 数字 | 0.2 | 演示文稿缩放的最小界限 |
maxScale | 数字 | 2.0 | 演示文稿缩放的最大界限 |
disableLayout | 布尔值 | false | 禁用 reveal.js 的默认幻灯片布局(适用于自定义 CSS 布局) |
display | 字符串 | 'block' | 用于显示幻灯片的显示模式 |
center | 布尔值 | true | 在可用空间内垂直居中幻灯片 |
embedded | 布尔值 | false | 标记演示文稿是否在嵌入模式下运行(包含在屏幕的有限区域内) |
来源:js/config.js4-14 js/config.js86-94 js/config.js315
来源:js/reveal.js775-886 js/reveal.js966-1002
这些选项控制导航 UI 元素和行为。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
controls | 布尔值/字符串 | true | 显示导航控件。可以是 true、false 或 'speaker-only' |
controlsTutorial | 布尔值 | true | 通过显示提示帮助用户学习控件 |
controlsLayout | 字符串 | 'bottom-right' | 控件位置:'edges' 或 'bottom-right' |
controlsBackArrows | 字符串 | 'faded' | 向后导航箭头的可见性:'faded'、'hidden' 或 'visible' |
progress | 布尔值 | true | 显示演示文稿进度条 |
slideNumber | 布尔值/字符串/函数 | false | 显示当前幻灯片的页码。详情请见下文 |
showSlideNumber | 字符串 | 'all' | 限制幻灯片编号的可见性:'all'、'print' 或 'speaker' |
navigationMode | 字符串 | 'default' | 导航行为:'default'、'linear' 或 'grid' |
overview | 布尔值 | true | 启用幻灯片概览模式 |
jumpToSlide | 布尔值 | true | 启用跳转到幻灯片导航快捷方式的支持 |
来源:js/config.js18-33 js/config.js35-58 js/config.js105-129 js/config.js72 js/config.js91
slideNumber 选项接受多种格式
true:显示幻灯片编号false:隐藏幻灯片编号'h.v':水平 . 垂直幻灯片编号(默认)'h/v':水平 / 垂直幻灯片编号'c':扁平化幻灯片编号'c/t':扁平化幻灯片编号 / 总幻灯片数这些选项控制用户如何浏览演示文稿。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
keyboard | 布尔值 | true | 启用用于导航的键盘快捷键 |
keyboardCondition | 函数/字符串 | null | 可选函数,用于阻止键盘事件或设置为“focused” |
touch | 布尔值 | true | 在支持触摸输入的设备上启用触摸导航 |
mouseWheel | 布尔值 | false | 通过鼠标滚轮启用幻灯片导航 |
hash | 布尔值 | false | 将幻灯片编号添加到 URL hash 中,以便于书签和分享 |
respondToHashChanges | 布尔值 | true | 监控 hash 并根据其变化切换幻灯片 |
hashOneBasedIndex | 布尔值 | false | 对 URL hash 链接使用基于 1 的索引,以匹配幻灯片编号 |
history | 布尔值 | false | 将每次幻灯片更改推送到浏览器历史记录(意味着 hash: true) |
loop | 布尔值 | false | 循环演示文稿(最后一张幻灯片链接到第一张) |
rtl | 布尔值 | false | 将演示文稿方向更改为从右到左 |
来源:js/config.js63-79 js/config.js96-103 js/config.js220-221
这些选项控制幻灯片内容的行为。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
fragments | 布尔值 | true | 全局启用或禁用片段 |
fragmentInURL | 布尔值 | true | 将当前片段包含在 URL hash 中 |
help | 布尔值 | true | 按下“?”键时显示帮助叠加层 |
pause | 布尔值 | true | 启用暂停演示文稿的功能(黑屏) |
showNotes | 布尔值 | false | 使演讲者备注对所有观众可见 |
showHiddenSlides | 布尔值 | false | 显示具有 data-visibility="hidden" 的幻灯片 |
autoPlayMedia | 布尔值/null | null | 全局覆盖自动播放媒体(视频/音频/iframe) |
preloadIframes | 布尔值/null | null | 全局覆盖预加载惰性加载的 iframe |
previewLinks | 布尔值 | false | 在 iframe 预览叠加层中打开链接 |
来源: js/config.js134-169 js/config.js146-153 js/config.js223-226
这些选项控制幻灯片过渡和自动动画。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
transition | 字符串 | 'slide' | 过渡样式: 'none', 'fade', 'slide', 'convex', 'concave', 或 'zoom' |
transitionSpeed | 字符串 | 'default' | 过渡速度: 'default', 'fast', 或 'slow' |
backgroundTransition | 字符串 | 'fade' | 幻灯片背景的过渡样式 |
autoAnimate | 布尔值 | true | 启用幻灯片之间的自动动画 |
autoAnimateMatcher | 函数 | null | 自动动画的自定义元素匹配器 |
autoAnimateEasing | 字符串 | 'ease' | 自动动画的缓动函数 |
autoAnimateDuration | 数字 | 1.0 | 自动动画的持续时间(秒) |
autoAnimateUnmatched | 布尔值 | true | 为不匹配的元素添加动画 |
autoAnimateStyles | array | [...] | 可自动进行动画的 CSS 属性 |
来源: js/config.js237-200 js/config.js171-199
来源: js/reveal.js1436-1441 js/config.js171-200
这些选项控制自动幻灯片前进。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
autoSlide | 数字 | 0 | 在 x 毫秒后自动前进幻灯片(0 = 禁用) |
autoSlideStoppable | 布尔值 | true | 用户输入后停止自动滑动 |
autoSlideMethod | 函数 | null | 自动滑动的自定义函数(默认为 navigateNext) |
defaultTiming | 数字 | null | 用于节奏计时器的每张幻灯片的平均时间(秒) |
来源: js/config.js202-218 js/reveal.js2249-2318
当使用自动幻灯片时,计时值按以下优先级选择:
data-autoslidedata-autoslidedata-autoslideautoSlide 设置这些选项控制视差背景效果。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
parallaxBackgroundImage | 字符串 | '' | 背景图片的 URL |
parallaxBackgroundSize | 字符串 | '' | 背景尺寸,例如 "3000px 2000px" |
parallaxBackgroundRepeat | 字符串 | '' | 背景重复模式 |
parallaxBackgroundPosition | 字符串 | '' | 背景位置,例如 "top left" |
parallaxBackgroundHorizontal | 数字 | null | 水平移动背景的像素数 |
parallaxBackgroundVertical | 数字 | null | 垂直移动背景的像素数 |
这些选项控制打印、滚动和概览等特殊演示模式。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
view(视图) | 字符串 | null | 以特定视图模式初始化: 'print', 'scroll', 或 null |
scrollLayout | 字符串 | 'full' | 在滚动视图中调整幻灯片高度: 'full' 或 'compact' |
scrollSnap | string/boolean | 'mandatory' | 控制滚动视图中的滚动吸附 |
scrollProgress | string/boolean | 'auto' | 启用并配置滚动视图进度条 |
scrollActivationWidth | 数字 | 435 | 自动激活滚动视图的宽度(像素) |
viewDistance | 数字 | 3 | 当前幻灯片旁有多少张幻灯片可见 |
mobileViewDistance | 数字 | 2 | 移动设备上的视图距离 |
来源: js/config.js262-288 js/config.js306-312
这些选项控制 PDF 导出行为。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
pdfMaxPagesPerSlide | 数字 | Number.POSITIVE_INFINITY | 打印为 PDF 时每张幻灯片的最大页数 |
pdfSeparateFragments | 布尔值 | true | 将每个片段打印到单独的幻灯片 |
pdfPageHeightOffset | 数字 | -1 | 用于减少导出 PDF 页面中内容高度的偏移量 |
这些选项控制 reveal.js 与其他系统的通信方式。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
postMessage | 布尔值 | true | 通过 window.postMessage 公开 reveal.js API |
postMessageEvents | 布尔值 | false | 通过 postMessage 将所有 reveal.js 事件分派到父窗口 |
focusBodyOnPageVisibilityChange | 布尔值 | true | 页面可见性更改时聚焦 body |
这些选项控制光标和界面的行为。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
hideInactiveCursor | 布尔值 | true | 隐藏不活动的光标 |
hideCursorTime | 数字 | 5000 | 光标隐藏之前的延迟时间(毫秒) |
sortFragmentsOnSync | 布尔值 | true | 同步时自动排序片段 |
这些选项控制插件系统。
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
dependencies | array | [] | 需要加载的脚本依赖项 |
plugins | array | [] | 要注册和使用的插件对象 |
下图显示了不同配置选项与它们影响的系统之间的关系
来源: js/reveal.js542-551 js/reveal.js107-126
配置选项在其生命周期中经历几个阶段
configure() 在运行时更改选项来源: js/reveal.js131-169 js/reveal.js477-551