高级显示

标题幻灯片

主要标题幻灯片是演示文稿的第一张幻灯片，其内容是根据多种文档选项（标题、副标题、日期、作者、机构等）生成的。

自定义背景

如果你想为标题幻灯片提供自定义背景，请执行以下操作：

使用 title-slide-attributes 键提供背景选项。
在此键中，指定任何支持的幻灯片背景选项，但在它们前面加上 data-。

例如：

---
title: 我的幻灯片展示
title-slide-attributes:
  data-background-image: /path/to/title_image.png
  data-background-size: contain
  data-background-opacity: "0.5"
---

自定义模板

你可以完全用你自己的模板替换默认的标题幻灯片。为此，请指定一个 title-slide.html 模板部分。例如：

title: 我的幻灯片展示
format:
  revealjs:
    template-partials:
      - title-slide.html

Quarto 原生支持一个标题幻灯片，它改进了对作者和隶属关系的处理。虽然它向后兼容 author 和 institute，但我们现在建议你使用标准的作者元数据。要为 title-slide.html 提供你自己的部分，你可以从该更花哨的标题幻灯片模板的源代码开始。根据需要自定义此模板，然后将结果保存到你的演示文稿旁边的 title-slide.html。

如果你更喜欢 pandoc 的默认标题幻灯片，你可以选择使用 title-slide-style: pandoc 在 YAML 中启用此选项——这将使用这个更简单的标题幻灯片模板部分。然而，这个更简单的部分并没有利用我们改进的作者和隶属关系处理，因此我们建议使用花哨的模板作为自定义标题幻灯片的起点。

居中对齐

默认情况下，标题幻灯片是居中的，而所有其他幻灯片是顶部对齐的（即 center: false）。你可以通过设置 center-title-slide 选项来防止标题幻灯片居中：

title: 我的幻灯片展示
format:
  revealjs:
    center-title-slide: false

如果设置了 center: true，center-title-slide 将被忽略。目前没有办法让内容幻灯片居中而对齐标题幻灯片顶部。关于幻灯片内容居中对齐，请参见 Section 6.3。

幻灯片过渡

Reveal 支持多种动画过渡效果，用于幻灯片更改和幻灯片背景更改。默认情况下不使用过渡，但你可以使用以下选项全局或按幻灯片启用它们。

以下是可用的过渡类型：

过渡类型	描述
`none`	无过渡（立即切换）
`fade`	交叉淡入淡出
`slide`	水平滑动
`convex`	凸角滑动
`concave`	凹角滑动
`zoom`	缩放进入的幻灯片，使其从屏幕中心放大

以下是设置幻灯片和背景的全局过渡样式的示例：

---
title: "演示文稿"
format:
  revealjs:
    transition: slide
    background-transition: fade
---

你还可以将 transition-speed 指定为 default、fast 或 slow：

---
title: "演示文稿"
format:
  revealjs:
    transition: slide
    transition-speed: fast
---

你还可以为单个幻灯片指定 transition 和/或 transition-speed：

## 幻灯片标题 {transition="fade" transition-speed="fast"}

你还可以指定单独的进入和退出过渡，例如：

## 幻灯片标题 {transition="fade-in slide-out"}

幻灯片可见性

你可以通过在幻灯片标题中添加 visibility="hidden" 属性来隐藏幻灯片。例如：

## 幻灯片标题 {visibility="hidden"}

不计数幻灯片

在准备演示文稿时，有时准备一些你可能没有时间展示的可选幻灯片会很有帮助。这可以通过在演示文稿末尾添加几张幻灯片来轻松完成，但这意味着 Reveal 的进度条和幻灯片编号会提示有额外的幻灯片。要“隐藏”那些不参与编号系统的幻灯片，可以使用 visibility="uncounted"。例如：

## 幻灯片 1

## 幻灯片 2

## 幻灯片 3 {visibility="uncounted"}

演示文稿大小

所有演示文稿都有一个“正常”大小，即它们被创建时的分辨率。这个默认的“正常”大小是 1050 x 700，这尽可能接近大多数笔记本电脑的宽高比。

