Content summaries

You can define a content summary manually, in front matter, or automatically. A manual content 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 content summary. Hugo will not render the summary divider itself.

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

Thénardier was not mistaken. The man was sitting there, and letting
Cosette get somewhat rested.

<--more-->

The inn-keeper walked round the brushwood and presented himself
abruptly to the eyes of those whom he was in search of.

When using the Emacs Org Mode content format, use a # more divider to indicate the end of the content 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: 'Learn more about _Les Misérables_ by Victor Hugo.'
+++

Thénardier was not mistaken. The man was sitting there, and letting
Cosette get somewhat rested. The inn-keeper walked round the
brushwood and presented himself abruptly to the eyes of those whom
he was in search of.

Automatic summary

If you have not defined 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
+++

Thénardier was not mistaken. The man was sitting there, and letting
Cosette get somewhat rested. The inn-keeper walked round the
brushwood and presented himself abruptly to the eyes of those whom
he was in search of.

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

Thénardier was not mistaken. The man was sitting there, and letting
Cosette get somewhat rested.

Note that the summaryLength is an approximate number of words.

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