如何确保Quarto制作的Reveal.js多片段幻灯片演讲笔记可见性

问题根源 #

默认情况下，Reveal.js的演讲笔记与幻灯片初始状态绑定，每次切换片段（包括增量列表项）时，笔记面板会被重置为当前幻灯片的初始笔记内容——这就是你的笔记会在切换第一个片段时消失的原因。

方案1：实现笔记按片段精准触发（理想需求） #

通过Reveal.js的片段事件监听，结合自定义JS控制笔记的显示/隐藏时机。

实现步骤 #

1. 给目标片段和笔记元素添加唯一ID标识
2. 监听fragmentshown/fragmenthidden事件，触发对应笔记的显示/隐藏
3. 初始将笔记设为隐藏状态，按需切换可见性

完整代码示例 #

---
title: "Fragment Notes Demo"
format: revealjs
revealjs:
  showNotes: "separate-page"
  include-in-header:
    - text: |
        <script>
        document.addEventListener('DOMContentLoaded', () => {
          // 片段显示时触发
          Reveal.addEventListener('fragmentshown', (e) => {
            switch(e.fragment.id) {
              case 'fragment-2':
                document.getElementById('note-1').style.display = 'block';
                break;
              case 'fragment-3':
                document.getElementById('note-2').style.display = 'block';
                break;
            }
          });

          // 片段隐藏时触发（控制笔记消失时机）
          Reveal.addEventListener('fragmenthidden', (e) => {
            if(e.fragment.id === 'text-2-fragment') {
              document.getElementById('note-1').style.display = 'none';
            }
          });
        });
        </script>
---

## Target Slide

TEXT 1

::: {.fragment #fragment-1}
Fragment 1 Content
:::

::: {.fragment #fragment-2}
Fragment 2 Content
:::

::: {.fragment #text-2-fragment}
TEXT 2
:::

::: {.fragment #fragment-3}
Fragment 3 Content
:::

::: {.incremental}
- list 1
- list 2
- list 3
:::

<!-- 演讲笔记：初始隐藏 -->
<aside class="notes" id="note-1" style="display:none;">
NOTE 1: 仅在fragment 2显示后出现，TEXT 2出现后隐藏
</aside>

<aside class="notes" id="note-2" style="display:none;">
NOTE 2: 仅在fragment 3显示后出现
</aside>

方案2：让笔记全程显示（退而求其次） #

如果不需要精准控制，只想让笔记在当前幻灯片全程可见，直到切换到下一张，用JS强制在片段切换时保留笔记内容。

代码示例 #

---
title: "Persistent Notes Demo"
format: revealjs
revealjs:
  showNotes: "separate-page"
  include-in-header:
    - text: |
        <script>
        document.addEventListener('DOMContentLoaded', () => {
          // 存储当前幻灯片的笔记内容
          const targetSlide = document.getElementById('persistent-note-slide');
          const slideNotes = targetSlide.querySelector('.notes').textContent;

          // 切换到目标幻灯片时设置笔记
          Reveal.addEventListener('slidechanged', (e) => {
            if(e.currentSlide.id === 'persistent-note-slide') {
              Reveal.setNotes(slideNotes);
            }
          });

          // 片段切换时重置笔记，防止被清空
          Reveal.addEventListener('fragmentchanged', () => {
            if(Reveal.getCurrentSlide().id === 'persistent-note-slide') {
              Reveal.setNotes(slideNotes);
            }
          });
        });
        </script>
---

## Persistent Notes Slide {#persistent-note-slide}

TEXT 1

::: {.fragment}
Fragment 1 Content
:::

::: {.incremental}
- list 1
- list 2
- list 3
:::

<aside class="notes">
NOTE 1: 全程可见，直到切换到下一张幻灯片
NOTE 2: 其他笔记内容
</aside>

关键注意事项 #

• 确保演讲笔记模式设为separate-page（单独窗口），内嵌模式（inline）的控制逻辑会更复杂
• 增量列表的每个项都是独立片段，切换时会触发fragmentchanged事件，必须在监听中处理
• Quarto 1.6.42完全兼容上述Reveal.js API，无需版本升级

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