Reveal 会根据正常大小自动均匀缩放演示文稿，以确保所有内容在任何给定的显示器或视口中都能完全显示，而不会改变内容的宽高比或布局。

您可以使用以下选项更改幻灯片大小、内容周围的边距，以及设置内容缩放的限制：

选项	描述
`width`	正常宽度（默认为 1050）
`height`	正常高度（默认为 700）
`margin`	显示尺寸中应保持空白的因子（默认为 0.1）
`min-scale`	可应用于内容的最小缩放比例（默认为 0.2）
`max-scale`	可应用于内容的最大缩放比例（默认为 2.0）

绝对位置

absolute 类允许您将元素放置在幻灯片上的任意位置。这些元素具有 CSS position: absolute，可以相对于幻灯片的 top、left、bottom 和/或 right 边缘放置。

例如，我们在这里将 .absolute 类添加到三张图片，并为它们在幻灯片上各自分配一个独特的位置（注意我们还使用了 width 和 height 来控制它们的尺寸）：

![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=0 right=50 width="300" height="300"}

以下属性可以与 absolute 一起使用。所有这些值都可以用 CSS 单位指定（例如 px、em 等）。如果指定了一个没有单位的数字（如上例中所示），则假定为像素。

属性	描述
`width`	元素宽度
`height`	元素高度
`top`	距离幻灯片顶部的距离
`left`	距离幻灯片左侧的距离
`bottom`	距离幻灯片底部的距离
`right`	距离幻灯片右侧的距离

请注意，演示文稿幻灯片的默认大小是 1050 x 700。有关自定义此设置的详细信息，请参阅演示文稿大小。

布局辅助工具

Reveal 提供了一些辅助类来控制内容的布局。

堆叠布局

r-stack 布局类允许您将多个元素居中并堆叠在一起。这旨在与片段一起使用，以逐步显示元素。

例如，我们在这里创建了一个带有 .r-stack 类的 div，然后包含了 3 张图片（每张图片都使用了 .fragment，因此它们会逐步显示）：

::: {.r-stack}
![](image1.png){.fragment width="450" height="300"}

![](image2.png){.fragment width="300" height="450"}

![](image3.png){.fragment width="400" height="400"}
:::

适应文本

r-fit-text 类使文本尽可能大，而不会溢出幻灯片。当您想要大文本而无需手动找到合适的字体大小时，这非常有用。例如：

::: {.r-fit-text}
大文本
:::

居中

应用于幻灯片的 center 类将通过在幻灯片顶部添加适当的间距来垂直居中幻灯片内容。元素之间的垂直距离不会被修改。例如：

## 这将会居中 {.center}

这个文本也会移动

有关控制标题幻灯片居中的信息，请参阅 Section 1.3。

拉伸

r-stretch 布局辅助工具允许您调整元素（如图片或视频）的大小，以覆盖幻灯片中剩余的垂直空间。例如，这里的图片将自动调整大小以适应幻灯片标题和前后文本之外的剩余空间：

## 幻灯片标题

这里有一张图片：

![](image.png){.r-stretch}

图片后的文本。

对于仅包含单个顶级图像的幻灯片，.r-stretch 类会自动应用于图像。您可以通过设置 auto-stretch: false 选项来禁用此行为：

format:
  revealjs:
    auto-stretch: false

您也可以通过添加 .nostretch 类来禁用单个幻灯片的自动拉伸：

## 幻灯片标题 {.nostretch}

或者直接将 .nostretch 应用于单个图像：

![](image.png){.nostretch fig-align="center" width="800px"}

auto-stretch 仅适用于非嵌套图像，这意味着功能块（例如片段、布局面板、列等）或自定义 Div 中的图像将被忽略。对于自定义 Div，您可以通过在外部 Div 中添加类 .r-stretch 来选择启用 auto-stretch 行为。

限制：自动拉伸与可滚动

当幻灯片是可滚动的时，自动拉伸所使用的图像尺寸计算可能无法正常工作，图像可能不会显示。根据你的需求，有两种解决方案：

