diff options
| author | Alex <alex@adnab.me> | 2022-06-01 17:04:10 +0200 |
|---|---|---|
| committer | Alex <alex@adnab.me> | 2022-06-01 17:04:10 +0200 |
| commit | e69ee6ab7c0519d6897133d6269be16a307cf175 (patch) | |
| tree | deb249595896219cefdd11a641de8cb651cabe7d | |
| parent | 40596285a182ddd469422de25f7c78bcef098953 (diff) | |
| parent | 71980e93aecc7137017f769f8de746d9b2959b9d (diff) | |
| download | guide.deuxfleurs.fr-e69ee6ab7c0519d6897133d6269be16a307cf175.tar.gz guide.deuxfleurs.fr-e69ee6ab7c0519d6897133d6269be16a307cf175.zip | |
Merge pull request 'Hierarchical navigation menu' (#4) from hier-nav-menu into main
Reviewed-on: https://git.deuxfleurs.fr/Deuxfleurs/man.deuxfleurs.fr/pulls/4
| -rw-r--r-- | templates/_nav.html | 61 | ||||
| -rw-r--r-- | templates/index.html | 56 |
2 files changed, 77 insertions, 40 deletions
diff --git a/templates/_nav.html b/templates/_nav.html new file mode 100644 index 0000000..9b76c96 --- /dev/null +++ b/templates/_nav.html @@ -0,0 +1,61 @@ +{% 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.subsections or p.pages %} + {% 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 %} + {% else %} + {% 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 %} + {% 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 | slice(start=1) | 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 %} |