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

96 lines
4 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" %}}
Currently, the `{{.TableOfContents}}` [page variable](/variables/page/) does not allow you 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>` is going to start at `<h1>` when pulling from `{{.Content}}`.
{{% /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`.
The built-in `.TableOfContents` variables outputs a `<nav id="TableOfContents">` element with a child `<ul>`, whose child `<li>` elements begin with any `<h1>`'s (i.e., `#` in markdown) inside your content.'
{{% note "Table of contents not available for MMark" %}}
Hugo documents created in the [MMark](/content-management/formats/#mmark) Markdown dialect do not currently display TOCs. TOCs are, however, compatible with all other supported Markdown formats.
{{% /note %}}
## 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" >}}
Squashed 'docs/' changes from 785e375f..49809a03 49809a03 Merge commit '20a631b4964fc0ab9137cce1e41774cbc17de044' 20a631b4 Squashed 'themes/gohugoioTheme/' changes from b8202f539..dafc91ff1 8b58f565 Re-generate CLI docs 4653a724 Add Netlify deployment badge 2d6246bc Remove some deprecated site variables e6777153 Improve Algolia Search Display Styling 1570999f Add missing "." in front of gitlab-ci.yaml example b922ae7d This adds documentation to the new configDir/Environment logic from .53 (#729) 7cff379f Correctly escape multi-word taxonomy terms in example 2dfeeda4 fix typo by removing stray paren 0870bd9a Fix typo in `paginate` description 91e8be85 Fixes https://github.com/gohugoio/hugo/issues/5609 c1db65ec Make the dummy URL more obvious b4589ff0 Fix a link b73dcb9a Consistently use "posts" as section name in examples 7a56abbc Format definitions a9c6fd9b Minor clarification over the last commit 5c86bdc8 Add alternative instructions for Quick Start for non-git users dafe7ee9 Add Visual Studio Code plug-ins 110ed19e Update HUGO_VERSION 2abd031a Update page.md b332f7b9 Update page.md f5a8c9d4 Update static-files.md 6d0c155c Add note about relative protocol URLs a13751ac Theme Warning: Remove note about unquoted URLs 4c8f7d68 Incorporate feedback 6f2b9cf0 Update Creating Themes Warning 40d88d98 Fix ToC example to use binary true/false 4a11f3f1 Fix typo 2dbfc0a4 Fix a typo in taxonomies d63790ef Do not mark UndocumentedFeature issues as stale d7aff095 Regenerate docs.json 71c0826f Update transform.Unmarshal.md git-subtree-dir: docs git-subtree-split: 49809a038b2691637bab7f3f2e385dde654a88b8
2019-02-01 03:01:04 -05:00
{{ 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 %}}
[conditionals]: /templates/introduction/#conditionals
Squashed 'docs/' changes from 4f4d1f48c..acf70cdd9 acf70cdd9 Update CSS after removing Purge 74c0bb7f2 Remove purge from Webpack, temporarily 397b7284f Merge commit 'ccb1e38f3822e9b5e4fb89a296324daf3400f23b' ccb1e38f3 Squashed 'themes/gohugoioTheme/' changes from 042112e2d..b7853ae70 bca84e914 Fix search box text being invisible in Safari 3f21d0957 FAQ: "this feature is not available in your current Hugo version" d8b318f90 Remove Gulp from Victor Hugo description 09d9b4c24 Update contribute/development.md 4d0f6ba47 Theme Components Support on the Hugo Themes Site (#769) f2ec3f2a6 Fix broken link 404 af82c56c5 config: Remove superflous param 8dc14f563 Update theme total on homepage (#765) 7838fd7e2 Update description of Atlas to reflect new changes 6abab23c6 update: total of hugo themes 1dba24fde Clarify: summaryLength uses words not characters 8c54f45d6 Add missing punctuation d17000481 Remove Hugo Frontend caddy-plugin a7094ae62 remove unneeded meta tags f8b0f31c6 Fix typo in cross references 61781bab9 Fix: use gh shortcode correctly 357bfca43 Update files.md d1d2406cc Updated Hugo convert to clarify for and not .. 86850f3c3 Fix typos in multilingual.md b68d0d892 Fix typo 8cba70e28 Document disableAliases 00e440260 Remove extra whitespace 212d63e4c Update with latest Theme Submission Guidelines (#744) c24ea638f Update frontends.md 942bc1972 Add one more video 2e1e1091d Update the rest of the videos a7dc70f2b Add new installation video 1a78f8487 Hosting on AWS amplify 112420c46 Fix typo f723425e4 Add fireship.io bio to showcase 574f43503 Fixed typo 88e0e0cb7 Release 0.54.0 303edf19e Merge branch 'temp54' c38debebd releaser: Prepare repository for 0.55.0-DEV 5c6c56fa1 releaser: Add release notes to /docs for release of 0.54.0 f86e05950 releaser: Bump versions for release of 0.54.0 6a2684fe4 Add the default cache configuration f75c0125a Merge commit 'f27faf9afd0a8db768a21954b8755f1bf1a14f1b' e440dc6a4 Merge commit '5e078383a787e8b5ec3ba73f05ea4130840afbe2' 981bf53f8 Update _index.md b54aea066 tpl: Fix reflect 41f8af5a6 Merge commit '978856e2ad12d2bcaf37bb9e31f806b30a4c42f4' git-subtree-dir: docs git-subtree-split: acf70cdd9fe2a89413e13db29466e45629372343
2019-03-26 13:41:09 -04:00
[front matter]: /content-management/front-matter/
[pagevars]: /variables/page/
[partials]: /templates/partials/
Squashed 'docs/' changes from 785e375f..49809a03 49809a03 Merge commit '20a631b4964fc0ab9137cce1e41774cbc17de044' 20a631b4 Squashed 'themes/gohugoioTheme/' changes from b8202f539..dafc91ff1 8b58f565 Re-generate CLI docs 4653a724 Add Netlify deployment badge 2d6246bc Remove some deprecated site variables e6777153 Improve Algolia Search Display Styling 1570999f Add missing "." in front of gitlab-ci.yaml example b922ae7d This adds documentation to the new configDir/Environment logic from .53 (#729) 7cff379f Correctly escape multi-word taxonomy terms in example 2dfeeda4 fix typo by removing stray paren 0870bd9a Fix typo in `paginate` description 91e8be85 Fixes https://github.com/gohugoio/hugo/issues/5609 c1db65ec Make the dummy URL more obvious b4589ff0 Fix a link b73dcb9a Consistently use "posts" as section name in examples 7a56abbc Format definitions a9c6fd9b Minor clarification over the last commit 5c86bdc8 Add alternative instructions for Quick Start for non-git users dafe7ee9 Add Visual Studio Code plug-ins 110ed19e Update HUGO_VERSION 2abd031a Update page.md b332f7b9 Update page.md f5a8c9d4 Update static-files.md 6d0c155c Add note about relative protocol URLs a13751ac Theme Warning: Remove note about unquoted URLs 4c8f7d68 Incorporate feedback 6f2b9cf0 Update Creating Themes Warning 40d88d98 Fix ToC example to use binary true/false 4a11f3f1 Fix typo 2dbfc0a4 Fix a typo in taxonomies d63790ef Do not mark UndocumentedFeature issues as stale d7aff095 Regenerate docs.json 71c0826f Update transform.Unmarshal.md git-subtree-dir: docs git-subtree-split: 49809a038b2691637bab7f3f2e385dde654a88b8
2019-02-01 03:01:04 -05:00
[single page template]: /templates/single-page-templates/