在演示文稿级别禁用自动拉伸，auto-stretch: false，仅在需要时对单个图像使用.r-stretch。
在可滚动的幻灯片上，添加.nostretch类以在该幻灯片上禁用自动拉伸。

自动动画

Revealjs 可以自动在幻灯片之间动画化元素。您只需在两个相邻的幻灯片上添加 auto-animate 属性，Auto-Animate 就会在这两个幻灯片之间的所有匹配元素之间进行动画化。

这里有一个简单的例子，让您更好地了解它的使用方式。请注意，在这个示例中幻灯片没有标题（只有 auto-animate 属性），但它们也可以包含标题。

## {auto-animate=true}

::: {style="margin-top: 100px;"}
动画内容
:::

## {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: red;"}
动画内容
:::

此示例使用 margin-top 属性移动元素，但内部 Reveal 将使用 CSS 变换以确保平滑移动。这种动画方法适用于大多数可动画化的 CSS 属性，这意味着您可以转换诸如 position、font-size、line-height、color、background-color、padding 和 margin 等属性。

代码动画

您还可以在代码块之间进行动画化，以显示代码的变化。例如：

## {auto-animate="true"}

```r
# 填充我们为绘图创建的位置
output$phonePlot <- renderPlot({
  # 渲染条形图
})
```

## {auto-animate=true}

```r
# 填充我们为绘图创建的位置
output$phonePlot <- renderPlot({
  # 渲染条形图
  barplot(WorldPhones[,input$region]*1000, 
          main=input$region,
          ylab="电话数量",
          xlab="年份")
})
```

移动动画

动画不仅限于样式的变化。Auto-Animate 还可以在内容添加、删除或重新排列时自动将元素移动到新位置。无需一行内联 CSS。例如，这里两个幻灯片之间的内容差异会隐式地进行动画化：

## {auto-animate=true}

动画

## {auto-animate=true}

隐式

动画

元素匹配

当您在两个自动动画化的幻灯片之间导航时，我们会尽力自动找到两个幻灯片中的匹配元素。对于文本，如果文本内容和节点类型相同，我们认为它们是匹配的。对于图像、视频和 iframe，我们比较 src 属性。我们还考虑元素在 DOM 中出现的顺序。

在自动匹配不可行的情况下，您可以为想要在幻灯片之间进行动画化的对象赋予匹配的 data-id 属性。我们优先考虑匹配的 data-id 值，而不是自动匹配。

以下是一个示例，我们为几个块赋予了匹配的 ID，因为自动匹配没有内容可供参考。此示例还使用了一些额外的动画属性（auto-animate-easing 和 auto-animate-delay），我们将在下一节中描述。

## {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-hstack}
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::

## {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-stack}
::: {data-id="box1" style="background: #2780e3; width: 350px; height: 350px; border-radius: 200px;"}
:::

::: {data-id="box2" style="background: #3fb618; width: 250px; height: 250px; border-radius: 200px;"}
:::

::: {data-id="box3" style="background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;"}
:::
:::

动画设置

您可以覆盖特定的动画设置，例如缓动和持续时间，无论是整个演示文稿、每张幻灯片还是每个动画元素。以下配置属性可用于更改特定幻灯片或元素的设置：

属性	默认值	描述
`auto-animate-easing`	ease	一个CSS 缓动函数。
`auto-animate-unmatched`	true	确定没有匹配的auto-animate目标的元素是否应淡入。设置为 `false` 使其立即显示。
`auto-animate-duration`	1.0	动画持续时间，以秒为单位。
`auto-animate-delay`	0	动画延迟时间，以秒为单位（只能为特定元素设置，不能在幻灯片级别设置）。
`auto-animate-id`	absent	将auto-animate幻灯片绑定在一起的id。
`auto-animate-restart`	absent	分开两个相邻的auto-animate幻灯片（即使使用相同的id）。

您可以如下覆盖缓动、未匹配和持续时间的全局默认值：

---
title: "我的幻灯片"
format:
  revealjs:
    auto-animate-easing: ease-in-out
    auto-animate-unmatched: false
    auto-animate-duration: 0.8
---

片段

