Children
The children
shortcode lists the child pages of the current page and its descendants.
Usage
{{% children sort="title" %}}
{{ partial "shortcodes/children.html" (dict
"page" .
"sort" "title"
)}}
Parameter
Name | Default | Notes |
---|---|---|
containerstyle | ul |
Choose the style used to group all children. It could be any HTML tag name. |
style | li |
Choose the style used to display each descendant. It could be any HTML tag name. |
showhidden | false |
When true , child pages hidden from the menu will be displayed as well. |
description | false |
When true shows a short text under each page in the list. When no description or summary exists for the page, the first 70 words of the content is taken - read more info about summaries on gohugo.io. |
depth | 1 |
The depth of descendants to display. For example, if the value is 2 , the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. 999 . |
sort | auto |
The sort criteria of the displayed list. - auto defaults to ordersectionsby of the page’s Front Matteror to ordersectionsby of the configuration Optionor to weight - weight - title - linktitle - modifieddate - expirydate - publishdate - date - length - default adhering to Hugo’s default sort criteria |
Examples
All Default
{{% children %}}
With Description
{{% children description="true" %}}
- page X
This is a plain page test, and the beginning of a YAML multiline description...
- page 1
This is a demo child page
- page 2
This is a demo child page with no description.
So its content is used as description.
- page 3
This is a demo child page
Infinite Depth and Hidden Pages
{{% children depth="999" showhidden="true" %}}
- page X
- page 1
- page 1-1
- page 1-1-1 (hidden)
- page 1-1-2 (headless)
- page 1-1-3
- page 1-1
- page 2
- page 3
- page 4 (hidden)
Heading Styles for Container and Elements
{{% children containerstyle="div" style="h2" depth="3" description="true" %}}
page X
This is a plain page test, and the beginning of a YAML multiline description...
page 1
This is a demo child page
page 1-1
This is a demo child page
page 1-1-2 (headless)
This is a demo child page
page 1-1-3
This is a demo child page
page 2
This is a demo child page with no description.
So its content is used as description.
page 3
This is a demo child page
page 3-1
This is a plain page test nested in a parent
Divs for Group and Element Styles
{{% children containerstyle="div" style="div" depth="3" %}}