hugo/docs/content/en/methods/page/_common/nextinsection-and-previnsection.md
2024-09-01 14:51:15 +02:00

2 KiB

Hugo determines the next and previous page by sorting the current section's regular pages according to this sorting hierarchy:

Field Precedence Sort direction
weight 1 descending
date 2 descending
linkTitle 3 descending
path 4 descending

The sorted page collection used to determine the next and previous page is independent of other page collections, which may lead to unexpected behavior.

For example, with this content structure:

content/
├── pages/
│   ├── _index.md
│   ├── page-1.md   <-- front matter: weight = 10
│   ├── page-2.md   <-- front matter: weight = 20
│   └── page-3.md   <-- front matter: weight = 30
└── _index.md

And these templates:

{{< code file=layouts/_default/list.html >}} {{ range .Pages.ByWeight }}

{{ .LinkTitle }}

{{ end }} {{< /code >}}

{{< code file=layouts/_default/single.html >}} {{ with .PrevInSection }} Previous {{ end }}

{{ with .NextInSection }} Next {{ end }} {{< /code >}}

When you visit page-2:

  • The PrevInSection method points to page-3
  • The NextInSection method points to page-1

To reverse the meaning of next and previous you can change the sort direction in your site configuration, or use the Next and Prev methods on a Pages object for more flexibility.

Example

Code defensively by checking for page existence:

{{ with .PrevInSection }}
  <a href="{{ .RelPermalink }}">Previous</a>
{{ end }}

{{ with .NextInSection }}
  <a href="{{ .RelPermalink }}">Next</a>
{{ end }}

Alternative

Use the Next and Prev methods on a Pages object for more flexibility.