Change the table of contents to an ordered list

I can print the contents to the screen using {{ .TableOfContents }} but it writes as <ul>. I want to write it as <ol>.

{{ .TableOfContents | replaceRE "<nav id=\"TableOfContents\">" "<nav id=\"toc\">" | safeHTML }}

For example, the id in the nav has been changed with replaceRE above and I want to do the same for <ul>.

1 Like

https://gohugo.io/getting-started/configuration-markup/#table-of-contents

2 Likes

Thanks

It would be nice if we could have a render template for TOCs so it was easy to modify the html output.

Found myself writing some css to target by element id yesterday, the first custom css I’ve written in a project I’ve been working on for a couple of weeks. Yuk.

My preferred output would drop the id, add a class and an aria-label attribute at a minimum, for improved semantics and UAT UX.

1 Like

I wonder if you can send me an example?

Of what I think the ideal html is for a TOC? Sure.

<nav aria-label="{{ i18n "tocHeading" }}">
  <ol>
    <li><a href="#heading-1">Heading 1</a>
    <li><a href="#heading-2">Heading 2</a>
    <li><a href="#heading-3">Heading 3</a>
  </ol>
</nav>

Thought typically I’d want to modify the html to affect the layout. E.g. What I would have liked to do yesterday:

<nav aria-label="{{ i18n "tocHeading" }}">
  <ol class="inline-flex gap list-none" role="list">
    <li><a href="#heading-1">Heading 1</a>
    <li><a href="#heading-2">Heading 2</a>
    <li><a href="#heading-3">Heading 3</a>
  </ol>
</nav>
1 Like

Instead of {{ .TableOfContents }} you can use {{ partial "custom-toc.html" . }}

An example partial might be:

I think nowadays this might be easier with .Fragments:

2 Likes

Absolutely. It just seems like this would be an ideal candidate for an internal template, inho.

3 Likes

Now that .Fragments exists that is true. I think long term the ‘internal’ templates might be better held as a separate repository. This would make it more obvious they were ‘just’ templates, make them easier to find, separate template maintenance from Hugo core, and make them easier to replace with one’s own versions.

In any event I think there is a general reluctance to adding new internal templates, and in fact a wish to reduce how many there are, with the feeling that some (many?) of the templates don’t really belong in core now, even though it made sense early in Hugo’s development.

I could be wrong on that though.

2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.