JS updates position of TOC for Rmarkdown file in blogdown

The TOC is rendered underneath when using blogdown 0.20 to write Rmarkdown file.

However, the current version of hugo academic theme is rendered TOC at the right hand side and always keep on the screen which would be more useful.

A simple solution is to adjust the position of TOC using js.

  • Update plugins_js in the configuration file config\_default\params.toml into plugins_js = [custom].
  • Create a custom.js under \assets\js\ folder.
  • Add the js script below into custom.js.
$(document).ready(function(){
	
	// Find TOC
	var toc = $("#TOC");
	if (toc.length === 0) {
	  return;
	}

	// Find sidebar
	var sidebar = $("div.flex-xl-nowrap>div.docs-toc")
	if (sidebar.length !== 1) {
	   return;
	}
	sidebar.append(toc.html());
	// Add new class
	$(sidebar).find("li").addClass("nav-item");
	$(sidebar).find("li.a").addClass("nav-link");
	toc.html("")
});
Bangyou Zheng
Bangyou Zheng
Data Scientist / Digital Agronomist

a research scientist of digital agriculture at the CSIRO.