86 lines
2.7 KiB
Markdown
86 lines
2.7 KiB
Markdown
|
+++
|
||
|
|
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" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* children sort="weight" */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{% tab name="partial" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{ 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](https://gohugo.io/content/summaries/). |
|
||
|
|
| **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.<br><br>If not set it is sorted by the [`ordersectionsby`]({{% relref "basics/configuration#global-site-parameters" %}}) setting of the site and the pages frontmatter<br><br>- `weight`: to sort on menu order<br>- `title`: to sort alphabetically on menu label. |
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
### All Default
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* children */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% children %}}
|
||
|
|
|
||
|
|
### With Description
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* children description="true" */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{%children description="true" %}}
|
||
|
|
|
||
|
|
### Infinite Depth and Hidden Pages
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* children depth="999" showhidden="true" */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% children depth="999" showhidden="true" %}}
|
||
|
|
|
||
|
|
### Heading Styles for Container and Elements
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* children containerstyle="div" style="h2" depth="3" description="true" */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% children containerstyle="div" style="h2" depth="3" description="true" %}}
|
||
|
|
|
||
|
|
### Divs for Group and Element Styles
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* children containerstyle="div" style="div" depth="3" */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% children containerstyle="div" style="div" depth="3" %}}
|