2.7 KiB
2.7 KiB
+++ alwaysopen = false description = "List the child pages of a page" title = "Children" +++
The children
shortcode lists the child pages of the current page and its descendants .
{{% children sort="weight" %}}
Usage
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
{{< tabs groupId="shortcode-parameter">}} {{% tab name="shortcode" %}}
{{%/* children sort="weight" */%}}
{{% /tab %}} {{% tab name="partial" %}}
{{ partial "shortcodes/children.html" (dict
"context" .
"sort" "weight"
)}}
{{% /tab %}} {{< /tabs >}}
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 | see notes | The sort order of the displayed list. If not set it is sorted by the [ ordersectionsby ]({{% relref "basics/configuration#global-site-parameters" %}}) 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 */%}}
{{% children %}}
With Description
{{%/* children description="true" */%}}
{{%children description="true" %}}
Infinite Depth and Hidden Pages
{{%/* children depth="999" showhidden="true" */%}}
{{% children depth="999" showhidden="true" %}}
Heading Styles for Container and Elements
{{%/* children containerstyle="div" style="h2" depth="3" description="true" */%}}
{{% children containerstyle="div" style="h2" depth="3" description="true" %}}
Divs for Group and Element Styles
{{%/* children containerstyle="div" style="div" depth="3" */%}}
{{% children containerstyle="div" style="div" depth="3" %}}