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

Question

我正在制作我的第一个 reveal.js 演示文稿，并在 html 文件的正文中设置了全局页脚。 我想删除一张幻灯片的页脚，但是，我不知道该怎么做。

下面是我当前的文件，最后是页脚：


<!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>

任何提示或建议将不胜感激！

Answer 1

首先，您有一条评论说

在 Reveal.js 就绪事件中，复制页脚

但我在你的代码中看不到。 对我来说，它看起来像一个普通的 append。

现在回答你的问题，你应该听slideChanged事件并在当前幻灯片是你不希望页脚的幻灯片时删除页脚：

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

event.currentSlide是幻灯片的索引，所以你可以通过这种方式检索你想要的幻灯片。 是的，它非常脆弱，因为如果幻灯片的索引发生变化，它就会破裂，但这是唯一的方法......

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