Rmarkdown 中 TOC 上的图像徽标

Question

I know I can insert a logo or image at the top of HTML report rendered using knitr with in_header/before_body options

output:
  html_document:
    includes:
      before_body: header.Rhtml

My guess is: how to render logo over floating TOC?

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

Answer 1

You got a few options here and I will outline two of them

1. Use the CSS pseudo element before

The following snippet will add the stackoverflow logo just above the first TOC element and within the TOC box:

<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>

Here you will have to adjust the padding-top definition depending on your logo. The result looks more or less like this:

2. Add a new DOM element inside the TOC column

Another way is to use jQuery first in order to add a new DOM element that will contain the image:

<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>

Here, when the document has finished loading, we select the element with the id TOC , then move up to its parent element (the column div ) and then prepend a new div with the id nav_logo containing the image. Sounds more complicated than it actually is. Now we only have to edit the styles for this new div with some CSS again:

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

Here the resulting document looks like this:

For details on CSS I would refer you to the big search engines which in turn will most probably refer you to https://www.w3schools.com .

If I would have to pick, I would go with the second attempt. Pseudo elements are not always reliable across browsers. And it also looks better :)

Answer 2

To enable a logo that floats with TOC during scrolling in solution (#2) from @Martin Schmelzer prepend nav_logo DOM element containing the image to TOC using jQuery:

<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>

And then add position: fixed to nav_logo and margin-top: 100px to TOC in CSS:

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

Adjust nav_logo width as necessary.