Afficher jusqu'à trois niveaux de hiérarchie de page à l'aide de la navigation hybride

Cet exemple présente un type de navigation hybride, basé sur le plan de site du portail, qui affiche jusqu'à trois niveaux de hiérarchie de page. Les règles de ce composant sont :

  • Les pages d'ancêtres de la page active sont affichées sur la page d'accueil (ou à la profondeur maximale spécifiée par le paramètre depth_offset facultatif).
  • Si la page active a des enfants, ces pages enfants sont affichées.
  • Si la page active n'a pas d'enfants, les frères de la page active sont affichés.
{% 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>

Voir aussi

Créer des modèles avancés pour les portails
Créer un modèle de page personnalisé avec Liquid et un modèle de page Modèle Web
Créer un modèle de page personnalisé pour afficher un flux RSS
Afficher la liste d'entités associée à la page active
Afficher un en-tête de site Web et une barre de navigation principale