hugo/docs/content/en/content-management/toc.md

122 lines
5.7 KiB
Markdown
Raw Normal View History

---
title: Table of Contents
linktitle:
description: Hugo can automatically parse Markdown content and create a Table of Contents you can use in your templates.
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-02-01
categories: [content management]
keywords: [table of contents, toc]
menu:
docs:
parent: "content-management"
weight: 130
weight: 130 #rem
draft: false
aliases: [/extras/toc/]
toc: true
---
{{% note "TOC Heading Levels are Fixed" %}}
Squashed 'docs/' changes from 51c4f3184..af4b7ac5b af4b7ac5b Remove mention of Amber and Ace c841e9207 Exif docs corrections (#978) 0f82420b8 Change cache assets default example to 1 year 676dc6e12 Release 0.61.0 a1d9fb18a Merge commit '79c5d7053486f540b6219e693d5590f2c4c3937a' 1b9e675cd releaser: Add release notes to /docs for release of 0.61.0 5b95cbc8a Fixed suffixIsRemoved error in code samples (#975) 59b2c245b Fix Usage section in toc.md to consider Goldmark TOC settings fd3828673 Add link on how to configure TOC w/ Goldmark ea339f2d6 Added external learning resources including Hugo In Action book. fab502d5d Adjust release notes 269a025ef Release 0.60.1 6bff50bea Merge branch 'temp601' e15251c43 releaser: Add release notes to /docs for release of 0.60.1 690b864b9 Update use-modules.md 345ca8c36 Update syntax-highlighting.md be64af9f5 Update syntax-highlighting.md df9dead83 Update syntax-highlighting.md 1c6e6d238 Fix relnotes 0ea6b2012 Update homepagetweets.toml 2c465625d Update index.md 0025bba09 Update index.md 7417f1c05 Update index.md 9eeb8ce57 Release 0.60.0 25a711023 Merge branch 'temp60' 0c4faab0e releaser: Add release notes to /docs for release of 0.60.0 779e5108e Update installing.md 2ef1c386a Minor text improvements in README.md 41ec5a19a Reword sentence for clarity search.md ded74f098 Add Goldmark as the new default markdown handler cb55cdbb0 Update introduction.md fcaad653a Update homepage.md 7427a1fc5 Update configuration.md 8cc2c72ca tpl/collections: Allow dict to create nested structures 4538c092c Merge commit 'efc0b1bb6c6564f54d596467dbc6a18cb206954e' 90f908e7b Support Go time format strings in permalinks git-subtree-dir: docs git-subtree-split: af4b7ac5b403e392a92228e66058331905fff7dc
2019-12-15 04:35:09 -05:00
Previously, there was no out-of-the-box way to specify which heading levels you want the TOC to render. [See the related GitHub discussion (#1778)](https://github.com/gohugoio/hugo/issues/1778). As such, the resulting `<nav id="TableOfContents"><ul></ul></nav>` was going to start at `<h1>` when pulling from `{{.Content}}`.
Hugo [v0.60.0](https://github.com/gohugoio/hugo/releases/tag/v0.60.0) made a switch to [Goldmark](https://github.com/yuin/goldmark/) as the default library for Markdown which has improved and configurable implementation of TOC. Take a look at [how to configure TOC](/getting-started/configuration-markup/#table-of-contents) for Goldmark renderer.
{{% /note %}}
## Usage
Create your markdown the way you normally would with the appropriate headings. Here is some example content:
```
<!-- Your front matter up here -->
## Introduction
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
## My Heading
He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
### My Subheading
A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops
```
Hugo will take this Markdown and create a table of contents from `## Introduction`, `## My Heading`, and `### My Subheading` and then store it in the [page variable][pagevars]`.TableOfContents`.
Squashed 'docs/' changes from 51c4f3184..af4b7ac5b af4b7ac5b Remove mention of Amber and Ace c841e9207 Exif docs corrections (#978) 0f82420b8 Change cache assets default example to 1 year 676dc6e12 Release 0.61.0 a1d9fb18a Merge commit '79c5d7053486f540b6219e693d5590f2c4c3937a' 1b9e675cd releaser: Add release notes to /docs for release of 0.61.0 5b95cbc8a Fixed suffixIsRemoved error in code samples (#975) 59b2c245b Fix Usage section in toc.md to consider Goldmark TOC settings fd3828673 Add link on how to configure TOC w/ Goldmark ea339f2d6 Added external learning resources including Hugo In Action book. fab502d5d Adjust release notes 269a025ef Release 0.60.1 6bff50bea Merge branch 'temp601' e15251c43 releaser: Add release notes to /docs for release of 0.60.1 690b864b9 Update use-modules.md 345ca8c36 Update syntax-highlighting.md be64af9f5 Update syntax-highlighting.md df9dead83 Update syntax-highlighting.md 1c6e6d238 Fix relnotes 0ea6b2012 Update homepagetweets.toml 2c465625d Update index.md 0025bba09 Update index.md 7417f1c05 Update index.md 9eeb8ce57 Release 0.60.0 25a711023 Merge branch 'temp60' 0c4faab0e releaser: Add release notes to /docs for release of 0.60.0 779e5108e Update installing.md 2ef1c386a Minor text improvements in README.md 41ec5a19a Reword sentence for clarity search.md ded74f098 Add Goldmark as the new default markdown handler cb55cdbb0 Update introduction.md fcaad653a Update homepage.md 7427a1fc5 Update configuration.md 8cc2c72ca tpl/collections: Allow dict to create nested structures 4538c092c Merge commit 'efc0b1bb6c6564f54d596467dbc6a18cb206954e' 90f908e7b Support Go time format strings in permalinks git-subtree-dir: docs git-subtree-split: af4b7ac5b403e392a92228e66058331905fff7dc
2019-12-15 04:35:09 -05:00
The built-in `.TableOfContents` variables outputs a `<nav id="TableOfContents">` element with a child `<ul>`, whose child `<li>` elements begin with appropriate HTML headings. See [the available settings](/getting-started/configuration-markup/#table-of-contents) to configure what heading levels you want to include in TOC.
## Template Example: Basic TOC
The following is an example of a very basic [single page template][]:
{{< code file="layout/_default/single.html" download="single.html" >}}
{{ define "main" }}
<main>
<article>
<header>
<h1>{{ .Title }}</h1>
</header>
{{ .Content }}
</article>
<aside>
{{ .TableOfContents }}
</aside>
</main>
{{ end }}
{{< /code >}}
## Template Example: TOC Partial
The following is a [partial template][partials] that adds slightly more logic for page-level control over your table of contents. It assumes you are using a `toc` field in your content's [front matter][] that, unless specifically set to `false`, will add a TOC to any page with a `.WordCount` (see [Page Variables][pagevars]) greater than 400. This example also demonstrates how to use [conditionals][] in your templating:
{{< code file="layouts/partials/toc.html" download="toc.html" >}}
{{ if and (gt .WordCount 400 ) (.Params.toc) }}
<aside>
<header>
<h2>{{.Title}}</h2>
</header>
{{.TableOfContents}}
</aside>
{{ end }}
{{< /code >}}
{{% note %}}
With the preceding example, even pages with > 400 words *and* `toc` not set to `false` will not render a table of contents if there are no headings in the page for the `{{.TableOfContents}}` variable to pull from.
{{% /note %}}
Squashed 'docs/' changes from 4895c29c5..9abd3043a 9abd3043a Add docs for shimming JS libraries 6a1c8dcd7 Update sitemap-template.md (#1245) 37c397332 Update frontends.md a0f86f6df Update configuration.md bb00cb2c1 Update page-bundles.md 773212de6 Restructure and simplify fcba7dddf Some minor clarifications of weight sorting 759b967fc Update configuration-markup.md 56708f0b7 module import path remove slash at end 59f4f4acd Doc: Fix typo in hugo command faacf2e97 Clarify pagination documentation (#1208) d8eb60887 netlify: Bump to 0.75.1 8cedf6231 Merge branch 'temp751' 188e2bf56 releaser: Add release notes to /docs for release of 0.75.1 c96d4b7a3 Update index.md 1a9d192f7 Update index.md 32731b916 Update index.md a5bfa0c9a Restore the ... home page b6850bf96 Release 0.75.0 d6e5e624f releaser: Add release notes to /docs for release of 0.75.0 8cd6b4f47 typo: already -> already 2cb2b22bb Merge commit '534ae9c57a902aea9ed6e62390dec11fa74b7122' e3525de23 docs: Regen docs helper fd746dd83 docs: Regenerate CLI docs e20127980 Add "hugo mod npm pack" 8e82c7ce1 markup/highlight: Add support to linkable line anchors on Chroma 21e94911b markup/asciidocext: Fix AsciiDoc TOC with code 50b8dace5 modules: Add noVendor to module config d05b541fe modules: Make ignoreVendor a glob pattern c946082e7 docs: Update replaceRE func 149054341 docs: Update replace func d917567df docs: Update merge function f1e093c92 docs: Regen CLI docs c7bac967d docs: Regen docs helper 7a38f7a45 Merge commit '7d7771b673e5949f554515a2c236b23192c765c8' 1a5a7263a markup/asciidoc: Add support for .TableOfContents git-subtree-dir: docs git-subtree-split: 9abd3043a9214b390e8cc148f4588bf630620851
2020-10-06 10:22:20 -04:00
## Usage with AsciiDoc
Hugo supports table of contents with AsciiDoc content format.
Squashed 'docs/' changes from 9abd3043a..d1157b687 d1157b687 Fix typo -- missing word in title 34c9a9ff3 Remove Hartwell Insurance subpage broken link d42f6d8eb Fix strings.Repeat documentation 09b49debb Release 0.76.5 149877735 Merge branch 'tempv0.76.5' 72ffeb026 releaser: Add release notes to /docs for release of 0.76.5 4150d8ae8 Fixed typo: update PrevPage to Prev c3e630db1 Update index.md deb7520a8 Release 0.76.4 f58bd7134 Merge branch 'tempv0.76.4' 2581fe4bc releaser: Add release notes to /docs for release of 0.76.4 26d8417fc Release 0.76.3 34c49e06a Merge branch 'tempv0.76.3' 0de2af2ef releaser: Add release notes to /docs for release of 0.76.3 cce12c0f7 Add missing closing quotes and fix code-block lang (#1250) 8c1c80d9f Update AMP link (#1251) 7b1211ffa Fix typos in multilingual.md 29e9d70fd Update index.md 172a5480b Release 0.76.2 93ff424d3 Merge branch 'temp762' 3cad3c23a releaser: Add release notes to /docs for release of 0.76.2 610221964 Update index.md 8a9d31709 Release 0.76.1 64b245aa4 Merge branch 'temp761' f19469ff8 releaser: Add release notes to /docs for release of 0.76.1 97f0ed030 Update front-matter.md cca71f263 Update index.md 23c64f6a3 Fix typo in 0.76.0 release note 5f79e034d Update index.md b66567de2 netlify: Bump to Hugo 0.76.0 a3e30300d Release 0.76.0 3b057e8fe releaser: Add release notes to /docs for release of 0.76.0 7fa1cd912 docs: Regen docshelper 769712aec Merge commit 'e5568488051a571df48401e03f1304b95dbc9028' 70ce6ae33 pagemeta: Make BuildConfig.Render an enum a78d3849f Allow cascade to be a slice with a _target discriminator 705fea656 Add force flag to server redirects config 04e4e1cc1 tpl: Add Do Not Track (dnt) option to Vimeo shortcode 025c19fe1 Fix CLI example for PostCSS 8 0c70c47b2 markup/asciidocext: Add preserveTOC option git-subtree-dir: docs git-subtree-split: d1157b687e25054501c3bcbb735da51229f66b74
2020-10-30 04:49:15 -04:00
In the header of your content file, specify the AsciiDoc TOC directives necessary to ensure that the table of contents is generated. Hugo will use the generated TOC to populate the page variable `.TableOfContents` in the same way as described for Markdown. See example below:
Squashed 'docs/' changes from 4895c29c5..9abd3043a 9abd3043a Add docs for shimming JS libraries 6a1c8dcd7 Update sitemap-template.md (#1245) 37c397332 Update frontends.md a0f86f6df Update configuration.md bb00cb2c1 Update page-bundles.md 773212de6 Restructure and simplify fcba7dddf Some minor clarifications of weight sorting 759b967fc Update configuration-markup.md 56708f0b7 module import path remove slash at end 59f4f4acd Doc: Fix typo in hugo command faacf2e97 Clarify pagination documentation (#1208) d8eb60887 netlify: Bump to 0.75.1 8cedf6231 Merge branch 'temp751' 188e2bf56 releaser: Add release notes to /docs for release of 0.75.1 c96d4b7a3 Update index.md 1a9d192f7 Update index.md 32731b916 Update index.md a5bfa0c9a Restore the ... home page b6850bf96 Release 0.75.0 d6e5e624f releaser: Add release notes to /docs for release of 0.75.0 8cd6b4f47 typo: already -> already 2cb2b22bb Merge commit '534ae9c57a902aea9ed6e62390dec11fa74b7122' e3525de23 docs: Regen docs helper fd746dd83 docs: Regenerate CLI docs e20127980 Add "hugo mod npm pack" 8e82c7ce1 markup/highlight: Add support to linkable line anchors on Chroma 21e94911b markup/asciidocext: Fix AsciiDoc TOC with code 50b8dace5 modules: Add noVendor to module config d05b541fe modules: Make ignoreVendor a glob pattern c946082e7 docs: Update replaceRE func 149054341 docs: Update replace func d917567df docs: Update merge function f1e093c92 docs: Regen CLI docs c7bac967d docs: Regen docs helper 7a38f7a45 Merge commit '7d7771b673e5949f554515a2c236b23192c765c8' 1a5a7263a markup/asciidoc: Add support for .TableOfContents git-subtree-dir: docs git-subtree-split: 9abd3043a9214b390e8cc148f4588bf630620851
2020-10-06 10:22:20 -04:00
```asciidoc
// <!-- Your front matter up here -->
Squashed 'docs/' changes from 9abd3043a..d1157b687 d1157b687 Fix typo -- missing word in title 34c9a9ff3 Remove Hartwell Insurance subpage broken link d42f6d8eb Fix strings.Repeat documentation 09b49debb Release 0.76.5 149877735 Merge branch 'tempv0.76.5' 72ffeb026 releaser: Add release notes to /docs for release of 0.76.5 4150d8ae8 Fixed typo: update PrevPage to Prev c3e630db1 Update index.md deb7520a8 Release 0.76.4 f58bd7134 Merge branch 'tempv0.76.4' 2581fe4bc releaser: Add release notes to /docs for release of 0.76.4 26d8417fc Release 0.76.3 34c49e06a Merge branch 'tempv0.76.3' 0de2af2ef releaser: Add release notes to /docs for release of 0.76.3 cce12c0f7 Add missing closing quotes and fix code-block lang (#1250) 8c1c80d9f Update AMP link (#1251) 7b1211ffa Fix typos in multilingual.md 29e9d70fd Update index.md 172a5480b Release 0.76.2 93ff424d3 Merge branch 'temp762' 3cad3c23a releaser: Add release notes to /docs for release of 0.76.2 610221964 Update index.md 8a9d31709 Release 0.76.1 64b245aa4 Merge branch 'temp761' f19469ff8 releaser: Add release notes to /docs for release of 0.76.1 97f0ed030 Update front-matter.md cca71f263 Update index.md 23c64f6a3 Fix typo in 0.76.0 release note 5f79e034d Update index.md b66567de2 netlify: Bump to Hugo 0.76.0 a3e30300d Release 0.76.0 3b057e8fe releaser: Add release notes to /docs for release of 0.76.0 7fa1cd912 docs: Regen docshelper 769712aec Merge commit 'e5568488051a571df48401e03f1304b95dbc9028' 70ce6ae33 pagemeta: Make BuildConfig.Render an enum a78d3849f Allow cascade to be a slice with a _target discriminator 705fea656 Add force flag to server redirects config 04e4e1cc1 tpl: Add Do Not Track (dnt) option to Vimeo shortcode 025c19fe1 Fix CLI example for PostCSS 8 0c70c47b2 markup/asciidocext: Add preserveTOC option git-subtree-dir: docs git-subtree-split: d1157b687e25054501c3bcbb735da51229f66b74
2020-10-30 04:49:15 -04:00
:toc:
Squashed 'docs/' changes from 4895c29c5..9abd3043a 9abd3043a Add docs for shimming JS libraries 6a1c8dcd7 Update sitemap-template.md (#1245) 37c397332 Update frontends.md a0f86f6df Update configuration.md bb00cb2c1 Update page-bundles.md 773212de6 Restructure and simplify fcba7dddf Some minor clarifications of weight sorting 759b967fc Update configuration-markup.md 56708f0b7 module import path remove slash at end 59f4f4acd Doc: Fix typo in hugo command faacf2e97 Clarify pagination documentation (#1208) d8eb60887 netlify: Bump to 0.75.1 8cedf6231 Merge branch 'temp751' 188e2bf56 releaser: Add release notes to /docs for release of 0.75.1 c96d4b7a3 Update index.md 1a9d192f7 Update index.md 32731b916 Update index.md a5bfa0c9a Restore the ... home page b6850bf96 Release 0.75.0 d6e5e624f releaser: Add release notes to /docs for release of 0.75.0 8cd6b4f47 typo: already -> already 2cb2b22bb Merge commit '534ae9c57a902aea9ed6e62390dec11fa74b7122' e3525de23 docs: Regen docs helper fd746dd83 docs: Regenerate CLI docs e20127980 Add "hugo mod npm pack" 8e82c7ce1 markup/highlight: Add support to linkable line anchors on Chroma 21e94911b markup/asciidocext: Fix AsciiDoc TOC with code 50b8dace5 modules: Add noVendor to module config d05b541fe modules: Make ignoreVendor a glob pattern c946082e7 docs: Update replaceRE func 149054341 docs: Update replace func d917567df docs: Update merge function f1e093c92 docs: Regen CLI docs c7bac967d docs: Regen docs helper 7a38f7a45 Merge commit '7d7771b673e5949f554515a2c236b23192c765c8' 1a5a7263a markup/asciidoc: Add support for .TableOfContents git-subtree-dir: docs git-subtree-split: 9abd3043a9214b390e8cc148f4588bf630620851
2020-10-06 10:22:20 -04:00
// Set toclevels to be at least your hugo [markup.tableOfContents.endLevel] config key
:toclevels: 4
== Introduction
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
== My Heading
He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
=== My Subheading
A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops
```
Hugo will take this AsciiDoc and create a table of contents store it in the page variable `.TableOfContents`, in the same as described for Markdown.
[conditionals]: /templates/introduction/#conditionals
[front matter]: /content-management/front-matter/
[pagevars]: /variables/page/
[partials]: /templates/partials/
[single page template]: /templates/single-page-templates/