# Choose table of content position

**URL:** <https://zola.discourse.group/t/choose-table-of-content-position/506>\
**Category:** Uncategorized\
**Created:** [July 23, 2020, 9:27pm UTC](https://zola.discourse.group/t/choose-table-of-content-position/506 "2020-07-23T21:27:19Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![HugoTrentesaux](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/hugotrentesaux/32/105_2.png) [@HugoTrentesaux](https://zola.discourse.group/u/HugoTrentesaux)\
**Post date:** [July 24, 2020, 3:16pm UTC](https://zola.discourse.group/t/choose-table-of-content-position/506/4 "2020-07-24T15:16:58Z")

</div>

I modified a bit the code to

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

here:

```auto

{# ========================= #}
{# === 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:

```auto
<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](https://global.discourse-cdn.com/free1/uploads/zola1/original/1X/3c77376c22a586e4122c47a0c5e4fa357f4f956c.png)

---

_[View the full topic](https://zola.discourse.group/t/choose-table-of-content-position/506)._