html - 所有幻灯片上的 Quarto RevealJS 标题

Question

我无法在所有幻灯片(包括标题幻灯片)的左上角创建页眉。我正在为幻灯片使用 format: revealjs。

当纯粹使用 revealjs 时，没有 Quarto，我可以在 div class="中嵌入自定义 div 类 header揭示”。但是，我不能在 Quarto 框架内这样做，因为在 HTML 中呈现任何自定义条目会删除自定义条目。

有什么建议吗？请谢谢!

注意:我知道页脚选项并且我已经将页脚用于其他用途，现在我需要页眉。

---

在纯粹的 Reveal.JS 中，我使用了嵌入在 index.html 中的以下内容:

<div class="reveal">
    <div class="header">
        <section data-markdown="slides/header.md"></section>
    </div>
    <!-- slides in markdown here-->
</div>

我的 slides/header.md 中有以下内容:

Custom header text appears on top left corner of all slides..

为了出现在所有幻灯片的左上角，我在 reveal.scss 中嵌入了以下 CSS:

.reveal .header {
    position: absolute;
    top: 1em;
    left: 1em;
    font-size: 0.7em;
}

鉴于 html 文件在我呈现 .qmd 文件后被修改，我无法在 Quarto 中复制它。我也不知道这个“标题”是否可以嵌入到 .qmd 文件的标题参数中。

目前，我在 .qmd 文件中使用以下内容生成页脚:

format:
    revealjs:
        ...
        footer: "custom footer text"

Answer 1

您可以编写 javascript 代码以在类 reveal 的 div 中插入自定义 div。在 html 文件中，然后使用 include-after-body 在 quarto 文件中引用该 html 文件yaml key 。

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;
}

---

---