Summaries

With the use of the .Summary page variable, Hugo can generate summaries of content to show snippets in summary views. The summary view snippets are automatically generated by Hugo. Where a piece of content is split for the content summary depends on whether the split is Hugo-defined or user-defined.

Content summaries may also provide links to the original content, usually in the form of a “Read More…” link, with the help of the .RelPermalink or .Permalink variable, as well as the .Truncated boolean variable to determine whether such “Read More…” link is necessary.

Hugo-defined: automatic summary split

By default, Hugo automatically takes the first 70 words of your content as its summary and stores it into the .Summary variable, which you may use in your templates.

• Pros: Automatic, no additional work on your part.
• Cons: All HTML tags are stripped from the summary, and the first 70 words, whether they belong to a heading or to different paragraphs, are all lumped into one paragraph. Some people like it, but some people don’t.

User-defined: manual summary split:

Alternatively, you may add the <!--more--> summary divider⁰ where you want to split the article. Content prior to the summary divider will be used as that content’s summary, and stored into the .Summary variable with all HTML formatting intact.

• Pros: Freedom, precision, and improved rendering. All formatting is preserved.
• Cons: Need to remember to type <!--more--> (or # more for org content) in your content file. :-)

Be careful to enter <!--more--> (or # more for org content) exactly, i.e. all lowercase with no whitespace, otherwise it would be treated as regular comment and ignored.

If there is nothing but spaces and newlines after the summary divider then .Truncated will be false.

Showing Summaries

You can show content summaries with the following code. You could do this, for example, on a list page.

{{ range first 10 .Data.Pages }}
  <div class="summary">
    <h4><a href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
    {{ .Summary }}
  </div>
  {{ if .Truncated }}
  <div class="read-more-link">
    <a href="{{ .RelPermalink }}">Read More…</a>
  </div>
  {{ end }}
{{ end }}

Note how the .Truncated boolean valuable may be used to hide the “Read More…” link when the content is not truncated, i.e. when the summary contains the entire article.