Membuat hingga tiga tingkat hirarki halaman menggunakan navigasi hibrida

Contoh ini merender jenis navigasi hibrida, berdasarkan sitemap portal, yang merender hingga tiga tingkat hierarki halaman. Aturan komponen ini adalah:

  • Halaman moyang halaman aktif akan ditampilkan, kembali ke halaman Beranda (atau kedalaman maksimum yang ditentukan oleh parameter offset_kedalaman opsional).
  • Jika halaman memiliki anak-anak, halaman anak tersebut akan ditampilkan.
  • Jika halaman tidak memiliki anak, saudara dari halaman saat ini akan ditampilkan.
{% 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>

Lihat juga

Membuat template lanjutan untuk portal
Membuat template halaman kustom menggunakan Liquid dan template halaman template web
Buat Template halaman kustom untuk merender RSS feed
Render daftar entitas yang terkait dengan halaman aktif
Merender header website dan bar navigasi utama