Turn off Table of Content generation

#1

Hi, I’m on hugo v0.31.1. I notice that if I use {{ .Content }} in my template, the corresponding to .TableOfContents gets generated in the output by default. Is there any way to turn this off?

0 Likes

#2

You can exclude it from your templates, but I don’t think it is possible to turn off the generation.

0 Likes

#3

Im really perplexed, my template is like this:

<div class="row">                                                                     
  <div class="col">
    <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">{{ .Title | safeHTML }}</h2>
        <p class="post-meta">
          <time datetime="{{ .Date }}" itemprop="datePublished">
            {{ .Date | dateFormat "Monday, Jan 2, 2006" }}
          </time>
        </p>  
      </header>

      <div class="post-content" itemprop="articleBody">
        {{ .Content }}
      </div>

    </article>
  </div>
</div>

I don’t use TableOfContents anywhere.

0 Likes

#4

You have one template?

The thing is, a Hugo project contains more than one file. Showin us a small snippet of it does not help us debug it.

0 Likes

#5

Yes, I understand the concern that I haven’t narrowed the problem down to this one template file.

I stripped my set up into a bare minimal repo and the issue is still happening - you can see it here.

There is only 2 layouts(a baseof.html, and a single.html). There is only one content file(content/blog/sometest.md) The page in question that gets generated is at (public/blog/sometest/index.html), and the nav links are still there.

I generated and committed the public folder for easy reviewing.

0 Likes

#6

Do you have theme: parameter in config.yml?

0 Likes

#7

no theme parameter - the config.yml is very bare:

baseURL: "https://something.com/"
title: "Test"
footnoteReturnLinkContents: "↩"
permalinks:
  post: /:year/:month/:title/
ignoreFiles:
  - "nginx/"
pygmentsCodeFences: yes
pygmentsCodefencesGuessSyntax: yes
pygmentsStyle: monokai
Paginate: 5
params:
  Description: "site"
  AuthorName: "site"
  GitHubUser: "site"
  ListOfFoo:
    - "foo1"
    - "foo2"
SidebarRecentLimit: 5
0 Likes

#8

I have tested your site and see no table of content. Can you paste a screenshot?

0 Likes

#9

The table of contents is in the ‘nav’ tag here:

here is the output running it on my local machine
[12:56:59][Ying@enoki hugotest] (master)$rm -rf public
[12:57:07][Ying@enoki hugotest] (master)$hugo
Started building sites …

Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
8 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 4 ms
[12:57:10][Ying@enoki hugotest] (master)$cat public/blog/sometest/index.html
<!DOCTYPE html>
<html lang="en">


  <body>

    <main class="page-content" aria-label="Content">
      <div class="container">
        
<div class="row">
  <div class="col">
    <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">Some test</h1>
        <p class="post-meta">
          <time datetime="2017-12-19 14:32:52 -0500 EST" itemprop="datePublished">
            Tuesday, Dec 19, 2017
          </time>
        </p>
      </header>

      <div class="post-content" itemprop="articleBody">
        <nav>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#a-header">A header</a></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul>
</nav>

<p>Content begins</p>

<h6 id="a-header">A header</h6>

<p>Some content</p>

      </div>

    </article>
  </div>
</div>


      </div>
    </main>

  </body>

</html>
0 Likes

#10

I cloned and generated the site, and it is adding a ToC-like list if a heading is h6. But not h1 through h5

Well, testing it, it seems that if the heading is h6 before others, it triggers something.

For instance:

# h1

## h2

### h3

#### h4

##### h5

###### h6

will produce:

      <div class="post-content" itemprop="articleBody">
        

<h1 id="h1">h1</h1>

<h2 id="h2">h2</h2>

<h3 id="h3">h3</h3>

<h4 id="h4">h4</h4>

<h5 id="h5">h5</h5>

<h6 id="h6">h6</h6>

      </div>

Adding h6 before creates a nav and list.

###### h6

# h1

## h2

### h3

#### h4

##### h5

###### h6
      <div class="post-content" itemprop="articleBody">
        <nav>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#h6">h6</a></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
<li><a href="#h1">h1</a>
<ul>
<li><a href="#h2">h2</a>
<ul>
<li><a href="#h3">h3</a>
<ul>
<li><a href="#h4">h4</a>
<ul>
<li><a href="#h5">h5</a>
<ul>
<li><a href="#h6-1">h6</a></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul>
</nav>

<h6 id="h6">h6</h6>

<h1 id="h1">h1</h1>

<h2 id="h2">h2</h2>

<h3 id="h3">h3</h3>

<h4 id="h4">h4</h4>

<h5 id="h5">h5</h5>

<h6 id="h6-1">h6</h6>

      </div>

I have no idea why, I am just trying to figure out how to reproduce.

@brightredchilli, do you have an example of a properly marked up document that is causing this issue? Obviously something weird is happening, but I can’t see this coming up for most documents, as it is incorrect to start with an h6 in the document.

0 Likes

#11

OK; I see it now.

Seems to be triggered by the funky “###### A header” – Hugo has some logic for extracting the TOC, and that obviously fails for this amount of levels.

You may create a GH issue, but I’m not sure what attention it will get. I will replace this logic once I get to Black Friday 2 upgrade.

0 Likes

#12

@maiki, im not sure what you mean by properly marked up, but in my repro site I have a content page here. It has, as you noted, the offending h6.

Base templates could already have h1 to h5 tags for various other things, so the document might not necessarily exactly start with an h6.(For example, i first encountered this as part of rendering an li template)

0 Likes

#13

Having 6 levels of headers seems unusual; unusual enough that you are the first person who have stumbled upon this issue in the last 4 years since this logic was implemented.

1 Like

#14

That was the piece of content I was testing. I cloned your site, and put the headings in that file.

@brightredchilli most documents don’t have sub-headings that go beyond h3 or h4, and there is also an order between them, so an h6 will never appear at the beginning.

So if you want to update the hugotest repo with the example that is causing you an issue, we might be able to advise. Otherwise, I am not sure this is a priority. :slight_smile:

0 Likes

#15

@maiki, In my case, although h6 does not occur at the start of the generated html document, it does occur at the start of a piece of content. IMHO, the renderer should be agnostic to the detail of whether h5 or h6 is being used. But I understand this is not a priority, and I appreciate your time reproducing my issue! At least I know I’m not crazy.

@bep For the ‘unusual’ people that come this way, I think this thread will serve as good documentation. I just wanted to clarify the situation and maybe offer my help to fix - but it seems like this is not an area worth fixing.

0 Likes

#16

I don’t understand, why does a piece of content have an h6 at the start?

0 Likes

#17

In my case, I want my content to be segmented by sections, but i dont want to use h1 or h2 because that is already being used as the title of my page. I want these sections to be rendered a little smaller than the titles of my page.

0 Likes

#18

The current HTML spec allows you to use headings in a standardized way, and it all works out. You can have a list of posts with h1 headings, and it will still work properly, if you nest them properly.

If you mean smaller visually, that is an incorrect way to use a heading, and your site will be difficult for machines and people to read. In particular, it will really wreck havoc on someone depending on the headings to create a navigation if they are not using a standard visual web browser.

I recommend you markup your content with a logical heading order, and then use CSS and HTML to generate lists that create accessible output. :slight_smile:

0 Likes