Back to top

List

List of all pages from a section/directory.

List fragment can list all the pages from a section, including subsections and pages inside those subsections. This listing can be shown in normal list layout or tiled layout.

List fragment can be used in normal pages as well as section pages. But if used in section pages, it has the ability to use pagination.

List fragment with list layout

Displays pages from dev/blog section
Sample
Blog
Lorem Ipsum
First sample blog
Sometimes you need a markdown summary and that’s not possible to do with Hugo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna.
Lorem Ipsum is the single greatest threat
Lorem Ipsum is the single greatest threat. We are not - we are not keeping up with other websites. You’re telling the enemy exactly what you’re going to do. No wonder you’ve been fighting Lorem Ipsum your entire adult life. Lorem Ipsum’s father was with Lee Harvey Oswald prior to Oswald’s being, you know, shot. You’re telling the enemy exactly what you’re going to do. No wonder you’ve been fighting Lorem Ipsum your entire adult life. Read more...
Zombie ipsum reversus ab viral inferno
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Read more...
Code
+++
fragment = "list"
weight = 150

title = "List fragment with list layout"
subtitle = "Displays pages from dev/blog section"
title_align = "left" # Default is center, can be left, right or center

background = "secondary"
count = 5 # Default value is 10
section = "dev/blog" # Default value is current section
#summary = false # Default value is true
#images = false # Default value is true
#read_more = true # Default value is empty (empty: show when content is truncated, false to never show, true to always show)
#tiled = true # Default value is false
display_date = true # Default is false
#collapsible = true # Default value is false

#subsections = true # Default to true. Shows subsection branch pages
#subsection_leaves = true # Default to false. Shows subsection leaf pages
+++

List fragment with tiled layout

Displays pages from dev/blog section
Sample
Blog
Lorem Ipsum
First sample blog
Sometimes you need a markdown summary and that’s not possible to do with Hugo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lorem urna.
Lorem Ipsum is the single greatest threat
Lorem Ipsum is the single greatest threat. We are not - we are not keeping up with other websites. You’re telling the enemy exactly what you’re going to do. No wonder you’ve been fighting Lorem Ipsum your entire adult life. Lorem Ipsum’s father was with Lee Harvey Oswald prior to Oswald’s being, you know, shot. You’re telling the enemy exactly what you’re going to do. No wonder you’ve been fighting Lorem Ipsum your entire adult life.
Zombie ipsum reversus ab viral inferno
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
Code
+++
fragment = "list"
weight = 150

title = "List fragment with tiled layout"
subtitle = "Displays pages from dev/blog section"
#title_align = "left" # Default is center, can be left, right or center

background = "secondary"
count = 5 # Default value is 10
section = "dev/blog" # Default value is current section
#summary = false # Default value is true
#images = false # Default value is true
#read_more = true # Default value is empty (empty: show when content is truncated, false to never show, true to always show)
#tiled = true # Default value is false
display_date = true # Default is false
#collapsible = true # Default value is false

#subsections = true # Default to true. Shows subsection branch pages
#subsection_leaves = true # Default to false. Shows subsection leaf pages
+++

Documentation

Variables

count

type: number
default: 10

Number of pages displayed in the list.
If List fragment is registered in a list page, count will be used for pagination as well.

section

type: string
default: current section

This value will be used for finding pages. The value by default is the path to the current section. If you want to change the default value, enter the path to the section relative to content/ directory. For example to list pages from content/blog directory (blog section), the value would be blog.

summary

type: boolean
default: true

If set to true, it will show the summary of the page. It works by looking for a Content fragment in the page and fetching the summary, either by looking for a summary variable in that Content fragment or by using Hugo to summarize the content.

sort

type: string accepted values: All Hugo page variables default: PublishDate

Sets the sort property. Accepted values are all the public fields on the page variable. Please refer to Page variables documentation page on Hugo.

sort_order

type: string accepted values: asc, desc default: asc

Sets the sort order.

images

type: boolean
default: true

If set to true, it will show the image of the page. It works by looking for a Content fragment in the page and fetching the image value in it.

read_more

type: boolean default: empty

  • empty: show when content is truncated
  • false: never show
  • true: always show

tiled

type: boolean
default: false

If set to true, the fragment will show each page as a card in a two column layout. By default, pages are listed below each other.

display_date

type: boolean
default: false

collapsible

type: boolean
default: false

Content of each page (everything after the title) will be collapsible. If there is no content after the title, then that item will not be collapsible and will not show the arrow indicating collapsible functionlity.

subsections

type: boolean
default: true

If enabled list pages from nested/child sections will be shown.

subsection_leaves

type: boolean
default: false

Shows subsection leaf pages. Like subsections variable but will only show normal pages in nested sections.

Global variables are documented as well and have been omitted from this page.