hugo-theme-relearn/shortcodes/children/index.print.html
2023-11-16 22:53:34 +00:00

501 lines
26 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.120.4">
<meta name="generator" content="Relearn 5.23.2+tip">
<meta name="description" content="List the child pages of a page">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Children :: Hugo Relearn Theme">
<meta name="twitter:description" content="List the child pages of a page">
<meta property="og:title" content="Children :: Hugo Relearn Theme">
<meta property="og:description" content="List the child pages of a page">
<meta property="og:type" content="website">
<meta property="og:url" content="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html">
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
<meta property="og:site_name" content="Hugo Relearn Theme">
<title>Children :: Hugo Relearn Theme</title>
<link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html" rel="alternate" hreflang="x-default">
<link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html" rel="alternate" hreflang="en">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
<link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Hugo Relearn Theme">
<link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
<link href="../../images/logo.svg?1700175208" rel="icon" type="image/svg+xml">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="../../css/fontawesome-all.min.css?1700175209" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700175209" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1700175209" rel="stylesheet">
<link href="../../css/auto-complete.css?1700175209" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700175209" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1700175209" rel="stylesheet">
<link href="../../css/fonts.css?1700175209" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700175209" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1700175209" rel="stylesheet">
<link href="../../css/theme-auto.css?1700175209" rel="stylesheet" id="R-variant-style">
<link href="../../css/variant.css?1700175209" rel="stylesheet">
<link href="../../css/print.css?1700175209" rel="stylesheet" media="print">
<link href="../../css/format-print.css?1700175209" rel="stylesheet">
<link href="../../css/ie.css?1700175209" rel="stylesheet">
<script src="../../js/url.js?1700175209"></script>
<script src="../../js/variant.js?1700175209"></script>
<script>
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
window.index_js_url="../../index.search.js";
var root_url="../../";
var baseUri=root_url.replace(/\/$/, '');
window.relearn = window.relearn || {};
window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
// variant stuff
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
// translations
window.T_Copy_to_clipboard = `Copy to clipboard`;
window.T_Copied_to_clipboard = `Copied to clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
window.T_Reset_view = `Reset view`;
window.T_View_reset = `View reset!`;
window.T_No_results_found = `No results found for "{0}"`;
window.T_N_results_found = `{1} results found for "{0}"`;
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/children/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide">
<button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
<i class="fa-fw fas fa-bars"></i>
</button>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Children</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="children">Children</h1>
<p>The <code>children</code> shortcode lists the child pages of the current page and its descendants.</p>
<ul class="children children-li children-sort-weight">
<li><a href="../../shortcodes/children/test/index.html">page X</a></li>
<li><a href="../../shortcodes/children/children-1/index.html">page 1</a></li>
<li><a href="../../shortcodes/children/children-2/index.html">page 2</a></li>
<li><a href="../../shortcodes/children/children-3/index.html">page 3</a></li>
</ul>
<h2 id="usage">Usage</h2>
<p>While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.</p>
<div class="tab-panel" data-tab-group="shortcode-parameter">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="shortcode"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('shortcode-parameter','shortcode')"
>
<span class="tab-nav-text">shortcode</span>
</button>
<button
data-tab-item="partial"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','partial')"
>
<span class="tab-nav-text">partial</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="shortcode"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">sort</span><span class="p">=</span><span class="s">&#34;weight&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="partial"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">&#34;shortcodes/children.html&#34;</span> <span class="p">(</span><span class="nx">dict</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;page&#34;</span> <span class="p">.</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;sort&#34;</span> <span class="s">&#34;weight&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div></div>
</div>
</div>
</div>
<h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>containerstyle</strong></td>
<td><code>ul</code></td>
<td>Choose the style used to group all children. It could be any HTML tag name.</td>
</tr>
<tr>
<td><strong>style</strong></td>
<td><code>li</code></td>
<td>Choose the style used to display each descendant. It could be any HTML tag name.</td>
</tr>
<tr>
<td><strong>showhidden</strong></td>
<td><code>false</code></td>
<td>When <code>true</code>, child pages hidden from the menu will be displayed as well.</td>
</tr>
<tr>
<td><strong>description</strong></td>
<td><code>false</code></td>
<td>When <code>true</code> 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 - <a href="https://gohugo.io/content/summaries/" target="_blank">read more info about summaries on gohugo.io</a>.</td>
</tr>
<tr>
<td><strong>depth</strong></td>
<td><code>1</code></td>
<td>The depth of descendants to display. For example, if the value is <code>2</code>, the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. <code>999</code>.</td>
</tr>
<tr>
<td><strong>sort</strong></td>
<td><code>auto</code></td>
<td>The sort criteria of the displayed list.<br><br>- <code>auto</code> defaults to <a href="../../cont/pages/index.html#frontmatter-configuration"><code>ordersectionsby</code> of the pages frontmatter</a><br>    or to <a href="../../basics/configuration/index.html#global-site-parameters"><code>ordersectionsby</code> of the site configuration</a><br>    or to <code>weight</code><br>- <code>weight</code><br>- <code>title</code><br>- <code>linktitle</code><br>- <code>modifieddate</code><br>- <code>expirydate</code><br>- <code>publishdate</code><br>- <code>date</code><br>- <code>length</code><br>- <code>default</code> adhering to Hugo&rsquo;s default sort criteria</td>
</tr>
</tbody>
</table>
<h2 id="examples">Examples</h2>
<h3 id="all-default">All Default</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<ul class="children children-li children-sort-">
<li><a href="../../shortcodes/children/test/index.html">page X</a></li>
<li><a href="../../shortcodes/children/children-1/index.html">page 1</a></li>
<li><a href="../../shortcodes/children/children-2/index.html">page 2</a></li>
<li><a href="../../shortcodes/children/children-3/index.html">page 3</a></li>
</ul>
<h3 id="with-description">With Description</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">description</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<ul class="children children-li children-sort-">
<li><a href="../../shortcodes/children/test/index.html">page X</a><p>This is a plain page test, and the beginning of a YAML multiline description...
</p></li>
<li><a href="../../shortcodes/children/children-1/index.html">page 1</a><p>This is a demo child page</p></li>
<li><a href="../../shortcodes/children/children-2/index.html">page 2</a><p>This is a demo child page with no description.
So its content is used as description.</p></li>
<li><a href="../../shortcodes/children/children-3/index.html">page 3</a><p>This is a demo child page</p></li>
</ul>
<h3 id="infinite-depth-and-hidden-pages">Infinite Depth and Hidden Pages</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;999&#34;</span> <span class="nx">showhidden</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<ul class="children children-li children-sort-">
<li><a href="../../shortcodes/children/test/index.html">page X</a><ul>
</ul></li>
<li><a href="../../shortcodes/children/children-1/index.html">page 1</a><ul>
<li><a href="../../shortcodes/children/children-1/children-1-1/index.html">page 1-1</a><ul>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">page 1-1-1 (hidden)</a><ul>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">page 1-1-1-1</a><ul>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html">page 1-1-1-1-1 (hidden)</a><ul>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html">page 1-1-1-1-1-1</a><ul>
</ul></li></ul></li></ul></li></ul></li>
<li><span>page 1-1-2 (headless)</span><ul>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">page 1-1-2-1</a><ul>
</ul></li>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">page 1-1-2-2</a><ul>
</ul></li></ul></li>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">page 1-1-3</a><ul>
</ul></li></ul></li></ul></li>
<li><a href="../../shortcodes/children/children-2/index.html">page 2</a><ul>
</ul></li>
<li><a href="../../shortcodes/children/children-3/index.html">page 3</a><ul>
<li><a href="../../shortcodes/children/children-3/test3/index.html">page 3-1</a><ul>
</ul></li></ul></li>
<li><a href="../../shortcodes/children/children-4/index.html">page 4 (hidden)</a><ul>
</ul></li>
</ul>
<h3 id="heading-styles-for-container-and-elements">Heading Styles for Container and Elements</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;h2&#34;</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;3&#34;</span> <span class="nx">description</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="children children-h2 children-sort-">
<h2><a href="../../shortcodes/children/test/index.html">page X</a></h2><p>This is a plain page test, and the beginning of a YAML multiline description...
</p>
<h2><a href="../../shortcodes/children/children-1/index.html">page 1</a></h2><p>This is a demo child page</p>
<h3><a href="../../shortcodes/children/children-1/children-1-1/index.html">page 1-1</a></h3><p>This is a demo child page</p>
<h4><span>page 1-1-2 (headless)</span></h4><p>This is a demo child page</p>
<h4><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">page 1-1-3</a></h4><p>This is a demo child page</p>
<h2><a href="../../shortcodes/children/children-2/index.html">page 2</a></h2><p>This is a demo child page with no description.
So its content is used as description.</p>
<h2><a href="../../shortcodes/children/children-3/index.html">page 3</a></h2><p>This is a demo child page</p>
<h3><a href="../../shortcodes/children/children-3/test3/index.html">page 3-1</a></h3><p>This is a plain page test nested in a parent</p>
</div>
<h3 id="divs-for-group-and-element-styles">Divs for Group and Element Styles</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;3&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="children children-div children-sort-">
<div><a href="../../shortcodes/children/test/index.html">page X</a></div>
<div><a href="../../shortcodes/children/children-1/index.html">page 1</a></div>
<div><a href="../../shortcodes/children/children-1/children-1-1/index.html">page 1-1</a></div>
<div><span>page 1-1-2 (headless)</span></div>
<div><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">page 1-1-3</a></div>
<div><a href="../../shortcodes/children/children-2/index.html">page 2</a></div>
<div><a href="../../shortcodes/children/children-3/index.html">page 3</a></div>
<div><a href="../../shortcodes/children/children-3/test3/index.html">page 3-1</a></div>
</div>
<footer class="footline">
</footer>
</article>
<section>
<h1 class="a11y-only">Subsections of Children</h1>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
</ul>
</div>
</header>
<h1 id="page-x">page X</h1>
<p>This is a plain demo child page.</p>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-1">page 1</h1>
<p>This is a demo child page.</p>
<h2 id="subpages-of-this-page">Subpages of this page</h2>
<ul class="children children-li children-sort-">
<li><a href="../../shortcodes/children/children-1/children-1-1/index.html">page 1-1</a></li>
</ul>
<footer class="footline">
</footer>
</article>
<section>
<h1 class="a11y-only">Subsections of page 1</h1>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-1-1">page 1-1</h1>
<p>This is a demo child page with a hidden child. You can still access the hidden child <a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">directly</a> or via the search.</p>
<h2 id="subpages-of-this-page">Subpages of this page</h2>
<ul class="children children-li children-sort-">
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">page 1-1-1 (hidden)</a></li>
<li><span>page 1-1-2 (headless)</span></li>
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">page 1-1-3</a></li>
</ul>
<footer class="footline">
</footer>
</article>
<section>
<h1 class="a11y-only">Subsections of page 1-1</h1>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/headless/index.html">headless</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-1-1-2-headless">page 1-1-2 (headless)</h1>
<footer class="footline">
</footer>
</article>
<section>
<h1 class="a11y-only">Subsections of page 1-1-2 (headless)</h1>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-1-1-2-1">page 1-1-2-1</h1>
<p>This is a plain demo child page.</p>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-1-1-2-2">page 1-1-2-2</h1>
<p>This is a plain demo child page.</p>
<footer class="footline">
</footer>
</article>
</section>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-1-1-3">page 1-1-3</h1>
<p>This is a plain demo child page.</p>
<footer class="footline">
</footer>
</article>
</section>
</section>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-2">page 2</h1>
<p>This is a demo child page with no description.</p>
<p>So its content is used as description.</p>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-3">page 3</h1>
<p>This is a demo child page.</p>
<h2 id="subpages-of-this-page">Subpages of this page</h2>
<ul class="children children-li children-sort-">
<li><a href="../../shortcodes/children/children-3/test3/index.html">page 3-1</a></li>
</ul>
<footer class="footline">
</footer>
</article>
<section>
<h1 class="a11y-only">Subsections of page 3</h1>
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/children/index.html">Children</a></li>
<li><a class="term-link" href="../../tags/non-hidden/index.html">non-hidden</a></li>
</ul>
</div>
</header>
<h1 id="page-3-1">page 3-1</h1>
<p>This is a plain demo child page.</p>
<footer class="footline">
</footer>
</article>
</section>
</section>
</div>
</main>
</div>
<script src="../../js/clipboard.min.js?1700175209" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1700175209" defer></script>
<script src="../../js/theme.js?1700175209" defer></script>
</body>
</html>