mirror of
https://github.com/gohugoio/hugoDocs.git
synced 2025-10-04 09:05:15 -04:00
75 lines
3.7 KiB
Markdown
75 lines
3.7 KiB
Markdown
---
|
|
title: Content Summaries
|
|
linktitle: Summaries
|
|
description: Hugo can generate summaries of your content to show snippets in summary views. You have the option to split these summaries yourself or let Hugo automatically generate them for you.
|
|
date: 2017-01-10
|
|
publishdate: 2017-01-10
|
|
lastmod: 2017-01-10
|
|
categories: [content management]
|
|
tags: [summaries,abstracts,read more]
|
|
weight: 90
|
|
draft: false
|
|
aliases: [/content/summaries/,/content-management/content-summaries/]
|
|
toc: true
|
|
---
|
|
|
|
With the use of the `.Summary` [page variable][pagevariables], Hugo can generate summaries of content to show snippets in summary views. The summary view snippets are automatically generated by Hugo and offer two splitting options.
|
|
|
|
## Summary Splitting Options
|
|
|
|
You have two options for where the content is split:
|
|
|
|
* Hugo-defined Summary Split
|
|
* User-defined Summary Split
|
|
|
|
Content summaries may also provide links to the original content. A common design pattern is to see this link in the form of a "Read More..." button. To make this easier, you can leverage the `.RelPermalink`, `.Permalink`, and `.Truncated` [page variables][pagevariables].
|
|
|
|
### Hugo-defined: Automatic Summary Splitting
|
|
|
|
By default, Hugo automatically takes the first 70 words of your content as its summary and stores it into the `.Summary` page variable for use in your templates. Taking the Hugo-defined approach to summaries may save time, but it has pros and cons:
|
|
|
|
* **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.
|
|
|
|
### User-defined: Manual Summary Splitting
|
|
|
|
Alternatively, you may add the <code><!--more--></code> summary divider where you want to split the article. For [org content][org], use <code># more</code>) where you want to split the article. Content that comes before the summary divider will be used as that content's summary and stored in the `.Summary` page variable with all HTML formatting intact.
|
|
|
|
{{% note "Summary Divider"%}}
|
|
The concept of a *summary divider* is not unique to Hugo. It is also called the "more tag" or "excerpt separator" in other literature.
|
|
{{% /note %}}
|
|
|
|
* Pros: Freedom, precision, and improved rendering. All HTML tags and formatting are preserved.
|
|
* Cons: Extra work for content authors, since they need to remember to type <code><!--more--></code> (or `# more` for [org content][org]) in each content file.
|
|
|
|
{{% warning "Be Precise with the Summary Divider" %}}
|
|
Be careful to enter <code><!--more--></code> exactly; i.e., all lowercase and with no whitespace. Any mistakes in the divider will tell Hugo to treat the divider as a regular comment and will fail to store your desired content in the `.Summary` variable.
|
|
{{% /warning %}}
|
|
|
|
## Example: First 10 Articles with Summaries
|
|
|
|
You can show content summaries with the following code. You could use the following snipper, for example, in a [section template][].
|
|
|
|
{{% code file="page-list-with-summaries.html" %}}
|
|
```html
|
|
{{ range first 10 .Data.Pages }}
|
|
<article>
|
|
<div class="summary">
|
|
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
|
{{ .Summary }}
|
|
</div>
|
|
{{ if .Truncated }}
|
|
<div class="read-more-link">
|
|
<a href="{{ .RelPermalink }}">Read More…</a>
|
|
</div>
|
|
{{ end }}
|
|
</article>
|
|
{{ end }}
|
|
```
|
|
{{% /code %}}
|
|
|
|
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.
|
|
|
|
[org]: /content-management/formats/
|
|
[pagevariables]: /variables/page-variables/
|
|
[section template]: /templates/section-templates/ |