将 URL 哈希添加到 Reveal.js“即将到来的”演讲者备注幻灯片

Question

我正在使用 reveal.js 进行幻灯片演示。 Reveal.js 提供了一个“Speaker View”窗口。在 Reveal.js 的“Tall”布局中，它在名为“Upcoming”的覆盖框中显示“Upcoming”幻灯片。

为了帮助我跟踪我所在的位置，我想更改该文本以包含 URL 的哈希部分，例如“#1”或 #/1/0/1”。 （Reveal.js URL 的哈希部分是其幻灯片位置。）

我该怎么做？

这是“演讲者视图”窗口的屏幕截图：

Answer 1

我相信有比这更好的解决方案，但如果您需要快速、简单且安全的解决方案，我认为您可以使用这个。看了文档，我认为没有任何API可以实现这一点，所以我不得不想出自己的解决方案。在我看来，演讲者视图使用

iframe

显示即将播放的幻灯片，不幸的是，当即将播放的幻灯片发生更改时，它不会发送任何回调（因此演讲者视图不知道即将播放的幻灯片的状态） 。通常，您会希望在即将到来的 iframe 成功更改幻灯片后使用

postMessage

发送回状态，但如果您不小心，这种方法可能会破坏某些内容。所以我建议的方法是基本上将

Upcoming

标签与 iframe 的

hash

url 同步。最简单的方法是使用

setInterval

进行轮询并获取哈希值并将其附加到

Upcoming

标签。

你必须做的第一件事就是打开这个文件

plugin/notes/speaker-view.html

（我假设你的项目目录中有这个文件，因为当你克隆原始存储库时应该添加它），然后查找这个函数

setupIframes( data )

，然后添加这些函数末尾的代码，如下所示：

        /**
         * Creates the preview iframes.
         */
        function setupIframes( data ) {
          ...
          upcomingSlide.setAttribute("height", 512);
          upcomingSlide.setAttribute("src", upcomingURL);

          // ADD BELOW CODES
          setInterval(function () {
            const upcomingLabel = document.querySelector(
              "#upcoming-slide .overlay-element"
            );
            upcomingLabel.innerHTML =
              "Upcoming " + upcomingSlide.contentWindow.location.hash;
          }, 300);
          document.querySelector("#upcoming-slide").appendChild(upcomingSlide);
        }

之后，您需要重建项目，运行以下命令：

npm run build

构建完成后，您可以再次开始运行项目。如果需要，您还可以将

300

（300 毫秒）更改为

1000

（1 秒），值越小，同步程度越高。