1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
title: Content summaries
linkTitle: Summaries
description: Create and render content summaries.
categories: [content management]
keywords: [summaries,abstracts,read more]
menu:
docs:
parent: content-management
weight: 160
weight: 160
toc: true
aliases: [/content/summaries/,/content-management/content-summaries/]
---
{{% comment %}}
<!-- Do not remove the manual summary divider below. -->
<!-- If you do, you will break its first literal usage on this page. -->
{{% /comment %}}
<!--more-->
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](#comparison) 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.
<!--more-->
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.
[content format]: /content-management/formats/
## 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.
[`summaryLength`]: /getting-started/configuration/#summarylength
{{< 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:
```html
<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.
[`Summary`]: /methods/page/summary
```go-html-template
{{ 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:
[`strings.Truncate`]: /functions/strings/truncate/
```go-html-template
{{ range site.RegularPages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
<div class="summary">
{{ .Content | strings.Truncate 42 }}
</div>
{{ end }}
```
|
