Відтворюйте до трьох рівнів ієрархії сторінки за допомогою гібридної навігації
У цьому прикладі відтворено тип гібридної навігації, яка базується на карті сайту, що передає до трьох рівнів ієрархії сторінки. Правилами для цього компонента є:
- Показуються вихідні сторінки поточної сторінки із поверненням до головної сторінки (або до максимальної вказаної глибини, визначеної додатковим параметром depth_offset).
- Якщо поточна сторінка має похідні сторінки, то відображаються останні.
- Якщо поточна сторінка не має похідних та однорівневих сторінок до поточної, то буде відображатися поточна.
{% 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>