如何在Quarto Reveal.js演示文稿中自动为幻灯片添加章节标题？

方法1：Lua过滤器（渲染阶段处理，推荐） #

创建一个名为add-section-title.lua的过滤器文件，内容如下：

local current_section = ""

-- 捕获二级章节标题
function Header(el)
  if el.level == 2 then
    current_section = el.content
  end
  return el
end

-- 为无标题幻灯片注入章节标题
function Div(el)
  if el.classes:includes("slide") then
    local has_title = false
    -- 检查幻灯片是否已有标题
    for _, child in ipairs(el.content) do
      if child.t == "Header" then
        has_title = true
        break
      end
    end
    -- 无标题则添加当前章节的二级标题
    if not has_title then
      table.insert(el.content, 1, pandoc.Header(2, current_section))
    end
  end
  return el
end

在你的Quarto文档中引入这个过滤器：

---
title: "Dummy title"
format: revealjs
slide-level: 2
filters:
  - add-section-title.lua
---

渲染后，所有属于某二级章节下的无标题幻灯片会自动带上该章节的标题，已有标题的幻灯片不受影响。

方法2：前端JavaScript脚本（运行时处理） #

如果不想用Lua过滤器，可通过自定义JS在页面加载后动态添加标题。在文档的YAML配置中添加：

---
title: "Dummy title"
format: revealjs
slide-level: 2
header-includes:
  - |
    <script>
    document.addEventListener('DOMContentLoaded', () => {
      let activeSectionTitle = '';
      // 遍历所有幻灯片节点
      document.querySelectorAll('.reveal .slides section').forEach(section => {
        const sectionHeader = section.querySelector('h2');
        // 更新当前章节标题（遇到二级标题幻灯片时）
        if (sectionHeader) {
          activeSectionTitle = sectionHeader.textContent;
        } else if (!section.querySelector('h2')) {
          // 为无标题幻灯片插入章节标题
          const newHeader = document.createElement('h2');
          newHeader.textContent = activeSectionTitle;
          section.prepend(newHeader);
        }
      });
    });
    </script>
---

这个脚本会在页面加载完成后，自动识别章节标题并为后续无标题幻灯片补上对应标题。

注意事项 #

• 两种方法都会跳过已有标题的幻灯片，避免重复添加
• Lua过滤器在渲染时生成带标题的HTML，适合需要静态输出的场景；JS脚本在前端动态处理，适合需要灵活调整的场景

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