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

?longDuration

如果网址未以notShownInPDFOutput结尾

?print-pdf

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

Answer 1

请找到解决方案。

var url = document.location.href;

if (url.match("?longDuration$")) { // ends with
  $('#notShownInShortPresentation').show();
} else {
  $('#notShownInShortPresentation').hide();
}

// doesnt ends with
if (!url.match("?print-pdf$")) {
  $('#notShownInPDFOutput').show();
} else {
  $('#notShownInPDFOutput').hide();
}

你也可以尝试下面的原型

if (typeof String.prototype.endsWith !== 'function') {
    String.prototype.endsWith = function(suffix) {
        return this.indexOf(suffix, this.length - suffix.length) !== -1;
    };
}

e.g。 myString.endsWith（ '世界'）

Answer 2

从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();
                    }
                }
            })
        });
    }
);

在Reveal.initialize()的{{1}}之前插入。

Reveal.js：有条件地显示幻灯片

2 个答案: