Children
The children shortcode lists the child pages of a page and its descendants .
Usage
{{% children %}}
Parameter
| Name | Default | Notes |
|---|---|---|
| page | <current> | Specify the page name (section name) to display children for. |
| 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 aswell. |
| 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 | see notes | The sort order of the displayed list. If not set it is sorted by the ordersectionsby setting of the site and the pages frontmatter- weight: to sort on menu order- title: to sort alphabetically on menu label. |
Examples
All Default
{{% children %}}
With Description
{{% children description="true" %}}
- page X
- page 1
- page 2
- page 3
This is a plain page test, and the beginning of a YAML multiline description...
This is a demo child page
This is a demo child page with no description. So its content is used as description.
This is a demo child page
Infinte Depth and Hidden Pages
{{% children depth="999" showhidden="true" %}}
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
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" %}}