在使用reveal.js进行演示时，是否可以在演示运行时添加/删除幻灯片？具体来说，是否有API可以实现此功能或者有什么“不正当”的解决方法？
4个回答
12
我也对这个问题感到好奇，因为有一个即将开始的项目。我搜索了一下，没有找到任何有用的信息，于是我为自己的项目写了一些内容，并附在结尾处。在当前幻灯片后添加一个幻灯片非常简单。只需将
如果您删除了一个“.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.add('<h3>Slide title</h3>')
我会将其添加为最后一张幻灯片。
Reveal.add('<h3>Slide title</h3>',0)
一开始。
Reveal.add('<h3>Slide title</h3>',3)
我会将它添加到第三个位置。
Reveal.remove() 会移除最后一个幻灯片，Reveal.remove(n) 会移除其他位置的幻灯片（如果存在）。
- Mason
4
2
"Reveal.sync()是王者。您可以动态地删除幻灯片。以下是完整示例：CollaboFramework。这是一个删除所有幻灯片的示例："
这是一个关于添加新幻灯片的示例。
这是一个Markdown幻灯片，但HTML也类似，这里有创建通用幻灯片的方式。
当然，在真正的Github代码中，提供一些延迟等待标签被创建才确认任务完成（使用回调）是有意义的。
最后，你需要更新Reveal，这除了使用Markdown插件重新渲染之外，还要使用
这将为你完成所有的class操作，重新计算幻灯片数量等。唯一重要的另一件事情是执行
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()。这将为你完成所有的class操作，重新计算幻灯片数量等。唯一重要的另一件事情是执行
Reveal.slide(0)，以确保你不会在第5张幻灯片中看到第7张幻灯片的内容：）如果你删除了2张幻灯片的话就可能会发生这种情况。- mPrinC
0
我的解决方法是:
用一个空的section标签初始化reveal。HTML
```
Javascript
``` Reveal.initialize();
//slide deck wrapper deck = $('#blank').parent(); ```
将此标记存储，然后将其从DOM中删除。
``` // 初始化并将空白存储为变量 wrap = $('#blank').clone() .attr('id',null) .prop('outerHTML'); // 删除空白 $('#blank').remove(); ```
最后，在deck中添加一个新元素，并将其包装在空标签中。
``` $('<h1>Slide added</h1>').appendTo(deck) .wrap( wrap ); ```
这里有一个演示。我还没有尝试过在任何复杂的配置中使用这种技术，但对于简单的演示来说，这已经足够了。
- Tony Fast
0
我使用了Michael Pelikan的reveal-add-remove.js插件，以及一些HTML锚点来启动javascript。我可以同时编辑Slides.md文件，然后将其添加到正在运行的演示文稿中。
我添加了一个单独的链接，因为Markdown插件需要时间来加载文件。
<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>
- David Clarke
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
this.sync();。这会让 reveal.js 更新所有内部内容，包括背景等。 - Michael Pelikan