[Resolved] .TableOfContents variables displays an extra bullet point

support
1

I have added the .TableOfContent variable to my single page template as follows:

<div id="toc" class="well col-md-4 col-sm-6">
    {{ .TableOfContents }}
</div>

One the page TOC list seems to be nested inside an extra <li> element. eg:

http://via.softinio.com/Screen-Shot-2015-12-17-08-24-03

Why is this? Any suggestions to correct this and get rid of the extra bullet point?

Thanks for your help everyone.

2

Seems to be a css styling issue so might be an idea to delete this post

Thanks

3

Hey @softinio. Might be a good idea to edit the title of this topic to include a [Resolved] or other denoter.

4

I encountered the same behavior and itā€™s not a styling issue. My source Markdown only contains H2's (##'s), and the only H1 is inserted by my single.html layout. The extra, empty bullet is for the ā€œmissingā€ H1.

It would be nice if you could parameterize TableofContents to indicate what section level headings to consider. For example, the Kramdown converter has a macro that provides this kind of configuration (http://kramdown.gettalong.org/converter/html.html#option-toc-levels).

2 Likes
5

This definitely isnā€™t resolved and itā€™s by design too.

You can see the addition of the Markdown TableOfContents support here:

https://github.com/gohugoio/hugo/commit/f62e3e9940fafb89f88e0ee6b8987b89bbfd281e#diff-9353bd4960d7694b1870604fd77a450b

In particular see the expected output:

expected := `<nav>
<ul>
<li>
<ul>
<li><a href="#toc_0">AA</a>
<ul>
<li><a href="#toc_1">AAA</a></li>
</ul></li>
<li><a href="#toc_2">BB</a>
<ul>
<li><a href="#toc_3">BBB</a></li>
</ul></li>
</ul></li>
</ul>
</nav>

That test is now here: page_test.go#L807

Question: Why was it designed like that? As has already been pointed out, this places the table of contents inside the single li of an outer table which looks strange to say the least.

6

@neeklamy I agree that the html output for the TOC is a bit weird.

Maybe @bep knows something or maybe he doesnā€™t since this is from ages ago.

But this doesnā€™t seem too hard to fix IMO. Why donā€™t you just send a PR on Github?

If you do, then also post the PR link over here, so I can upvote it.

7

This is discussed in endless variations, and the real solution is to provide a proper TOC data structure, so the end user can do whatever he/she wants with it. But since the TOC comes as raw HTML as part of the rendered output from Blackfriday, this is harder than it sounds.

8

Yes, I see the code for this is in blackfridayā€™s html.go#L754.

Thank you for the vote of confidence, @alexandros, but Iā€™m both new to Go and Hugo, and I wouldnā€™t know what knock on effect me messing around would have.

@bep, I see thereā€™s this PR for blackfriday, ā€˜Add the ability to simply extract the ToC in Markdown formatā€™, is that the kind of thing you mean?

9

No, I was thinking more like ā€œGet the TOC as some kind of treeā€, i.e. format neutral data structure you then could range over in a template.

2 Likes
10

This would be very helpful in my case. Should I open an issue for this or falls it under the customise the template of .TableOfContents issue.

Perhaps with the upgrade to BlackFriday v2 issue this might become possible (or at least easier)?