How to make floating table of contents work using the loveit theme with blogdown

Question

I'm building a blog with dillonzq/loveit theme in conjunction with R's blogdown package. The loveit theme has a really cool floating table of contents. It looks like this

and you can see an example of it in action here. Unfortunately I can't get this to play nicely with .Rmd files rendered by blogdown. I can, however, get it to work with .md files.

Minimal Reproducible Example

1. Set up a new site with the loveit theme

blogdown::new_site(theme = "dillonzq/LoveIt")

2. Make two very similar posts, where one is a .Rmd and the other a .md.

content/posts/test_Rmd.Rmd

---
title: "Test Rmd"
author: "John Johnson"
---

## Something cool
Here' something cool

### Details
Here are some details

## Something cooler
Here's something cooler

content/posts/test_md.md

---
title: "Test md"
author: "John Johnson"
---

## Something cool
Here' something cool

### Details
Here are some details

## Something cooler
Here's something cooler

3. Launch the site with blogdown::serve_site(), then compare http://127.0.0.1:4797/test_md/ and http://127.0.0.1:4797/test_rmd/.

The .md version works (note the source code)

and the .Rmd version doesn't work.

Attempted Solutions

I've tried setting

output:
  blogdown::html_page:
    toc: true

in the front matter of my .Rmd. This creates a table of contents, but not the pretty, floating toc as in the loveit theme. I've also tried tinkering with the toc related variables in config.toml but to no avail.

I see where the loveit theme generates a table of contents in the template posts/single.html but I don't understand why this doesn't play nicely with blogdown. Any help would be much appreciated!

Answer 1

Apparently, the problem comes from the HTML file created by the .Rmd file. There are two options to deal with this.

1) Keep the .md file

You can add the option keep_md: true in the YAML. Therefore, the file test_rmd.Rmd now looks like that:

---
title: "Test Rmd"
author: "John Johnson"
output: 
  html_document:
    keep_md: true
---
  
## Something cool
Here' something cool

### Details
Here are some details  

## Something cooler
Here's something cooler 

However, blogdown::serve_site() does not actually compile the .Rmd file. Therefore, you need to knit it to generate the .md file before using blogdown::serve_site(). Apparently, for some reason that I don't understand, .md files have the priority when using blogdown::serve_site(), and the HTML file generated is therefore useless.

2) Replace .Rmd by .Rmarkdown

Again, for a reason that I don't understand, using .Rmarkdown extension instead of .Rmd solves the problem. However, these two extensions have different capacities, that are detailed here.