html - Rmarkdown中TOC上的图像徽标

我知道我可以在使用knitr和in_header/before_body选项呈现的HTML报告的顶部插入徽标或图像

output:
  html_document:
    includes:
      before_body: header.Rhtml

我的猜测是:如何在 float TOC上呈现徽标？

output:
  html_document:
    toc: true
    toc_float: true
    collapsed: false
    ??????

最佳答案

您在这里有几个选择，我将概述其中两个

1.使用CSS伪元素before

以下代码段将在第一个TOC元素上方和TOC框内添加stackoverflow徽标:

<style>
#TOC {
  background: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");
  background-size: contain;
  padding-top: 80px !important;
  background-repeat: no-repeat;
}
</style>

在这里，您将不得不根据徽标来调整padding-top的定义。结果看起来或多或少是这样的:



2.在TOC列中添加一个新的DOM元素

另一种方法是先使用jQuery，以添加将包含图像的新DOM元素:

<script>
  $(document).ready(function() {
    $('#TOC').parent().prepend('<div id=\"nav_logo\"><img src=\"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a\"></div>');
  });
</script>

在这里，当文档完成加载后，我们选择ID为TOC的元素，然后移至其父元素(列div)，然后在ID为div的图像之前添加一个新的nav_logo。听起来比实际要复杂得多。
现在，我们只需要再次使用一些CSS编辑该新div的样式即可:

<style>
#nav_logo {
  width: 100%;
  margin-top: 20px;
}
</style>

这里生成的文档如下所示:



有关CSS的详细信息，我将向您介绍大型搜索引擎，这些搜索引擎又很可能会将您引向https://www.w3schools.com。

如果必须选择，我将进行第二次尝试。伪元素在所有浏览器中并不总是可靠的。而且看起来也更好:)

关于html - Rmarkdown中TOC上的图像徽标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45834524/