javascript - Reveal.js:有条件地显示幻灯片

Question

假设我有这个reveal.js代码:

<section>
    <p>A: Introduction</p>
</section>
<section>
    <p>B: This slide takes 30 minutes to explain.</p>
</section>
<section class="notShownInShortPresentation">
    <p>C: This slide takes 2 hours to explain.</p>
</section>
<section>
    <p>D: Conclusion</p>
</section>
<section class="notShownInPDFOutput">
    <p>E: Click here to print this deck to PDF.</p>
</section>

幻灯片 C 和 E 应有条件地显示:

• 显示notShownInShortPresentation如果 URL 以 ?longDuration 结尾

• 显示notShownInPDFOutput如果 URL 不以 ?print-pdf 结尾

这可能吗？如果我添加 style="visilibity: hidden;"在<section>上，该幻灯片并没有消失，它只是空的。

Answer 1

从 PDF 中删除幻灯片的方法不是很优雅但有效:

Reveal.addEventListener('ready', () => {
        Reveal.getSlides().forEach(slide => {
            slide.classList.forEach(className => {
                if (className === 'notShownInPDFOutput') {
                    if (window.location.search.match( /print-pdf/gi )) {
                        slide.remove();
                    }
                }
            })
        });
    }
);

在 index.html 中的 Reveal.initialize() 之前插入。