DocPort Documentation

children

Jump to Section

Use the children shortcode to list the child pages of a page and the further descendants (children’s children). By default, the shortcode displays links to the child pages.

Usage

Parameter Default Description
page current Specify the page name (section name) to display children for
style “li” Choose the style used to display descendants. It could be any HTML tag name, use “card” to display children pages as cards
showhidden “false” When true, child pages hidden from the menu will be displayed
description “false” Allows you to include a short text under each page in the list.
when no description exists for the page, children shortcode takes the first 70 words of your content. read more info about summaries on gohugo.io
depth 1 Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages.
sort none Sort Children By
  • Weight - to sort on menu order
  • Name - to sort alphabetically on menu label
  • Identifier - to sort alphabetically on identifier set in frontmatter
  • URL - URL
  • Demo

    	{{% children  %}}
    
    	{{% children description="true"   %}}
    

    • page 1
    • This is a demo child page

    • page 2
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • page 3
    • This is a demo child page

    • page test
    • This is a page test

    	{{% children depth="3" showhidden="true" %}}
    
    	{{% children style="h2" depth="3" description="true" %}}
    

      page 1

      This is a demo child page

      page 1-1

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

      page 1-1-1

      This is a demo child page

      page 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      page test 3

      This is a page test

      page 3

      This is a demo child page

      page test

      This is a page test

    	{{% children style="div" depth="999" %}}
    
    	{{% children style="card" depth="2"  description="true" %}}
    

      page 1

      This is a demo child page

      page 1-1

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

      page 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      page test 3

      This is a page test

      page 3

      This is a demo child page

      page test

      This is a page test