DH
David Hellmann
2018/03/15

Craft CMS: Breadcrumb Macro

Grad mal Abstract aufgemacht und das Design angeschaut… Breadcrumb, meh! Ist im Design immer schnell gemacht aber aus Erfahrung kann ich nur sagen, dass es eher Pain ist und schnell recht komplex werden kann um alle Anforderungen abzudecken. Also kurz das Kleinhirn angestrengt was man da so machen könnte. Macro, YO!

Das Macro

Ob es die letzte Ausbaustufe ist würde ich jetzt nicht mit Ja beantworten aber ich werde den Post hier hoffentlich updaten falls es was zum updaten gibt.

      
        {# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var entry \craft\elements\Entry #}
{#
  Breadcrumb Macro
  ------------------------------------------------------------

  {% import '_partials/macros/_macro-breadcrumb.html' as macroBreadcrumb  %}
  {{ macroBreadcrumb.breadcrumb([{}]) }}
#}

{% macro breadcrumb(breadCrumbLinks, separator) %}
  {% set listItems = [] %}

  {# -- Check if breadCrumbLink is an Array -- #}
  {% if breadCrumbLinks is iterable %}
    
    {# -- Loop over the breadCrumbLinks -- #}
    {% for item in breadCrumbLinks %}
      {# -- Set link var -- #}
      {% set link = '' %}

      {# -- Check if item Title is existing -- #}
      {% if item.title ?? null %}
        
        {# -- Set Separator -- #}
        {% set separator = separator | default(' · ') %}
        {% if loop.last %}
          
          {# -- If loop last we need no separator -- #}
          {% set separator = '' %}
        {% endif %}
        
        {# -- Check if item Link is existing and item linked is true -- #}
        {% if item.link ?? null and item.linked %}

          {# -- Set Link Markup -- #}          
          {% set link %}
            {% spaceless %}
              <li class="m-breadcrumb__item">
                <a href="{{ item.link }}" class="m-breadcrumb__link">
                  {{- item.title -}}
                </a>{{- separator | raw -}}
              </li>
            {% endspaceless %}
          {% endset %}
        {% else %}
          
          {# -- Set Plain Text Markup -- #}
          {% set link = '<li>' ~ item.title ~ separator ~ '</li>' %}
        {% endif %}
      {% endif %}

      {# -- Merge all Items into listItems -- #}
      {% set listItems = listItems | merge([link]) %}
    {% endfor %}
  {% endif %}

  {# -- Set Output Markup -- #}
  {% set output %}
    <ul>
      {% for item in listItems %}
        {{ item | raw }}
      {% endfor %}
    </ul>
  {% endset %}
  
  {# -- Output -- #}
  {% return output %}
{% endmacro %}

Macro aufrufen

Das ganze müssen wir jetzt nur noch da aufrufen wo wir es brauchen. Am Ende müssen wir da natürlich dynamischen Content reinpacken wo es gebraucht wird aber das würde das hier nur unnötig verkomplizieren. Deswegen mal mit Dummy Content.

      
        {# -- Macros -- #}
{% import '_partials/macros/_macro-breadcrumb.html' as macroBreadcrumb  %}

{% set breadCrumbLinks = [
  { 
    title: 'Home', 
    link: 'http://google.com', 
    linked: true 
  },
  { 
    title: 'Blog', 
    link: 'http://google.com', 
    linked: true 
  },
  { 
    title: 'Category', 
    link: 'http://google.com', 
    linked: true },
  { 
    title: 'Title', 
    linked: false 
  }
] %}

{{ macroBreadcrumb.breadcrumb(breadCrumbLinks) }}

Im Grunde include wir zuerst einmal unser Macro. Im nächsten Schritt legen wir eine Variable an mit den Breadcrumb Einträgen. Es gibt drei Option:

  1. link: Einfach die Url wo das ganze hinlinken soll
  2. title: Das was dann als Text erscheinen wird für den jeweiligen Link
  3. linked: Ob es verlinkt werden soll oder einfach als Plaintext ausgegeben werden soll

Jetzt müssen wir nur noch das Macro aufrufen mit unserer Variable und schon gehts. CSS schreibt ihr selber!

Requirements

Das ganze sollte nahe zu identisch für Craft CMS 2 auch gehen aber wir machen hier den neuen Scheiß!

Development
Tags breadcrumb coding craft cms craftcms craftcms3 macro twig
comments powered by Disqus

Maybe interesting…

UP