JS updates position of TOC for Rmarkdown file in blogdown
The TOC is rendered underneath when using blogdown 0.20 to write Rmarkdown file.
![](/post/blogdown-toc/blogdown-toc_hua216ac7b64afdad5690ead684f29ea0b_10494_7eb8d70f3b2497033656eceba5d0373e.webp)
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.
![](/post/blogdown-toc/hugo-toc_hue4bb7d9d05298defed048b01c54365c3_12051_3aebce4fa08029e9cfc914c6a5970699.webp)
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("")
});