菜单

配置选项

相关源文件

本文档提供了 reveal.js 中所有可用配置选项的全面参考。这些选项允许您自定义演示文稿的外观、行为和功能。有关在 HTML 结构中应用这些配置的信息,请参阅 HTML 结构

配置基础

Reveal.js 配置选项被定义为一个 JavaScript 对象,您在初始化演示文稿时将其传递。所有选项的默认值均在 js/config.js 中定义。初始化演示文稿时,您的自定义选项将与这些默认值合并。

设置配置选项

可以通过三种方式设置配置选项

  1. 初始化期间:

  2. 初始化后使用 configure() 方法

  3. 通过 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显示导航控件。可以是 truefalse'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':扁平化幻灯片编号 / 总幻灯片数
  • 自定义函数:为当前幻灯片返回幻灯片编号

来源:js/config.js38-52

这些选项控制用户如何浏览演示文稿。

选项类型默认描述
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布尔值/nullnull全局覆盖自动播放媒体(视频/音频/iframe)
preloadIframes布尔值/nullnull全局覆盖预加载惰性加载的 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为不匹配的元素添加动画
autoAnimateStylesarray[...]可自动进行动画的 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

自动幻灯片优先级

当使用自动幻灯片时,计时值按以下优先级选择:

  1. 当前片段的 data-autoslide
  2. 当前幻灯片的 data-autoslide
  3. 父级幻灯片的 data-autoslide
  4. 全局 autoSlide 设置

来源: js/reveal.js2253-2293

背景效果

这些选项控制视差背景效果。

选项类型默认描述
parallaxBackgroundImage字符串''背景图片的 URL
parallaxBackgroundSize字符串''背景尺寸,例如 "3000px 2000px"
parallaxBackgroundRepeat字符串''背景重复模式
parallaxBackgroundPosition字符串''背景位置,例如 "top left"
parallaxBackgroundHorizontal数字null水平移动背景的像素数
parallaxBackgroundVertical数字null垂直移动背景的像素数

来源: js/config.js246-260

演示模式

这些选项控制打印、滚动和概览等特殊演示模式。

选项类型默认描述
view(视图)字符串null以特定视图模式初始化: 'print', 'scroll', 或 null
scrollLayout字符串'full'在滚动视图中调整幻灯片高度: 'full''compact'
scrollSnapstring/boolean'mandatory'控制滚动视图中的滚动吸附
scrollProgressstring/boolean'auto'启用并配置滚动视图进度条
scrollActivationWidth数字435自动激活滚动视图的宽度(像素)
viewDistance数字3当前幻灯片旁有多少张幻灯片可见
mobileViewDistance数字2移动设备上的视图距离

来源: js/config.js262-288 js/config.js306-312

PDF 导出选项

这些选项控制 PDF 导出行为。

选项类型默认描述
pdfMaxPagesPerSlide数字Number.POSITIVE_INFINITY打印为 PDF 时每张幻灯片的最大页数
pdfSeparateFragments布尔值true将每个片段打印到单独的幻灯片
pdfPageHeightOffset数字-1用于减少导出 PDF 页面中内容高度的偏移量

来源: js/config.js292-304

集成与通信

这些选项控制 reveal.js 与其他系统的通信方式。

选项类型默认描述
postMessage布尔值true通过 window.postMessage 公开 reveal.js API
postMessageEvents布尔值false通过 postMessage 将所有 reveal.js 事件分派到父窗口
focusBodyOnPageVisibilityChange布尔值true页面可见性更改时聚焦 body

来源: js/config.js228-235

光标和界面选项

这些选项控制光标和界面的行为。

选项类型默认描述
hideInactiveCursor布尔值true隐藏不活动的光标
hideCursorTime数字5000光标隐藏之前的延迟时间(毫秒)
sortFragmentsOnSync布尔值true同步时自动排序片段

来源: js/config.js317-325

插件系统

这些选项控制插件系统。

选项类型默认描述
dependenciesarray[]需要加载的脚本依赖项
pluginsarray[]要注册和使用的插件对象

来源: js/config.js327-331

配置对象关系

下图显示了不同配置选项与它们影响的系统之间的关系

来源: js/reveal.js542-551 js/reveal.js107-126

配置生命周期

配置选项在其生命周期中经历几个阶段

  1. 默认值:默认值在 js/config.js 中定义
  2. 初始化:用户选项在初始化期间与默认值合并
  3. 运行时更改:可以使用 configure() 在运行时更改选项
  4. URL 参数:查询参数可以覆盖选项
  5. 控制器配置:每个控制器都会接收相关的配置选项

来源: js/reveal.js131-169 js/reveal.js477-551

常见配置示例

极简演示

自动播放幻灯片

开发者演示与代码聚焦

PDF导出优化

来源: js/config.js4-331 js/reveal.js41-169