如何将图像添加到四开 HTML 文档中目录的顶部

Question

如何在 Quarto html 文档的目录 (TOC) 上方添加图像？

我可以使用以下代码将图像添加到 Rmarkdown 报告中的目录 (TOC) 顶部：

<script>
  $(document).ready(function() {
    $('#TOC').parent().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>
#TOC { 
margin-top: 120px; <!-- toc top from page top -->
} 
#nav_logo {
  position: fixed; 
  width: 240px;
  margin-top: 10px;
}
</style>

产生这个： Rmarkdown 示例

但我无法在四开本中复制此内容。

Answer 1

幸运的是，Quarto 很大程度上基于 Rmarkdown。您可以使用此处提供的相同解决方案。至少不必指定导航栏，并且可能需要使用

background-size

参数以及不同的目录和图像布局。

---
title: "Untitled"
format: html
toc: true
toc-depth: 2
---
<style>
#TOC {
  background: url("logo.png");
  background-size: 50%;
  padding-top: 80px !important;
  background-repeat: no-repeat;
}
</style>
## Quarto
## Running Code