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

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有用。