如何在Quarto HTML文档的目录（TOC）顶部添加图片？

AI 小北

2026-6-19

Quarto HTML文档侧边栏目录顶部添加图片的解决方案

问题根源

Quarto HTML的侧边栏DOM结构和Rmarkdown完全不同：原代码依赖的#TOC元素在Quarto里被包裹在#quarto-sidebar容器内，且默认不加载jQuery，导致原脚本无法定位到目标元素。

可行解决方案

方案1：原生JavaScript实现（推荐，无需额外依赖）

直接适配Quarto的侧边栏结构编写脚本，同时调整样式：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const sidebar = document.querySelector('#quarto-sidebar');
  if (sidebar) {
    const navLogo = document.createElement('div');
    navLogo.id = 'nav_logo';
    const img = document.createElement('img');
    img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Posit_logo.svg/640px-Posit_logo.svg.png';
    navLogo.appendChild(img);
    sidebar.insertBefore(navLogo, sidebar.firstChild);
  }
});
</script>

<style>
#quarto-sidebar .toc {
  margin-top: 120px; /* 为顶部图片预留空间 */
}
#nav_logo {
  position: fixed;
  width: 240px;
  margin-top: 10px;
  padding-left: 15px; /* 与侧边栏内容对齐 */
}
#nav_logo img {
  width: 100%; /* 确保图片自适应容器宽度 */
}
</style>

方案2：兼容jQuery版本（若文档已加载jQuery）

如果你的Quarto文档手动引入了jQuery，可修改选择器适配结构：

<script>
$(document).ready(function() {
  $('#quarto-sidebar').prepend('<div id="nav_logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Posit_logo.svg/640px-Posit_logo.svg.png"></div>');
});
</script>

<style>
#quarto-sidebar .toc {
  margin-top: 120px;
}
#nav_logo {
  position: fixed;
  width: 240px;
  margin-top: 10px;
  padding-left: 15px;
}
#nav_logo img {
  width: 100%;
}
</style>