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

title	linkTitle	description	categories	keywords	menu	weight	toc	aliases
Content summaries	Summaries	Create and render content summaries.	content management	summaries abstracts read more	docs parent weight content-management 160	160	true	/content/summaries/ /content-management/content-summaries/

{{% comment %}}

{{% /comment %}}

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.

{{< code file=content/example.md >}} +++ title: 'Example' date: 2024-05-26T09:10:33-07:00 +++

This is the first paragraph.

This is the second paragraph. {{< /code >}}

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.

{{< code file=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. {{< /code >}}

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.

{{< code file=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. {{< /code >}}

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	✔️	✔️	✔️
Front matter	2	✔️	❌	❌
Automatic	3	✔️	✔️	✔️

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