Quarto QMD转HTML：如何实现类似Hmisc的自动隐藏TOC功能？

针对Quarto QMD转HTML时无法使用Hmisc::hidingTOC()实现目录自动隐藏的问题，可以通过自定义CSS+JavaScript的方式实现类似效果，以下是具体方案：

1. 基础配置：开启浮动目录 #

首先在QMD文件的YAML头部启用浮动目录：

---
title: "My Quarto Document"
author: "My Name"
format:
  html:
    toc: true
    toc_float: true
    toc_depth: 5
---

2. 自定义隐藏/显示逻辑 #

将以下代码插入到QMD文件的任意位置（建议放在文档开头或结尾），实现目录初始隐藏、鼠标悬停/点击展开的效果：

方案A：悬停展开+点击固定 #

这种方案和hidingTOC的体验最接近，初始仅露出目录标题，悬停展开，点击标题可固定显示状态：

<style>
/* 初始隐藏目录主体，仅露出标题 */
#quarto-sidebar {
  transform: translateX(-85%);
  transition: transform 0.3s ease;
}

/* 悬停或激活时显示完整目录 */
#quarto-sidebar:hover,
#quarto-sidebar.toc-active {
  transform: translateX(0);
}

/* 调整标题区域宽度，方便点击触发 */
#quarto-sidebar .toc-title {
  width: 40px;
  margin-left: 85%;
  cursor: pointer;
  white-space: nowrap;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const sidebar = document.getElementById('quarto-sidebar');
  const tocTitle = sidebar.querySelector('.toc-title');
  
  // 点击标题切换显示状态
  tocTitle.addEventListener('click', () => {
    sidebar.classList.toggle('toc-active');
  });
});
</script>

方案B：完全隐藏+按钮触发 #

如果需要默认完全隐藏目录，仅通过按钮触发展开，可以使用这个版本：

<style>
/* 默认完全隐藏目录 */
#quarto-sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

/* 激活时显示目录 */
#quarto-sidebar.toc-active {
  transform: translateX(0);
}

/* 添加侧边触发按钮 */
#quarto-sidebar::before {
  content: "☰";
  position: absolute;
  right: -32px;
  top: 10px;
  width: 30px;
  height: 30px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0 4px 4px 0;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const sidebar = document.getElementById('quarto-sidebar');
  
  // 点击触发按钮切换显示
  sidebar.addEventListener('click', (e) => {
    if (e.target === sidebar || getComputedStyle(e.target).content === '"☰"') {
      sidebar.classList.toggle('toc-active');
    }
  });
});
</script>

效果说明 #

• 两种方案都通过CSS的transform实现平滑过渡动画
• 方案A更适合需要快速访问目录的场景，悬停即可展开
• 方案B适合需要最大化页面内容展示空间的场景

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