Rendern von bis zu drei Ebenen der Seitenhierarchie mithilfe der hybriden Navigation
Dieses Beispiel rendert eine hybride Navigation auf Basis der Website-Übersicht, die bis zu drei Ebenen der Seitenhierarchie rendert. Die Regeln für diese Komponente sind:
- Die Vorängerseiten der aktuellen Seite werden angezeigt, zurück zur Homepage (oder die maximale Tiefe wie durch den optionalen depth_offset-Parameter festgelegt).
- Wenn die aktuellen Seite untergeordnete Elemente hat, werden diese untergeordneten Seiten angezeigt.
- Wenn der aktuellen Seite keine untergeordnete Elemente hat, werden die Geschwisterelemente der aktuellen Seite angezeigt.
{% assign depth_offset = depth_offset | default: 0 %}
{% assign current_page = current_page | default: page %}
{% assign current_depth = 0 %}
{% if current_page.children.size > 0 %}
{% assign leaf_page = false %}
{% else %}
{% assign leaf_page = true %}
{% endif %}
{% capture page_item %}
<li class=active>
<a href={{ current_page.url | h }} title={{ current_page.title | h }}>
{% if leaf_page %}
<span class=fa fa-fw aria-hidden=true></span>
{% else %}
<span class=fa fa-fw fa-caret-down aria-hidden=true></span>
{% endif %}
{{ current_page.title | h }}
</a>
{% unless leaf_page %}
<ul>
{% for child in current_page.children %}
<li>
<a href={{ child.url | h }} title={{ child.title | h }}>
{% if child.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ child.title | h }}
{% if child.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif child.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endunless %}
</li>
{% endcapture %}
<ul class=side-nav role=navigation>
{% assign crumb_count = 0 %}
{% assign leaf_mode = false %}
{% for crumb in current_page.breadcrumbs %}
{% unless current_depth < depth_offset %}
{% if forloop.last and leaf_page %}
{% assign leaf_mode = true %}
{% else %}
<li>
<a href={{ crumb.url | h }} title={{ crumb.title | h }}>
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{{ crumb.title | h }}
</a>
</li>
{% endif %}
{% assign crumb_count = crumb_count | plus: 1 %}
{% endunless %}
{% assign current_depth = current_depth | plus: 1 %}
{% endfor %}
{% if crumb_count < 1 %}
{{ page_item }}
{% elsif crumb_count < 2 and leaf_mode %}
{% for parent_sibling in current_page.parent.parent.children %}
{% if parent_sibling.url == current_page.parent.url %}
<li>
<a href={{ current_page.parent.url | h }} title={{ current_page.parent.title | h }}>
<span class=fa fa-fw fa-caret-down aria-hidden=true></span>
{{ current_page.parent.title | h }}
</a>
<ul>
{% for sibling in current_page.parent.children %}
<li {% if sibling.url == current_page.url %}class=active{% endif %}>
<a href={{ sibling.url | h }} title={{ sibling.title | h }}>
{% if sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ sibling.title | h }}
{% if sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href={{ parent_sibling.url | h }} title={{ parent_sibling.title | h }}>
{% if parent_sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ parent_sibling.title | h }}
{% if parent_sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif parent_sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% else %}
<li>
<ul>
{% if leaf_mode %}
{% for parent_sibling in current_page.parent.parent.children %}
{% if parent_sibling.url == current_page.parent.url %}
<li>
<a href={{ current_page.parent.url | h }} title={{ current_page.parent.title | h }}>
<span class=fa fa-fw fa-caret-down aria-hidden=true></span>
{{ current_page.parent.title | h }}
</a>
<ul>
{% for sibling in current_page.parent.children %}
<li {% if sibling.url == current_page.url %}class=active{% endif %}>
<a href={{ sibling.url | h }} title={{ sibling.title | h }}>
{% if sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ sibling.title | h }}
{% if sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href={{ parent_sibling.url | h }} title={{ parent_sibling.title | h }}>
{% if parent_sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ parent_sibling.title | h }}
{% if parent_sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif parent_sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% else %}
{% for sibling in current_page.parent.children %}
{% if sibling.url == current_page.url %}
{{ page_item }}
{% else %}
<li>
<a href={{ sibling.url | h }} title={{ sibling.title | h }}>
{% if sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ sibling.title | h }}
{% if sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
</li>
{% endif %}
</ul>
<style type=text/css>
.side-nav {
border-right: solid 1px #eee;
}
.side-nav,
.side-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-nav ul {
margin-left: 20px;
}
.side-nav a {
display: block;
line-height: 30px;
overflow: hidden;
text-decoration: none;
white-space: nowrap;
}
.side-nav li > a:hover {
border-right: solid 1px #23527c;
}
.side-nav li.active > a,
.side-nav li.active > a:hover {
border-right: solid 1px #333;
color: #333;
font-weight: bold;
}
</style>