片段用于突出显示或逐步显示幻灯片上的单个元素。每个带有 fragment 类的元素在进入下一张幻灯片之前都会被逐个处理。

请注意，此处讨论的片段是相对高级的增量内容显示形式——有关创建增量项目列表和在幻灯片中插入内容暂停的文档，请参见增量列表。

默认的片段样式是开始时不可见并淡入。可以通过向片段追加不同的类来更改此样式。例如：

::: {.fragment}
淡入
:::

::: {.fragment .fade-out}
淡出
:::

::: {.fragment .highlight-red}
红色高亮
:::

::: {.fragment .fade-in-then-out}
淡入，然后淡出
:::

::: {.fragment .fade-up}
淡入时向上滑动
:::

片段类

以下是所有可用的片段类：

名称	效果
`fade-out`	开始时可见，淡出
`fade-up`	淡入时向上滑动
`fade-down`	淡入时向下滑动
`fade-left`	淡入时向左滑动
`fade-right`	淡入时向右滑动
`fade-in-then-out`	淡入，然后在下一步淡出
`fade-in-then-semi-out`	淡入，然后在下一步淡出至50%
`grow`	放大
`semi-fade-out`	淡出至50%
`shrink`	缩小
`strike`	删除线
`highlight-red`	使文本变红
`highlight-green`	使文本变绿
`highlight-blue`	使文本变蓝
`highlight-current-red`	使文本变红，然后在下一步恢复原状
`highlight-current-green`	使文本变绿，然后在下一步恢复原状
`highlight-current-blue`	使文本变蓝，然后在下一步恢复原状

嵌套片段

可以通过包装元素顺序应用多个片段。以下示例将在第一步淡入文本，在第二步使其变红，在第三步部分淡出：

::: {.fragment .fade-in}
::: {.fragment .highlight-red}
::: {.fragment .semi-fade-out}
淡入 > 变红 > 部分淡出
:::
:::
:::

片段顺序

默认情况下，片段将按其在DOM中出现的顺序逐个处理。可以使用 fragment-index 属性更改此显示顺序。请注意，多个元素可以出现在同一索引处：

::: {.fragment fragment-index=3}
最后出现
:::

::: {.fragment fragment-index=1}
首先出现
:::

::: {.fragment fragment-index=2}
第二出现
:::

视差背景

如果你想使用视差滚动背景，请添加 parallax-background-image 和 parallax-background-size 选项。例如：

---
title: "演示文稿"
format:
  revealjs:
     parallax-background-image: background.png
     parallax-background-size: "2100px 900px"
     parallax-background-horizontal: 200
     parallax-background-vertical: 50
---

请注意，parallax-background-horizontal 和 parallax-background-vertical 选项不是必需的（如果未指定，将使用上面显示的默认值）。

垂直幻灯片

Reveal 默认使用经典的线性幻灯片导航。如果你愿意，你也可以配置幻灯片导航，将多个幻灯片嵌套在一个顶级幻灯片中，以创建一个垂直堆栈。

使用 navigation-mode 选项来微调 Reveal 导航行为：

导航模式	行为
`linear`	左右箭头键逐个浏览所有幻灯片（水平和垂直）。
`vertical`	左右箭头键在水平幻灯片之间切换。上下箭头键在垂直幻灯片之间切换。空格键逐个浏览所有幻灯片（水平和垂直）。
`grid`	启用时，从垂直堆栈向相邻垂直堆栈左右移动时，将停在你所在的相同垂直索引位置。

如果你使用 vertical 或 grid 导航，你应该使用一级标题来表示水平轴，使用二级标题来表示垂直轴来构建你的幻灯片。例如：

---
title: "演示文稿"
format:
  revealjs:
    navigation-mode: vertical
---

# 幻灯片1

## 幻灯片1.1

## 幻灯片1.2

# 幻灯片2

## 幻灯片2.1

## 幻灯片2.2

幻灯片控制

当你启用 vertical 或 grid 导航时，控制按钮将出现，以提供你在演示中的位置的视觉提示（例如，如果有垂直幻灯片在你下方，你将看到一个向下控制按钮）。

默认情况下，这些控制按钮出现在演示的边缘，你可以使用 controls-layout 选项将其定位在右下角。你还可以使用 controls-tutorial 选项为观众提供额外的视觉提示，表明控制按钮可用。例如：

---
title: "演示文稿"
format: 
  revealjs:
    navigation-mode: vertical
    controls-layout: bottom-right
    controls-tutorial: true
---

请注意，使用 controls-layout: bottom-right 与包含 logo 不兼容（因为 logo 也会出现在右下角）。

你也可以完全禁用控制按钮，使用 controls: false。

Warning

虽然垂直幻灯片确实比传统的线性模型提供了一些额外的灵活性，但它们在实践中对最终用户非常混乱（主要是因为它们如此出乎意料）。用户经常会跳过垂直内容，因为他们根本不知道它的存在。

如果你的内容受益于垂直方向（例如，你有可选的深入内容，你不希望它出现在演示的主要流程中），你可以当然使用垂直模式。只需知道，如果你将幻灯片分发给用户，他们很可能最终不会查看任何垂直内容。

触摸导航

你可以在任何支持触摸的设备上通过滑动来浏览演示文稿。水平滑动在水平幻灯片之间切换，垂直滑动在垂直幻灯片之间切换。

如果你希望禁用此功能，可以将 touch 选项设置为 false：

---
title: "演示文稿"
format:
  revealjs:
    touch: false
    controls: true
---

请注意，我们还同时启用了 controls（因为手机或平板电脑上的用户无法访问键盘）。

Reveal 插件

要使用 Revealjs 插件，你需要将它们打包到一个带有配置文件（plugin.yml）的目录中。配置文件让 Quarto 知道如何将插件注入到演示文稿中（例如，包括哪些脚本和/或 CSS 文件，默认配置应该是什么等）。

查看内置在 Quarto Reveal 中的插件的源代码以获取示例：

https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/plugins

要使用插件，只需在 revealjs-plugins 列表中包含对它的目录的引用。例如：

---
title: "演示文稿"
format:
  revealjs:
    revealjs-plugins:
      - myplugin
---

请注意，许多最受欢迎的 Reveal 插件已经包含在 Quarto 版本的 Reveal 中，因此无需单独包含它们。内置插件包括：

示例

我们以 fullscreen 插件为例。以下是将此插件打包到您的 Quarto HTML 演示文稿中使用的步骤：

创建一个您想要的插件名称的文件夹，这里我们称之为 fullscreen。
将插件文件下载到创建的文件夹中。这里插件只有一个名为 plugin.js 的 JS 文件，您可以在 rajgoel/reveal.js-plugins 仓库找到它。您可以保留名称或重命名它，例如 fullscreen.js。
在该文件夹中添加一个 plugin.yml 文件，如 Quarto Reveal 示例所示。
- name 是必填字段，应为 JS 插件定义的 JS 函数名称。打开您下载的 JS 脚本查找它。
- 其他字段用于要使用的资源。在我们的示例中，只有一个 JS 脚本，因此我们将使用 script
我们的 plugin.yml 将是：
```
name: RevealFullscreen
script: [fullscreen.js]
```
现在在您的文档 YAML 头部添加插件引用，使用您创建的文件夹的路径：
```
format: 
 revealjs:
   revealjs-plugins:
     - fullscreen
```
自定义插件将在您的演示文稿中加载，您可以使用它。fullscreen 插件的文档展示了一个通过在 section 上添加属性并在内容上使用 stretch 来添加全屏地图的示例。这在 .qmd 文件中将转化为这样的幻灯片：
```
## {fullscreen=true}

<iframe class="stretch" data-src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d61206.89156051744!2d-151.77366863890407!3d-16.50433878928727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sde!4v1467468929561"></iframe>
```

了解更多

查看这些文章以了解更多关于使用 Reveal 的信息：

Reveal Basics 涵盖了创建演示文稿的基本机制。
Presenting Slides 描述了幻灯片导航、打印为 PDF、使用黑板在幻灯片上绘图以及创建多路演示文稿。
Reveal Themes 讨论了使用和自定义现有主题以及创建全新主题。