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 fileconfig\_default\params.toml
intoplugins_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("")
});