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 <!--more--> divider to indicate the end of the summary. Hugo will not render the summary divider itself.

+++
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.

+++
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.

+++
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:

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 }}