diff options
| author | Alex Auvolat <alex@adnab.me> | 2022-06-01 16:41:21 +0200 |
|---|---|---|
| committer | Alex Auvolat <alex@adnab.me> | 2022-06-01 16:44:36 +0200 |
| commit | 0900f2910e908ff8c997b684c2f7ae69791f50de (patch) | |
| tree | 716428ea37858c69672e749e151b4345357e319a | |
| parent | 40596285a182ddd469422de25f7c78bcef098953 (diff) | |
| download | guide.deuxfleurs.fr-0900f2910e908ff8c997b684c2f7ae69791f50de.tar.gz guide.deuxfleurs.fr-0900f2910e908ff8c997b684c2f7ae69791f50de.zip | |
Hierarchical navigation menu
| -rw-r--r-- | templates/_nav.html | 53 | ||||
| -rw-r--r-- | templates/index.html | 56 |
2 files changed, 69 insertions, 40 deletions
diff --git a/templates/_nav.html b/templates/_nav.html new file mode 100644 index 0000000..92ed4c5 --- /dev/null +++ b/templates/_nav.html @@ -0,0 +1,53 @@ +{% macro navsection(hierarchy, level, current) %} + {% set sec = hierarchy | nth(n=level) %} + {% set sec = get_section(path=sec) %} + {% set maxlevel = hierarchy | length %} + + {% if sec.subsections %} + {% for s in sec.subsections %} + {% set p = get_section(path=s) %} + <div class="toc-item"> + {% if p.path == current.path %} + <a class="subtext" href="{{ p.permalink | safe}}">⯆ <b>{{ p.title }}</b></a> + {% elif hierarchy is containing(s) %} + <a class="subtext" href="{{ p.permalink | safe}}">⯆ {{ p.title }}</a> + {% else %} + <a class="subtext" href="{{ p.permalink | safe}}">⯈ {{ p.title }}</a> + {% endif %} + {% if hierarchy is containing(s) or current.path == p.path %} + {% if level + 1 < maxlevel %} + {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }} + {% endif %} + {% endif %} + </div> + {% endfor %} + {% endif %} + + {% if sec.pages %} + {% for p in sec.pages %} + <div class="toc-item"> + {% if p.path == current.path %} + <a class="subtext" href="{{p.permalink | safe}}"> <b>{{ p.title }}</b></a> + {% else %} + <a class="subtext" href="{{p.permalink | safe}}"> {{ p.title }}</a> + {% endif %} + </div> + {% endfor %} + {% endif %} +{% endmacro navsection %} + +{% macro navmenu(current) %} + {% if current.ancestors %} + {% set hierarchy = current.ancestors | concat(with=current.relative_path) %} + {% else %} + {% set hierarchy = [current.relative_path] %} + {% endif %} + + {% set root_path = hierarchy | nth(n=0) %} + {% set root = get_section(path=root_path) %} + <div class="toc-item toc-section"> + <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a> + </div> + + {{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }} +{% endmacro %} diff --git a/templates/index.html b/templates/index.html index 54fb473..004a4fa 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,4 +1,5 @@ {% import "_macros.html" as macros %} +{% import "_nav.html" as nav %} <!DOCTYPE html> <html lang="en"> @@ -7,7 +8,7 @@ <title>{% block title %}{{ config.title }}{% endblock title %}</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% block favicon %} - <link rel="icon" type="image/png" href="/favicon.ico"> + <link rel="icon" type="image/png" href="/favicon.ico"> {% endblock favicon %} {% include "_variables.html" %} <link rel="stylesheet" href="/normalize.css"> @@ -24,46 +25,21 @@ {% endblock header %} <main> - {% block toc %} - {% if page.ancestors %} - {% set section = get_section(path=page.ancestors | last) %} - {% endif %} - {% if section.ancestors %} - {% set parent = get_section(path=section.ancestors | last) %} - {% endif %} + {% block toc %} <div class="toc"> - <div class="toc-sticky"> - <div class="toc-item toc-section"> - <a class="subtext" href="{{section.permalink | safe}}">{{ section.title }}</a> - </div> - {% if section.subsections %} - {% for s in section.subsections %} - {% set p = get_section(path=s) %} - <div class="toc-item"> - <a class="subtext" href="{{ p.permalink | safe}}">{{ p.title }}</a> - </div> - {% endfor %} - {% endif %} - - {% if section.pages %} - {% for p in section.pages %} - <div class="toc-item"> - <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a> - </div> - {% endfor %} - {% endif %} - {% if parent %} - <div class="toc-item"> - <a class="subtext" href="{{parent.permalink | safe}}">← Retour</a> - </div> - {% endif %} - </div> + <div class="toc-sticky"> + {% if page %} + {{ nav::navmenu(current=page) }} + {% else %} + {{ nav::navmenu(current=section) }} + {% endif %} + </div> </div> - {% endblock toc %} + {% endblock toc %} <div class="content text"> {% block content %} - <div id="features" class="heading-text">{{ section.title }} </div> + <div id="features" class="heading-text">{{ section.title }} </div> {{ section.content | safe }} {% endblock content %} </div> @@ -75,10 +51,10 @@ {% block footer %} <footer> <small class="subtext"> - Édité et hébergé par <a href="https://deuxfleurs.fr">Deuxfleurs</a>, - généré par <a href="https://www.getzola.org">Zola</a>, - thème dérivé de <a href="https://github.com/huhu/juice">Juice</a>, - servi par <a href="https://garagehq.deuxfleurs.fr/">Garage</a>. + Édité et hébergé par <a href="https://deuxfleurs.fr">Deuxfleurs</a>, + généré par <a href="https://www.getzola.org">Zola</a>, + thème dérivé de <a href="https://github.com/huhu/juice">Juice</a>, + servi par <a href="https://garagehq.deuxfleurs.fr/">Garage</a>. </small> </footer> {% endblock footer %} |