Choose table of content position

4

I modified a bit the code to

  • allow easier css styling
  • not display level 1 header
  • mark the content as safe

here:


{# ========================= #}
{# === table of contents === #}
{# ========================= #}
{%- macro toc(toc, level, depth) %}
{%- if level == 1 %}
<div class="toc">
<h3>Table des matières</h3>
{%- endif %}
{%- if level != 1 %}
<ol class="h{{ level }}">
{%- endif %}
{%- for h in toc %}
    {%- if level != 1 %}
    <li>
        <a href="{{ h.permalink | safe }}">{{ h.title }}</a>
        {%- endif %}
        {% if h.children and level <= depth -%}
            {{ self::toc(toc=h.children, level=level+1, depth=depth, heading=false) }}
        {%- endif %}
    {%- if level != 1 %}
    </li>
    {%- endif %}
    {%- endfor %}
{%- if level != 1 %}
</ol>
{%- endif %}
{%- if level == 1 %}
</div>
{%- endif %}
{%- endmacro %}


{# =================== #}
{# === replace toc === #}
{# =================== #}
{%- macro replace_toc(resource) %}
	{%- set content = resource.content %}
	{%- if content is containing("[TOC]") %}
		{%- set content = content | replace(from="[TOC]", to=self::toc(toc=resource.toc, level=1, depth=resource.extra.toc_depth | default(value=6))) %}
	{%- endif -%}
	{{ content | safe }}
{%- endmacro %}

It is not as readable, but it produce code like this:

<div class="toc">
<h3>Table des matières</h3>
<ol class="h2">
    <li><a href="/wiki/blockchain/#un-systeme-de-crypto-monnaie">Un système de crypto-monnaie</a></li>
    <li> <a href="/wiki/blockchain/#l-asymetrie-spatio-temporelle-dans-les-monnaies-non-libres">L'asymétrie spatio-temporelle dans les monnaies non libres</a> 
        <ol class="h3">
            <li><a href="/wiki/blockchain/#l-asymetrie-spatiale-dans-le-bitcoin">L'asymétrie spatiale dans le Bitcoin</a> </li>
            <li><a href="/wiki/blockchain/#l-asymetrie-temporelle-dans-le-bitcoin">L'asymétrie temporelle dans le Bitcoin</a></li>
        </ol>
    </li>
    <li><a href="/wiki/blockchain/#comment-s-inspirer-du-bitcoin-pour-faire-une-monnaie-libre">Comment s'inspirer du Bitcoin pour faire une monnaie libre</a></li>
    <li><a href="/wiki/blockchain/#en-quoi-la-blockchain-duniter-differe-de-celle-du-bitcoin">En quoi la blockchain Duniter diffère de celle du Bitcoin</a>
        <ol class="h3">
            <li><a href="/wiki/blockchain/#la-toile-de-confiance-wot">La toile de confiance (WoT)</a></li>
            <li><a href="/wiki/blockchain/#les-transactions">Les transactions</a></li>
            <li><a href="/wiki/blockchain/#une-preuve-de-travail-a-difficulte-personnalite">Une preuve de travail à difficulté personnalité</a></li>
            <li><a href="/wiki/blockchain/#pour-resumer">Pour résumer</a></li>
        </ol>
    </li>
    <li><a href="/wiki/blockchain/#une-economie-libre">Une économie libre</a></li>
</ol>
</div>

Allowing with some css to change the list marker according to heading depth:

image