asciidoctor-html5s icon indicating copy to clipboard operation
asciidoctor-html5s copied to clipboard

Table of contents not working with Hugo

Open FunctionalHacker opened this issue 1 year ago • 0 comments

I recently started to use this to build my Hugo site with this. As I understand it, Hugo parses the outputted HTML to get the table of contents and excludes it from the HTML. It is extracted to a variable so that themes can make more better use out of it.

After switching to the html5s backend, I noticed the toc is printed on integrate into third-party projectsthe page itself and it seems that Hugo is not able to parse it from the HTML. I suspect Hugo expects to find the toc in some specific type of an element and the way html5s outputs it is not compatible.

Output from stock html5 backend

<div id="toc" class="toc">
  <div id="toctitle">Table of Contents</div>
  <ul class="sectlevel1">
    <li><a href="#_note">Note!</a></li>
    <li><a href="#_support">Support</a></li>
    <li><a href="#_usage">Usage</a></li>
  </ul>
</div>

Output from html5s backend

<nav id="toc" class="toc" role="doc-toc">
  <h2 id="toc-title">Table of Contents</h2>
  <ol class="toc-list level-1">
    <li><a href="#_note">Note!</a></li>
    <li><a href="#_support">Support</a></li>
    <li><a href="#_usage">Usage</a></li>
  </ol>
</nav>

Now, I'm not sure wether this is a Hugo issue or what but I thought I'd start here since one of the goals of the project is to integrate into third-party projects. I'm hoping to find some kind of configuration that allows Hugo to get the toc from the output of html5s.

FunctionalHacker avatar Feb 03 '24 17:02 FunctionalHacker