如何在Quarto RevealJS所有幻灯片（含标题页）添加左上角页眉？

要在Quarto的RevealJS幻灯片中实现全局左上角页眉（包括标题页），可以通过注入自定义HTML/CSS/JavaScript的方式实现，绕过Quarto对渲染结构的限制，具体方案如下：

方案一：通过include-in-header注入全局页眉 #

这个方法利用Quarto的include-in-header配置，将自定义的页眉结构、样式和插入逻辑注入到页面中，确保页眉被添加到.reveal容器内。

步骤1：创建注入文件 #

新建一个名为header-inject.html的文件，内容如下：

<!-- 页眉样式 -->
<style>
.reveal .header {
    position: absolute;
    top: 1em;
    left: 1em;
    font-size: 0.7em;
    z-index: 100; /* 确保页眉显示在幻灯片内容上方 */
    margin: 0;
}
</style>

<!-- 动态插入页眉的脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 创建页眉容器
    const headerDiv = document.createElement('div');
    headerDiv.className = 'header';

    // 方式1：直接写入页眉内容
    headerDiv.innerHTML = '<p>Custom header text appears on top left corner of all slides..</p>';

    // 方式2：从外部md文件加载内容（如果需要复用页眉内容）
    // fetch('slides/header.md')
    //     .then(res => res.text())
    //     .then(text => {
    //         // 利用Reveal的Markdown解析器转换内容
    //         if (window.RevealMarkdown) {
    //             RevealMarkdown.parse(text, headerDiv);
    //         } else {
    //             headerDiv.textContent = text;
    //         }
    //     });

    // 将页眉插入到Reveal容器的最顶部
    const revealContainer = document.querySelector('.reveal');
    if (revealContainer) {
        revealContainer.insertBefore(headerDiv, revealContainer.firstChild);
    }
});
</script>

步骤2：在.qmd文件中配置注入 #

在你的Quarto幻灯片文件（.qmd）的YAML头部添加include-in-header配置：

---
title: "你的幻灯片标题"
format:
  revealjs:
    footer: "custom footer text"
    include-in-header: header-inject.html
---

方案说明 #

• 为什么这个方法有效：Quarto的include-in-header会将指定文件的内容插入到最终HTML的<head>标签中，通过JavaScript在页面加载完成后动态创建页眉元素并插入到.reveal容器内，避免了Quarto渲染时对自定义HTML的清理。
• 样式适配：z-index:100确保页眉不会被幻灯片内容遮挡，你可以根据需要调整top、left、font-size等参数。
• 外部MD加载：如果你的页眉内容需要单独维护（比如slides/header.md），可以取消注释脚本中的fetch逻辑，注意路径要和最终渲染的HTML文件相对应。

内容的提问来源于stack exchange，提问作者fobik35911