如何为reveal.js演讲者视图的「即将展示」幻灯片添加URL哈希？

要实现这个需求，你可以借助reveal.js的API事件监听和DOM操作来修改演讲者视图的标题文本，具体操作如下：

• 监听幻灯片切换事件，实时获取下一张幻灯片的位置索引
• 根据索引生成与reveal.js格式一致的URL哈希
• 定位演讲者视图中「Upcoming」的标题元素，替换为带哈希的文本

直接在演示页面中添加以下代码即可：

Reveal.addEventListener('ready', function() {
  // 定义更新Upcoming标题的函数
  function updateUpcomingHash() {
    // 获取下一张幻灯片的水平、垂直、片段索引
    const nextIndices = Reveal.getIndices({ next: true });
    // 生成符合reveal.js规范的URL哈希
    const nextHash = `#/${nextIndices.h}/${nextIndices.v}/${nextIndices.f || 0}`;
    
    // 找到演讲者视图里的Upcoming标题元素
    const upcomingHeader = document.querySelector('.speaker-view .upcoming-container .header');
    if (upcomingHeader) {
      // 修改标题文本，拼接哈希内容
      upcomingHeader.textContent = `Upcoming ${nextHash}`;
    }
  }

  // 幻灯片切换时自动更新哈希
  Reveal.addEventListener('slidechanged', updateUpcomingHash);
  // 页面初始化完成后立即执行一次更新
  updateUpcomingHash();
});

补充说明 #

• Reveal.getIndices({ next: true }) 是reveal.js官方提供的API，可直接获取下一张幻灯片的位置参数
• 生成的哈希格式与reveal.js默认的URL哈希完全匹配（例如#/1/0/1）
• 若你的reveal.js版本较旧，DOM类名可能有细微差异，可通过浏览器开发者工具查看演讲者视图的结构，调整querySelector的选择器

内容的提问来源于stack exchange，提问作者rocky