Reveal.js – 从单张幻灯片中删除全局设置的页脚

Question

I'm making my first reveal.js presentation and have set a global footer in the body of the html file.我正在制作我的第一个 reveal.js 演示文稿，并在 html 文件的正文中设置了全局页脚。 I would like to remove the footer for a single slide, however, I cannot figure out how to do that.我想删除一张幻灯片的页脚，但是，我不知道该怎么做。

Below is my current file, with the footer at the end:下面是我当前的文件，最后是页脚：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>TITLE</title>

    <meta
      name="description"
      content="DESCRIPTION"
    />
    <meta name="author" content="MY NAME" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/black.css" id="theme" />
    
    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />


  </head>

  <body>
    <div class="reveal">

      <div class="slides">
        <section>
          <a href="https://example.com/">
            <img
              src="images/example.png"
              alt="Example logo"
              style="
                height: 360px;
                margin: 0 auto 4rem auto;
                background: transparent;
              "
              class="logo"
            />
          </a>
          <h4>Title of my presentation</h4>
          <p style="font-size: 30px">
            Subtitle
          </p>
        </section>
        
        <section>
          <section class="center">
              <h2>What goes here?</h2>
          </section>
          <section class="center">
              <p>Lorem ipsum dolor sit amet</p>
          </section>
          <section class="center">
            <pre>
              <code>
                Here is the code
              </code>
            </pre>
          </section>
        </section>
      </div>
    </div>


   <!-- Default plugins -->
    <script src="dist/reveal.js"></script>
    <script src="plugin/zoom/zoom.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/search/search.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>

<script>
      // Also available as an ES module, see:
      // https://revealjs.com/initialization/
      Reveal.initialize({
        controls: true,
        progress: true,
        center: true,
        hash: true,

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [
          RevealZoom,
          RevealNotes,
          RevealSearch,
          RevealMarkdown,
          RevealHighlight,
        ],
      });
    </script>

    <!-- 1. Create hidden footer <div> -->
    <div id="hidden" style="display:none;">
      <div id="footer">
          <div id="footer">Copyright 2022</div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
      // 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
      var footer = $('#footer').html();
      $('div.reveal').append(footer);
    </script>
    
  </body>
</html>

Any tips or suggestions would be greatly appreciated!任何提示或建议将不胜感激！

Answer 1

First, you have a comment that says首先，您有一条评论说

On Reveal.js ready event, copy footer在 Reveal.js 就绪事件中，复制页脚

but I can't see that in your code.但我在你的代码中看不到。 To me, it seems like a plain append.对我来说，它看起来像一个普通的 append。

Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:现在回答你的问题，你应该听slideChanged事件并在当前幻灯片是你不希望页脚的幻灯片时删除页脚：

Reveal.on( 'slidechanged', event => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. event.currentSlide是幻灯片的索引，所以你可以通过这种方式检索你想要的幻灯片。 Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...是的，它非常脆弱，因为如果幻灯片的索引发生变化，它就会破裂，但这是唯一的方法......

Reveal.js – 从单张幻灯片中删除全局设置的页脚

问题描述

1 个解决方案

解决方案1
0 2023-01-20 08:08:22

Reveal.js – 从单张幻灯片中删除全局设置的页脚

问题描述

1 个解决方案

解决方案1 0 2023-01-20 08:08:22

解决方案1
0 2023-01-20 08:08:22