使用 Reveal.js 运行演示文稿时是否可以添加/删除幻灯片？准确地说，是否有一个 API 可以实现这一点，或者可能有一些肮脏的解决方法？
我对即将到来的项目也对此感到好奇；环顾四周，找不到任何东西，所以我为自己的项目写了一些东西，附加在最后。在当前幻灯片之后添加幻灯片非常简单。只需将一个部分元素附加到“.slides”，并确保该部分具有“future”类。另外，如果您在最后一张幻灯片上，则需要将类“enabled”添加到“.navigate-right”。在当前幻灯片之前添加某些内容会弄乱编号，因此您需要使用类“past”添加它，然后移至下一张幻灯片。
删除幻灯片也是如此，如果您删除“.past”幻灯片，则会弄乱您的编号。我还没有很好地测试我的代码，所以如果你按原样使用它，就可以很好地测试。
Reveal.addEventListener( 'ready', function( event ) {
Reveal.add = function( content = '',index = -1 ){
dom = {},
dom.slides = document.querySelector( '.reveal .slides' );
var newSlide = document.createElement( 'section' );
if( index === -1 ) { //adding slide to end
newSlide.classList.add( 'future' );
dom.slides.appendChild(newSlide);
document.querySelector( '.navigate-right' ).classList.add( 'enabled' ); //just enable it, even if it is
} else if( index > Reveal.getIndices().h ) {
newSlide.classList.add( 'future' );
dom.slides.insertBefore(newSlide,dom.slides.querySelectorAll('section:nth-child('+(index+1)+')')[0]);
} else if( index <= Reveal.getIndices().h ) {
newSlide.classList.add( 'past' );
dom.slides.insertBefore(newSlide,dom.slides.querySelectorAll('section:nth-child('+(index+1)+')')[0]);
Reveal.next();
}
newSlide.innerHTML = content;
};
Reveal.remove = function( index = -1 ){
dom = {},
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
var target = (dom.wrapper.querySelectorAll('.slides > section:nth-child('+(index+1)+')')[0]) ? dom.wrapper.querySelectorAll('.slides > section:nth-child('+(index+1)+')')[0] : false;
if( index === -1 ) {
if (Reveal.isLastSlide()) Reveal.prev();
dom.slides.removeChild(dom.wrapper.querySelectorAll('.slides > section')[dom.wrapper.querySelectorAll('.slides > section').length-1]);
if (Reveal.isLastSlide()) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' );
} else if( index > Reveal.getIndices().h && target ) {
dom.slides.removeChild(target);
if (Reveal.getIndices().h == dom.wrapper.querySelectorAll('.slides > section').length-1) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' );
} else if( index < Reveal.getIndices().h && target ) {
dom.slides.removeChild(target);
location.hash = '/'+parseInt(Reveal.getIndices().h-1);
} else if( index == Reveal.getIndices().h && target ) {
if (index == 0) {
Reveal.next();
document.querySelector( '.navigate-left' ).classList.remove( 'enabled' );
} else Reveal.prev();
dom.slides.removeChild(target);
if( dom.wrapper.querySelectorAll('.slides > section').length == index) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' );
}
};
} );
如果你想使用它，请在 Reveal.initialize({...}); 之后添加它
使用 Reveal.add(content,index) 或 Reveal.remove(index) 调用它。
Reveal.add('<h3>Slide title</h3>')
将其添加为最后一张幻灯片，
Reveal.add('<h3>Slide title</h3>',0)
一开始。
Reveal.add('<h3>Slide title</h3>',3)
将其添加到第三个位置。
Reveal.remove() 删除最后一张幻灯片，Reveal.remove(n) 删除任何其他幻灯片（如果存在）。
Reveal.sync()您可以动态删除幻灯片。
这是完整的示例：CollaboFramework
这是删除所有幻灯片的示例：
var presentation = $('#presentation');
var slides = $('#presentation .slides');
slides.empty();
// slide 1
var section = $("<section></section>");
slides.append(section);
section.attr('data-markdown', '');
var script = $("<script></script>");
section.append(script);
script.attr('type', 'text/template');
var slideContent =
"and here is the image\r\n" +
"<img src='https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/flower-887443_960_720.jpg' width='200px' height='200px'>\r\n" +
"and here is the list\r\n" +
"+ hopa\r\n" +
"+ cupa\r\n" +
"+ and some intended links\r\n" +
" + [CS link](http://www.CollaboScience.com)\r\n" +
" + [CA link](http://www.CollaboArte.com)\r\n" +
" + [CF link](https://github.com/Cha-OS/KnAllEdge/)\r\n";
script.html(slideContent);
这是一个 Markdown 幻灯片，但它与 HTML 类似，在这里您可以进行 通用幻灯片创建
当然，在真正的 github 代码中，您会发现在确认任务完成（使用回调）之前提供一些延迟来等待标签创建是有意义的。
最后需要更新Reveal，Markdown插件重新渲染的部分就是使用
Reveal.sync()这将为您完成所有课堂杂耍，重新计算幻灯片编号等。唯一重要的事情是做
Reveal.slide(0)我的解决方法是：
使用空的
sectionHTML
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section id="blank"></section><!-- Blank slug -->
</div>
</div>
Javascript
Reveal.initialize();
//slide deck wrapper
deck = $('#blank').parent();
存储此标签，然后将其从 DOM 中删除。
// a blank is initialized and stored as a variable
wrap = $('#blank').clone()
.attr('id',null)
.prop('outerHTML');
// remove the blank
$('#blank').remove();
最后，一个新元素被添加到甲板上并包装在空标签中。
$('<h1>Slide added</h1>').appendTo(deck)
.wrap( wrap );
这是一个演示。我还没有尝试过这种技术与任何复杂的配置，但对于一个简单的演示来说这已经足够了。
我使用 Michael Pelikan 的 Reveal-add-remove.js 插件和几个 HTML 锚点来启动 javascript。我可以并行编辑 Slides.md 文件，然后将其添加到正在运行的演示文稿中。
<a href="javascript:
/* Add a new blank slide */
Reveal.add ( '', 2, 'NewSlideID' );
/* Get the Id of the new slide (add function does not return a reference) */
var newSlides = document.getElementById('NewSlideID');
/* Link blank slide to content in an external file */
newSlides.setAttribute( 'data-markdown', '/path/to/new/Slides.md');
/* Force markdown plugin to update */
Reveal.getPlugin('markdown').init(Reveal);
">Add New Slides</a>
我添加了一个单独的链接，因为 Markdown 插件需要时间来加载文件。
<a href="javascript:Reveal.sync();">Sync (Updates background pictures)</a>