如何在所有幻灯片上添加固定页脚？

Question

我有一个由reveal.js设置的演示文稿，它是用来无人值守的。因此，我希望能够在所有的幻灯片上显示一个小页脚(或其他链接)，这些幻灯片指向一个“信息幻灯片”，上面有关于作者的数据，以及如何使用幻灯片等等。

(这是为了帮助那些不知道如何使用reveal.js的人，以及详细显示作者信息。)

我没有在文档中找到任何东西，而且似乎没有一个回调，我可以利用。

Answer 1

这是为我工作(对齐左边，因为我使用内置的控件在右边)。

将此添加到css中：

.reveal .footer {
  position: absolute;
  bottom: 1em;
  left: 1em;
  font-size: 0.5em;
}

在你的html中：

<div class='reveal'>
  <div class='footer'>
    Use left and right arrows to navigate
  </div>
...

如果您希望页脚在用户导航时立即消失(即只应在加载的第一张幻灯片上显示，因为它只是一个提醒)，那么将其添加到html的末尾：

<script>
  // displayed upon load, hides when slide changes
  Reveal.addEventListener('slidechanged', function(event) {
    document.querySelector('.reveal .footer').style.display = 'none';
  });
</script>

为了获得PDF导出中的固定内容(在所有幻灯片上)，您会发现this answer很有用。