Fix liquid variable leakage in navigation components (#1243)

* Refactor nav, breadcrumbs, children_nav

Fix #1118

Improve the modularity of building the nav-panel, breadcrumbs, and children-nav
by making them independent. This also significantly simplifies the Liquid code.

* Fix order of breadcrumbs

* Update breadcrumbs.html

Revert inclusion of single breadcrumb for top-level pages.

* Update breadcrumbs.html

* Update children_nav.html

Revert to the previous layout in the HTML, to allow the use of `diff` to check the built site.

* Update minimal.html

Remove the previously required workaround involving `nav.html`.

* Add docs pages about layouts

The aim of the initial version of these docs pages is to illustrate the difference between the default and minimal layouts.

* Update CHANGELOG.md
This commit is contained in:
Peter Mosses
2023-05-09 17:57:26 +02:00
committed by GitHub
parent 3048541778
commit 8e38759613
11 changed files with 263 additions and 217 deletions

View File

@@ -1,15 +1,43 @@
{% unless page.url == "/" %}
{% if page.parent %}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
{% else %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
{% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{% endif %}
{% endunless %}
{%- comment -%}
Include as: {%- include components/breadcrumbs.html -%}
Depends on: page, site.
Results in: HTML for the breadcrumbs component.
Overwrites:
pages_list, parent_page, grandparent_page.
{%- endcomment -%}
{%- if page.url != "/" and page.parent -%}
{%- assign pages_list = site[page.collection]
| default: site.html_pages
| where_exp: "item", "item.title != nil"
| where_exp: "item", "item.has_children != nil" -%}
{%- if page.grand_parent -%}
{%- assign parent_page = pages_list
| where: "title", page.parent
| where: "parent", page.grand_parent
| first -%}
{%- assign grandparent_page = pages_list
| where: "title", page.grand_parent
| first -%}
{%- else -%}
{%- assign parent_page = pages_list
| where: "title", page.parent
| where_exp: "item", "item.parent == nil"
| first -%}
{%- endif -%}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.parent -%}
{%- if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ grandparent_page.url | relative_url }}">{{ page.grand_parent }}</a></li>
{%- endif %}
<li class="breadcrumb-nav-list-item"><a href="{{ parent_page.url | relative_url }}">{{ page.parent }}</a></li>
{% endif -%}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{%- endif -%}

View File

@@ -1,9 +1,33 @@
{%- comment -%}
Include as: {%- include components/children_nav.html -%}
Depends on: page, site.
Results in: HTML for the children-navigation component.
Includes:
sorted_pages.html
toc_heading_custom.html
Overwrites:
child_pages.
{%- endcomment -%}
{%- if page.has_children == true and page.has_toc != false -%}
{%- assign child_pages = site[page.collection]
| default: site.html_pages
| where: "parent", page.title
| where: "grand_parent", page.parent -%}
{%- include sorted_pages.html pages = child_pages -%}
{%- if page.child_nav_order == 'desc' or page.child_nav_order == 'reversed' -%}
{%- assign sorted_pages = sorted_pages | reverse -%}
{%- endif -%}
{%- endif -%}
<hr>
{% include toc_heading_custom.html %}
<ul>
{% for child in include.toc_list %}
<li>
<a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li>
{% endfor %}
{% for child in sorted_pages %}
<li>
<a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li>
{% endfor %}
</ul>