如何在Quarto制作的RevealJs幻灯片中自定义TOC显示位置？

要将TOC放在任意指定幻灯片而非默认的标题页之后，有两种简单直接的实现方式：

方法一：禁用自动TOC，手动插入自定义TOC #

这是最灵活的方式，能完全掌控TOC的展示位置：

1. 在YAML头部禁用默认自动生成的TOC
   在幻灯片配置中设置toc: false，关闭默认紧跟标题页的TOC：

   ---
   title: "演示幻灯片"
   format:
     revealjs:
       toc: false  # 关闭默认自动TOC
       toc-depth: 2  # 可选：设置TOC显示的标题层级，比如只显示h2和h3
   ---
   

2. 在目标幻灯片插入TOC
   找到你想要展示TOC的幻灯片位置，添加标题并使用.toc-content类标记，Quarto会自动生成对应层级的目录：

   ## 目录 {.toc-content}
   

   如果希望默认折叠TOC，点击后展开，可以额外添加.collapsed类：

   ## 目录 {.toc-content .collapsed}
   

方法二：保留默认TOC结构，调整显示位置（进阶） #

如果你想复用默认TOC的样式逻辑但调整位置，可通过自定义JavaScript实现，但相对复杂：

1. 先在YAML中禁用默认TOC：toc: false
2. 在幻灯片末尾添加自定义脚本，手动生成TOC并插入到指定幻灯片：

   ```{=html}
   <script>
     // 等待Reveal.js初始化完成
     Reveal.addEventListener('ready', function() {
       // 获取目标幻灯片（示例为第3张，索引从0开始）
       const targetSlide = document.querySelectorAll('.reveal .slides section')[2];
       // 生成匹配Quarto样式的TOC元素
       const toc = document.createElement('div');
       toc.className = 'toc-content';
       toc.innerHTML = document.querySelector('.quarto-toc').innerHTML;
       // 将TOC插入目标幻灯片
       targetSlide.appendChild(toc);
     });
   </script>
   

   注意：这种方式需要配合`toc: true`后用CSS隐藏默认TOC，操作繁琐，优先推荐方法一。
   
   

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