所有幻灯片上的 Quarto RevealJS 标题答案

【问题标题】：Quarto RevealJS Header on all slides所有幻灯片上的 Quarto RevealJS 标题
【发布时间】：2023-01-28 15:01:12
【问题描述】：

我无法在所有幻灯片（包括标题幻灯片）的左上角创建页眉。我使用format: revealjs 制作幻灯片。

当只使用revealjs，没有Quarto时，我可以在div class="reveal"中嵌入自定义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;
}

我无法在 Quarto 中复制它，因为一旦我渲染了 .qmd 文件，html 文件就被修改了。我也不知道这个“标题”是否可以嵌入.qmd 文件的标题参数中。

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

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

【问题讨论】：

您能否提供您为四开本尝试过的代码，以便这里的人们可以工作并测试它并帮助您？！ :)

标签： html css reveal.js quarto

【解决方案1】：

更新：我已经编写了一个四开过滤器扩展 reveal-header 以在 yaml 中使用 header 选项在所有幻灯片上添加标题，因此无需像下面这样显式地使用 html 文件包含。

旧答案

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

四开本_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>

标题.css

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

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

【讨论】：