Гибридті навигациямен бет иерархиясының үш деңгейіне дейін көрсету

Бұл мысал бет иерархиясының үш деңгейіне дейін көрсететін портал сайты картасы негізінде гибридті навигация түрін көрсетеді. Осы құрамдас ережелері:

  • Ағымдағы беттің бастапқы беттері Басты бетке дейін қайта көрсетіледі (немесе қосымша тереңдік_ауытқу параметрімен көрсетілген максималды тереңдікке дейін).
  • Егер ағымдағы бетте балалар болса, осы бала беттері көрсетіледі.
  • Егер ағымдағы бетте балалар болмаса, ағымдағы бет баламалары көрсетіледі.
{% 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' %}
                &nbsp;<span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
              {% elsif child.entity.logical_name == 'adx_webfile' %}
                &nbsp;<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' %}
                    &nbsp;<span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
                  {% elsif sibling.entity.logical_name == 'adx_webfile' %}
                    &nbsp;<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' %}
              &nbsp;<span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
            {% elsif parent_sibling.entity.logical_name == 'adx_webfile' %}
              &nbsp;<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' %}
                          &nbsp;<span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
                        {% elsif sibling.entity.logical_name == 'adx_webfile' %}
                          &nbsp;<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' %}
                    &nbsp;<span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
                  {% elsif parent_sibling.entity.logical_name == 'adx_webfile' %}
                    &nbsp;<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' %}
                    &nbsp;<span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
                  {% elsif sibling.entity.logical_name == 'adx_webfile' %}
                    &nbsp;<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>

Сонымен қатар, қараңыз

Порталдар үшін кеңейтілген үлгілер жасау
Liquid арқылы теңшелетін бет үлгісін және веб-бет үлгісін жасау
RSS веб-арнасын көрсету үшін теңшелетін бет үлгісін жасау
Ағымдағы бетпен байланысты нысандар тізімін көрсету
Веб-сайт тақырыбын және негізгі навигация тақтасын көрсету