如何为Quarto RevealJS的TOC幻灯片添加背景图片？

方法1：用自定义JS脚本 #

自动生成的TOC幻灯片没法直接通过YAML配置背景，你可以写个简单的JS脚本，在幻灯片加载时给TOC幻灯片加上背景属性：

1. 新建一个toc-background.js文件，内容如下：

Reveal.on('ready', function() {
  // 自动生成的TOC一般是标题页之后的第二张幻灯片，对应索引1（从0开始计数）
  const tocSlide = document.querySelector('.reveal .slides > section:nth-child(2)');
  if (tocSlide) {
    // 替换成你的背景图片路径
    tocSlide.setAttribute('data-background-image', 'images/toc-bg.jpg');
    // 可选：设置背景尺寸、透明度等
    tocSlide.setAttribute('data-background-size', 'cover');
    tocSlide.setAttribute('data-background-opacity', '0.7');
  }
});

2. 在Quarto文档的YAML头部引入这个脚本：

---
title: "你的演示文稿标题"
format:
  revealjs:
    toc: true
    toc-depth: 2
    include-in-header:
      - file: toc-background.js
---

如果你的演示文稿里标题页之后还有手动加的幻灯片，就需要调整nth-child(2)的数字，确保选中的是TOC幻灯片。可以按F12打开开发者工具，查看幻灯片的结构，找到TOC对应的section元素。

方法2：手动写TOC幻灯片（替代自动生成） #

嫌JS麻烦的话，直接关掉自动TOC，自己写一张TOC幻灯片，这样就能直接设置背景：

1. YAML里关闭自动TOC：

---
title: "你的演示文稿标题"
format:
  revealjs:
    toc: false
---

2. 手动添加带背景的TOC幻灯片：

## 目录 {data-background-image="images/toc-bg.jpg" data-background-size="cover"}

::: {.toc}
* [第一部分](#section-1)
* [第二部分](#section-2)
* [第三部分](#section-3)
:::

这种方法更灵活，你还能自定义目录的内容、样式，完全掌控这张幻灯片的效果。

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