The following instruction can be used for a "chapter" Table of Contents (TOC) and for a site wide TOC like used on the Welcome page of this site.
Put in the root of the templates folder of your theme a file called 'chapter-toc.html.twig' with the following content:
{% extends 'docs.html.twig' %}
{% macro loop(page, parent_loop) %}
{% for p in page.children.visible %}
<li class="chapter{{ parent_page }}">
<a href="{{ p.url }}" {% if p.header.class %}class="{{ p.header.class }}"{% endif %}>
<span>
{{ p.menu }}
</span>
</a>
{% if p.children.count > 0 %}
<ul>
{{ _self.loop(p, parent_loop|default(0)+loop.index) }}
</ul>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
{% macro version(p) %}
<li class="chapter-page">
<a href="{{ p.url }}">{{ p.menu }}</a>
</li>
{% endmacro %}
{% block content %}
<style>
#chapter-pages ul {
list-style: none;
}
#chapter-pages li:before {
content: "\f111"; /* FontAwesome Unicode */
font-family: FontAwesome;
font-size: 9px;
padding-right: 10px;
color: #bdbdbd;
display: inline-block;
}
#chapter-pages .chapter-page {
font-weight: bold;
margin-top: 10px;
}
#chapter-pages a:visited {
color: #9B59B6;
}
</style>
<div id="body-inner">
<p>
{{ page.content }}
</p>
<p>
Contents:
</p>
{% if page.collection|defined(false) != false %}
<div id="chapter-pages">
<ul class="topics">
{% if page.header.content.items|defined(false) == '@root.descendants' %}
{% for slug, ver in pages.children %}
{{ _self.version(ver) }}
{% if ver.children.count > 0 %}
<ul>
{{ _self.loop(ver, '') }}
</ul>
{% endif %}
{% endfor %}
{% else %}
{{ _self.loop(page, '') }}
{% endif %}
</ul>
</div>
{% endif %}
</div>
{% endblock %}
Make a page with the template "chapter-toc"
You can enter text as normal into this document, on the bottom of the document and index of this chapter will be added automatically.
Follow the same steps as in Step 2a. but now we add the the following to the front-matter in the expert options of the page:
content:
items: '@root.descendants'