hugo/content/en/templates/ordering-and-grouping.md
Bjørn Erik Pedersen 5e078383a7 Squashed 'docs/' changes from 785e375f..49809a03
49809a03 Merge commit '20a631b4964fc0ab9137cce1e41774cbc17de044'
20a631b4 Squashed 'themes/gohugoioTheme/' changes from b8202f539..dafc91ff1
8b58f565 Re-generate CLI docs
4653a724 Add Netlify deployment badge
2d6246bc Remove some deprecated site variables
e6777153 Improve Algolia Search Display Styling
1570999f Add missing "." in front of gitlab-ci.yaml example
b922ae7d This adds documentation to the new configDir/Environment logic from .53 (#729)
7cff379f Correctly escape multi-word taxonomy terms in example
2dfeeda4 fix typo by removing stray paren
0870bd9a Fix typo in `paginate` description
91e8be85 Fixes https://github.com/gohugoio/hugo/issues/5609
c1db65ec Make the dummy URL more obvious
b4589ff0 Fix a link
b73dcb9a Consistently use "posts" as section name in examples
7a56abbc Format definitions
a9c6fd9b Minor clarification over the last commit
5c86bdc8 Add alternative instructions for Quick Start for non-git users
dafe7ee9 Add Visual Studio Code plug-ins
110ed19e Update HUGO_VERSION
2abd031a Update page.md
b332f7b9 Update page.md
f5a8c9d4 Update static-files.md
6d0c155c Add note about relative protocol URLs
a13751ac Theme Warning: Remove note about unquoted URLs
4c8f7d68 Incorporate feedback
6f2b9cf0 Update Creating Themes Warning
40d88d98 Fix ToC example to use binary true/false
4a11f3f1 Fix typo
2dbfc0a4 Fix a typo in taxonomies
d63790ef Do not mark UndocumentedFeature issues as stale
d7aff095 Regenerate docs.json
71c0826f Update transform.Unmarshal.md

git-subtree-dir: docs
git-subtree-split: 49809a038b2691637bab7f3f2e385dde654a88b8
2019-02-01 09:01:04 +01:00

8.5 KiB
Raw Blame History

title linktitle description date publishdate lastmod categories keywords menu weight sections_weight draft aliases toc notes
Ordere and Grouping Hugo Lists List Ordering and Grouping You can group or order your content in both your templating and content front matter. 2017-02-01 2017-02-01 2017-02-01
templates
docs
parent weight
templates 27
27 27 true
/templates/ordering/
/templates/grouping/
true This was originally going to be a separate page on the new docs site but it now makes more sense to keep everything within the templates/lists page. - rdwatters, 2017-03-12.

In Hugo, A list template is any template that will be used to render multiple pieces of content in a single HTML page.

Example List Templates

Section Template

This list template is used for spf13.com. It makes use of [partial templates][partials]. All examples use a view called either "li" or "summary."

{{< code file="layouts/section/post.html" >}} {{ partial "header.html" . }} {{ partial "subheader.html" . }}

{{ .Title }}

    {{ range .Pages }} {{ .Render "li"}} {{ end }}
{{ partial "footer.html" . }} {{< /code >}}

Taxonomy Template

{{< code file="layouts/_default/taxonomies.html" download="taxonomies.html" >}} {{ define "main" }}

{{ .Title }}

{{ range .Pages }} {{ .Render "summary"}} {{ end }}
{{ end }} {{< /code >}}

Order Content

Hugo lists render the content based on metadata provided in the front matter..

Here are a variety of different ways you can order the content items in your list templates:

Default: Weight > Date

{{< code file="layouts/partials/order-default.html" >}}

    {{ range .Pages }}
  • {{ .Title }}

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

By Weight

{{< code file="layouts/partials/by-weight.html" >}} {{ range .Pages.ByWeight }}

  • {{ .Title }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Date

    {{< code file="layouts/partials/by-date.html" >}} {{ range .Pages.ByDate }}

  • {{ .Title }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Publish Date

    {{< code file="layouts/partials/by-publish-date.html" >}} {{ range .Pages.ByPublishDate }}

  • {{ .Title }}
    {{ .PublishDate.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Expiration Date

    {{< code file="layouts/partials/by-expiry-date.html" >}} {{ range .Pages.ByExpiryDate }}

  • {{ .Title }}
    {{ .ExpiryDate.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Last Modified Date

    {{< code file="layouts/partials/by-last-mod.html" >}} {{ range .Pages.ByLastmod }}

  • {{ .Title }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Length

    {{< code file="layouts/partials/by-length.html" >}} {{ range .Pages.ByLength }}

  • {{ .Title }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Title

    {{< code file="layouts/partials/by-title.html" >}} {{ range .Pages.ByTitle }}

  • {{ .Title }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    {{< code file="layouts/partials/by-link-title.html" >}} {{ range .Pages.ByLinkTitle }}

  • {{ .LinkTitle }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    By Parameter

    Order based on the specified front matter parameter. Content that does not have the specified front matter field will use the site's .Site.Params default. If the parameter is not found at all in some entries, those entries will appear together at the end of the ordering.

    The below example sorts a list of posts by their rating.

    {{< code file="layouts/partials/by-rating.html" >}} {{ range (.Pages.ByParam "rating") }}

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

    If the front matter field of interest is nested beneath another field, you can also get it:

    {{< code file="layouts/partials/by-nested-param.html" >}} {{ range (.Pages.ByParam "author.last_name") }}

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

    Reverse Order

    Reversing order can be applied to any of the above methods. The following uses ByDate as an example:

    {{< code file="layouts/partials/by-date-reverse.html" >}} {{ range .Pages.ByDate.Reverse }}

  • {{ .Title }}
    {{ .Date.Format "Mon, Jan 2, 2006" }}
  • {{ end }} {{< /code >}}

    Group Content

    Hugo provides some functions for grouping pages by Section, Type, Date, etc.

    By Page Field

    {{< code file="layouts/partials/by-page-field.html" >}} {{ range .Pages.GroupBy "Section" }}

    {{ .Key }}

      {{ range .Pages }}
    • {{ .Title }}
      {{ .Date.Format "Mon, Jan 2, 2006" }}
    • {{ end }}
    {{ end }} {{< /code >}}

    By Page date

    {{< code file="layouts/partials/by-page-date.html" >}} {{ range .Pages.GroupByDate "2006-01" }}

    {{ .Key }}

      {{ range .Pages }}
    • {{ .Title }}
      {{ .Date.Format "Mon, Jan 2, 2006" }}
    • {{ end }}
    {{ end }} {{< /code >}}

    By Page publish date

    {{< code file="layouts/partials/by-page-publish-date.html" >}} {{ range .Pages.GroupByPublishDate "2006-01" }}

    {{ .Key }}

      {{ range .Pages }}
    • {{ .Title }}
      {{ .PublishDate.Format "Mon, Jan 2, 2006" }}
    • {{ end }}
    {{ end }} {{< /code >}}

    By Page Param

    {{< code file="layouts/partials/by-page-param.html" >}} {{ range .Pages.GroupByParam "param_key" }}

    {{ .Key }}

      {{ range .Pages }}
    • {{ .Title }}
      {{ .Date.Format "Mon, Jan 2, 2006" }}
    • {{ end }}
    {{ end }} {{< /code >}}

    By Page Param in Date Format

    {{< code file="layouts/partials/by-page-param-as-date.html" >}} {{ range .Pages.GroupByParamDate "param_key" "2006-01" }}

    {{ .Key }}

      {{ range .Pages }}
    • {{ .Title }}
      {{ .Date.Format "Mon, Jan 2, 2006" }}
    • {{ end }}
    {{ end }} {{< /code >}}

    Reverse Key Order

    The ordering of the groups is performed by keys in alphanumeric order (AZ, 1100) and in reverse chronological order (newest first) for dates.

    While these are logical defaults, they are not always the desired order. There are two different syntaxes to change the order, both of which work the same way. You can use your preferred syntax.

    Reverse Method

    {{ range (.Pages.GroupBy "Section").Reverse }}
    
    {{ range (.Pages.GroupByDate "2006-01").Reverse }}
    

    Provide the Alternate Direction

    {{ range .Pages.GroupByDate "2006-01" "asc" }}
    
    {{ range .Pages.GroupBy "Section" "desc" }}
    

    Order Within Groups

    Because Grouping returns a {{.Key}} and a slice of pages, all of the ordering methods listed above are available.

    In the following example, groups are ordered chronologically and then content within each group is ordered alphabetically by title.

    {{< code file="layouts/partials/by-group-by-page.html" >}} {{ range .Pages.GroupByDate "2006-01" "asc" }}

    {{ .Key }}

      {{ range .Pages.ByTitle }}
    • {{ .Title }}
      {{ .Date.Format "Mon, Jan 2, 2006" }}
    • {{ end }}
    {{ end }} {{< /code >}}

    Filter and Limiting Lists

    See the Lists/Filtering and Limiting Lists section for details.