Table Of Content HTML partial

Is it possible to customize the HTML markup of how the TOC renders? Currently, it only renders the anchor without the page’s permalink rendering this feature unusable.

I’ve tried making a render-link and a toc partial but that does not seem to produce what I want.

It would be great if we could range {{.TableOfContents}} and render it however we choose instead of hugo deciding how to render it.

I’m going to make this a feature request in the meantime if anyone knows how to accomplish this I would greatly appreciate any insight.


Just leaving this here in case anyone else is looking to solve this issue, here is how I fixed it using javascript.

// get all page headers

var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

// table of contents container typically a: <ul id=""toc"></ul>

var tableOfContents = document.querySelector("#toc");

// function to render TOC

function renderTOC () {
  var toc = [...headings].map(link => `<li>${link.innerHTML}</li>`).join('');
  return tableOfContents.innerHTML = toc;


And this is what my render-heading.html template looks like in order to fix proper anchor links:

<h{{ .Level }} id="{{ .Anchor | safeURL }}"><a href="{{.Page.URL}}#{{ .Anchor | safeURL }}" class="has-text-black">{{ .Text | safeHTML }}</a></h{{ .Level }}>

Hopefully, this will help others.