Related content
Hugo uses a set of factors to identify a page’s related content based on front matter parameters. This can be tuned to the desired set of indices and parameters or left to Hugo’s default Related Content configuration.
List related content
To list up to 5 related pages (which share the same date or keyword parameters) is as simple as including something similar to this partial in your single page template:
The Related
method takes one argument which may be a Page
or a options map. The options map have these options:
- indices
- The indices to search in.
- document
- The document to search for related content for.
- namedSlices
- The keywords to search for.
- fragments
- Fragments holds a a list of special keywords that is used for indices configured as type “fragments”. This will match the fragment identifiers of the documents.
A fictional example using all of the above options:
{{ $page := . }}
{{ $opts :=
"indices" (slice "tags" "keywords")
"document" $page
"namedSlices" (slice (keyVals "tags" "hugo" "rocks") (keyVals "date" $page.Date))
"fragments" (slice "heading-1" "heading-2")
}}
Index content headings in related content
Hugo can index the headings in your content and use this to find related content. You can enable this by adding a index of type fragments
to your related
configuration:
related:
includeNewer: true
indices:
- applyFilter: false
name: fragmentrefs
type: fragments
weight: 80
threshold: 20
toLower: false
[related]
includeNewer = true
threshold = 20
toLower = false
[[related.indices]]
applyFilter = false
name = 'fragmentrefs'
type = 'fragments'
weight = 80
{
"related": {
"includeNewer": true,
"indices": [
{
"applyFilter": false,
"name": "fragmentrefs",
"type": "fragments",
"weight": 80
}
],
"threshold": 20,
"toLower": false
}
}
- The
name
maps to a optional front matter slice attribute that can be used to link from the page level down to the fragment/heading level. - If
applyFilter
is enabled, the.HeadingsFiltered
on each page in the result will reflect the filtered headings. This is useful if you want to show the headings in the related content listing:
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h2>See Also</h2>
<ul>
{{ range $i, $p := . }}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{ with .HeadingsFiltered }}
<ul>
{{ range . }}
{{ $link := printf "%s#%s" $p.RelPermalink .ID | safeURL }}
<li>
<a href="{{ $link }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>
{{ end }}
</li>
{{ end }}
</ul>
{{ end }}
Configure related content
Hugo provides a sensible default configuration of Related Content, but you can fine-tune this in your configuration, on the global or language level if needed.
Default configuration
Without any related
configuration set on the project, Hugo’s Related Content methods will use the following.
related:
includeNewer: false
indices:
- applyFilter: false
cardinalityThreshold: 0
name: keywords
pattern: ""
toLower: false
type: basic
weight: 100
- applyFilter: false
cardinalityThreshold: 0
name: date
pattern: ""
toLower: false
type: basic
weight: 10
- applyFilter: false
cardinalityThreshold: 0
name: tags
pattern: ""
toLower: false
type: basic
weight: 80
threshold: 80
toLower: false
[related]
includeNewer = false
threshold = 80
toLower = false
[[related.indices]]
applyFilter = false
cardinalityThreshold = 0
name = 'keywords'
pattern = ''
toLower = false
type = 'basic'
weight = 100
[[related.indices]]
applyFilter = false
cardinalityThreshold = 0
name = 'date'
pattern = ''
toLower = false
type = 'basic'
weight = 10
[[related.indices]]
applyFilter = false
cardinalityThreshold = 0
name = 'tags'
pattern = ''
toLower = false
type = 'basic'
weight = 80
{
"related": {
"includeNewer": false,
"indices": [
{
"applyFilter": false,
"cardinalityThreshold": 0,
"name": "keywords",
"pattern": "",
"toLower": false,
"type": "basic",
"weight": 100
},
{
"applyFilter": false,
"cardinalityThreshold": 0,
"name": "date",
"pattern": "",
"toLower": false,
"type": "basic",
"weight": 10
},
{
"applyFilter": false,
"cardinalityThreshold": 0,
"name": "tags",
"pattern": "",
"toLower": false,
"type": "basic",
"weight": 80
}
],
"threshold": 80,
"toLower": false
}
}
Custom configuration should be set using the same syntax.
Top level configuration options
- threshold
- A value between 0-100. Lower value will give more, but maybe not so relevant, matches.
- includeNewer
- Set to true to include pages newer than the current page in the related content listing. This will mean that the output for older posts may change as new related content gets added.
- toLower
- Set to true to lower case keywords in both the indexes and the queries. This may give more accurate results at a slight performance penalty. Note that this can also be set per index.
Configuration options per index
- name
- The index name. This value maps directly to a page parameter. Hugo supports string values (
author
in the example) and lists (tags
,keywords
etc.) and time and date objects. - type
-
. One of
basic
(default) orfragments
. - applyFilter
-
. Apply a
type
specific filter to the result of a search. This is currently only used for thefragments
type. - weight
- An integer weight that indicates how important this parameter is relative to the other parameters. It can be 0, which has the effect of turning this index off, or even negative. Test with different values to see what fits your content best.
- cardinalityThreshold (default 0)
- . A percentage (0-100) used to remove common keywords from the index. As an example, setting this to 50 will remove all keywords that are used in more than 50% of the documents in the index.
- pattern
- This is currently only relevant for dates. When listing related content, we may want to list content that is also close in time. Setting “2006” (default value for date indexes) as the pattern for a date index will add weight to pages published in the same year. For busier blogs, “200601” (year and month) may be a better default.
- toLower
- See above.
Performance considerations
Fast is Hugo’s middle name and we would not have released this feature had it not been blistering fast.
This feature has been in the back log and requested by many for a long time. The development got this recent kick start from this Twitter thread:
Holy smokes! Build time dropped to 1.2 seconds!
— Scott S. Lowe (@scott_lowe) August 18, 2017
Scott S. Lowe removed the “Related Content” section built using the intersect
template function on tags, and the build time dropped from 30 seconds to less than 2 seconds on his 1700 content page sized blog.
He should now be able to add an improved version of that “Related Content” section without giving up the fast live-reloads. But it’s worth noting that:
- If you don’t use any of the
Related
methods, you will not use the Relate Content feature, and performance will be the same as before. - Calling
.RegularPages.Related
etc. will create one inverted index, also sometimes named posting list, that will be reused for any lookups in that same page collection. Doing that in addition to, as an example, calling.Pages.Related
will work as expected, but will create one additional inverted index. This should still be very fast, but worth having in mind, especially for bigger sites.