Html 所有幻灯片上的 Quarto RevealJS 标题

您可以编写脚本代码，将定制div插入到html文件中类为reveal的div中，然后使用include-after-body YAML键在Quarto文件中引用该html文件.

quarto_revealjs.qmd个

---
title: "Untitled"
format: revealjs
css: header.css
include-after-body: header_text.html
---


## Quarto

Quarto enables you to weave together content and executable code into a
finished presentation. To learn more about Quarto presentations see
<https://quarto.org/docs/presentations/>.

## Bullets

When you click the **Render** button a document will be generated that
includes:

-   Content authored with markdown
-   Output from executable code

header_text.html个

在这个文件中，我们为要放在类为reveal的div中的div编写html代码，然后使用js代码将该div元素作为类为reveal的div的第一个子元素插入.

<div class="header">
    <section>
      Custom header text appears on top left corner of all slides..
    </section>
</div>

<script>
  function add_header() {
    let header = document.querySelector("div.header");
    let reveal = document.querySelector(".reveal");
    reveal.insertBefore(header, reveal.firstChild);
  }
  
  window.onload = add_header();
</script>

header.css个

.reveal .header {
    position: absolute;
    top: 0.3em;
    left: 1em;
    font-size: 0.5em;
    color: gray;
}

.reveal .slides {
  margin-top: 0.5em;
}