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

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导出中的固定内容(在所有幻灯片上),您会发现此答案很有用.