Reveal.js 自定义“Upcoming”幻灯片备注以显示 URL 哈希部分

2024-03-16 10:06:34

在 Reveal.js 中自定义“Upcoming”幻灯片备注

作为一名经验丰富的程序员和技术作家，我经常使用 Reveal.js 来创建引人入胜且信息丰富的幻灯片演示。一个有用的功能是“Speaker Notes”窗口，它可以在“Tall”布局中显示一个“Upcoming”幻灯片，方便演讲者跟踪演示进度。

然而，默认的“Upcoming”框只显示即将到来的幻灯片的数字索引。为了提高演示的互动性和信息量，我们希望修改该文本，使其包含 URL 的哈希部分，例如“#1”或“#/1/0/1”。这可以帮助演讲者快速查看即将到来的幻灯片的确切位置。

修改步骤

实现这一目标非常简单，只需几个步骤即可：

打开 reveal.js 配置文件： 找到并打开您幻灯片的 reveal.js 配置文件（通常命名为“reveal.js”）。
添加自定义 CSS： 在<head>标签中，添加以下 CSS 代码：

.speaker-notes-pane .upcoming .upcoming-slide-overlay {
  background: #000;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
}
.speaker-notes-pane .upcoming .upcoming-slide-overlay span {
  font-weight: bold;
}

此 CSS 代码创建了一个覆盖在“Upcoming”框上的黑色透明层，并为文本添加了白色、加粗的样式。

添加 JavaScript： 在<head>标签中添加以下 JavaScript 代码：

// 获取 upcoming slide overlay
var upcomingOverlay = document.querySelector('.upcoming .upcoming-slide-overlay');

// 获取当前幻灯片的哈希值
var hash = window.location.hash;

// 将哈希值添加到 overlay 文本中
upcomingOverlay.textContent = 'Upcoming: ' + hash;

此 JavaScript 代码动态地检索当前幻灯片的哈希值并将其添加到“Upcoming”框的文本中。

保存更改并刷新幻灯片： 保存配置文件并刷新幻灯片。现在，“Upcoming”框应该显示包含 URL 哈希部分的文本。

示例代码

以下是包含所有代码片段的示例 reveal.js 配置文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" href="reveal.css">
  <link rel="stylesheet" href="custom.css">
  <script src="reveal.js"></script>
  <script>
    // Get upcoming slide overlay
    var upcomingOverlay = document.querySelector('.upcoming .upcoming-slide-overlay');

    // Get current slide hash
    var hash = window.location.hash;

    // Add hash to overlay text
    upcomingOverlay.textContent = 'Upcoming: ' + hash;
  </script>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <h1>Slide 1</h1>
      </section>
      <section>
        <h1>Slide 2</h1>
      </section>
    </div>
  </div>
</body>
</html>

常见问题解答

以下是修改 Reveal.js “Upcoming”幻灯片备注时的常见问题解答：

问：我无法在“Upcoming”框中看到哈希值，这是为什么？
答：确保您已经正确添加了 CSS 和 JavaScript 代码，并且您的配置文件已保存并刷新。
问：我可以自定义“Upcoming”框中的文本样式吗？
答：是的，您可以通过修改 CSS 代码来自定义字体大小、颜色和字体系列。
问：是否可以在“Upcoming”框中添加其他信息？
答：是的，您可以通过修改 JavaScript 代码来添加幻灯片标题或其他相关信息。
问：我是否可以在没有“Tall”布局的情况下显示“Upcoming”框？
答：是的，您可以通过修改 Reveal.js 的默认设置在其他布局中显示“Upcoming”框。
问：如何将此修改应用于我所有 Reveal.js 幻灯片？
答：您可以创建一个包含 CSS 和 JavaScript 代码的自定义主题，并将其应用于所有幻灯片。