Content summaries

Create and render content summaries.

You can define a summary manually, in front matter, or automatically. A manual summary takes precedence over a front matter summary, and a front matter summary takes precedence over an automatic summary.

Review the comparison table below to understand the characteristics of each summary type.

Manual summary #

Use a  divider to indicate the end of the summary. Hugo will not render the summary divider itself.

content/example.md

+++
title: 'Example'
date: 2024-05-26T09:10:33-07:00
+++

This is the first paragraph.

<!--more-->

This is the second paragraph.

When using the Emacs Org Mode [content format], use a # more divider to indicate the end of the summary.

Front matter summary #

Use front matter to define a summary independent of content.

content/example.md

+++
title: 'Example'
date: 2024-05-26T09:10:33-07:00
summary: 'This summary is independent of the content.'
+++

This is the first paragraph.

This is the second paragraph.

Automatic summary #

If you do not define the summary manually or in front matter, Hugo automatically defines the summary based on the [summaryLength] in your site configuration.

content/example.md

+++
title: 'Example'
date: 2024-05-26T09:10:33-07:00
+++

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

For example, with a summaryLength of 7, the automatic summary will be:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Comparison #

Each summary type has different characteristics:

Type	Precedence	Renders markdown	Renders shortcodes	Wraps single lines with `<p>`
Manual	1	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Front matter	2	:heavy_check_mark:	:x:	:x:
Automatic	3	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:

Rendering #

Render the summary in a template by calling the [Summary] method on a Page object.

{{ range site.RegularPages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  <div class="summary">
    {{ .Summary }}
    {{ if .Truncated }}
      <a href="{{ .RelPermalink }}">More ...</a>
    {{ end }}
  </div>
{{ end }}

Alternative #

Instead of calling the Summary method on a Page object, use the [strings.Truncate] function for granular control of the summary length. For example:

{{ range site.RegularPages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  <div class="summary">
    {{ .Content | strings.Truncate 42 }}
  </div>
{{ end }}