DESIGN SYSTEM

  • Principles
  • Components
  • Documentation
FUNCTIONS

after

after slices an array to only the items after the Nth item.

Syntax

after INDEX COLLECTION

The following shows after being used in conjunction with the slice function:

{{ $data := slice "one" "two" "three" "four" }}
{{ range after 2 $data }}
    {{ . }}
{{ end }}
→ ["three", "four"]

Example of after with first: 2nd–4th Most Recent Articles

You can use after in combination with the first function and Hugo’s powerful sorting methods. Let’s assume you have a list page at example.com/articles. You have 10 articles, but you want your templating for the list/section page to show only two rows:

  1. The top row is titled “Featured” and shows only the most recently published article (i.e. by publishdate in the content files’ front matter).
  2. The second row is titled “Recent Articles” and shows only the 2nd- to 4th-most recently published articles.
layouts/section/articles.html

{{ define "main" }}
<section class="row featured-article">
    <h2>Featured Article</h2>
    {{ range first 1 .Pages.ByPublishDate.Reverse }}
     <header>
        <h3><a href="{{.Permalink}}">{{.Title}}</a></h3>
    </header>
    <p>{{.Description}}</p>
    {{ end }}
</section>
<div class="row recent-articles">
    <h2>Recent Articles</h2>
    {{ range first 3 (after 1 .Pages.ByPublishDate.Reverse) }}
        <section class="recent-article">
            <header>
                <h3><a href="{{.Permalink}}">{{.Title}}</a></h3>
            </header>
            <p>{{.Description}}</p>
        </section>
    {{ end }}
</div>
{{ end }}

See Also

  • delimit
  • first
  • .Scratch
  • range
  • Foundation styles (FS)
  • Content text (CT)
  • Buttons and links (BL)
  • Form elements (FE)
  • Icons (IC)
  • Miscellaneous (MS)
“after” was last updated: January 29, 2019: A little bit of naming reorganisation (8fb631a0)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

 
  Hugo Sponsors
Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • Principles
  • Components
  • Documentation
  • Foundation styles (FS)
  • Content text (CT)
  • Buttons and links (BL)
  • Form elements (FE)
  • Icons (IC)
  • Miscellaneous (MS)