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

【问题标题】：How to add a fixed footer on all slides?如何在所有幻灯片上添加固定页脚？
【发布时间】：2014-08-25 05:19:09
【问题描述】：

我有一个使用reveal.js 设置的演示文稿，该演示文稿可以在无人看管的情况下使用。因此，我希望能够在所有指向“信息幻灯片”的幻灯片上显示一个小页脚（或某处的另一个链接），其中包含有关作者的数据、如何使用幻灯片等。

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

我无法在文档中找到任何内容，而且似乎没有我可以使用的回调。

【问题讨论】：

标签： reveal.js

【解决方案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 很有用。

【讨论】：