DH
David Hellmann
2019/02/18

Craft CMS: Active Class Macro

Braucht man ja öfters mal. Man möchte anhand der aktuellen URL wo man sich befindet vielleicht einen Menüpunkt mit einer Active class versehen. Das kann man sicher immer wieder von Hand schreiben oder man erstell sich einen kleinen Helper in Form eines Macros.

Das Macro

Das Macro an sich ist recht simple. Es gibt drei Optionen die man in das Macro übergeben kann. Zum einen ist es das Wort nach dem gesucht werden soll. Dann die Postion wo man nach dem Wort suchen soll und zu guter letzt noch der Classname den man vergeben möchte. Das Macro schaut dann so aus:

      
        {# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var entry \craft\elements\Entry #}
{#
  Set Active Class
  ------------------------------------------------------------
  {% import '_partials/macros/_macro-isActive.twig' as macroIsActive  %}
  {{ macroIsActive.isActive('news', -1, 'cn') }}
#}

{% macro isActive(segments, position, prefix, cn) %}
  {% spaceless %}
    {% set segments = segments | default(null) %}
    {% set position = position | default(-1) %}
    {% set prefix = prefix | default(null) %}
    {% set cn = cn | default('is-active') %}

    {% if segments is iterable and craft.app.request.getSegment(position) in segments %}
      {{ prefix ? prefix ~ cn : cn }}
    {% elseif craft.app.request.getSegment(position) == segments %}
      {{ prefix ? prefix ~ cn : cn }}
    {% endif %}
  {% endspaceless %}
{% endmacro %}hr

Den Name müsst ihr natürlicha auf jeden Fall übergeben. Die Position ist per default auf -1 gesetzt, was so viel heißt wie, dass immer das letzte Segment der URL angeschaut wird. Classname ist per dafault auf is-active gestellt.

Macro nutzen

Macros müssen immer in dem File importiert werden, in dem ihr es nutzt. Bei mir sieht das dann so aus am Ende so aus:

      
        {# -- Macros -- #}
{% import '_partials/macros/_macro-isActive.html' as macroIsActive  %}

<a href="{{ siteUrl ~ 'blog' }}" class="link  {{ macroIsActive.isActive('blog') }}">Blog</a>

Wenn ihr euch also auf der Site "Blog" befindet sollte dann am Ende das hier dabei rauskommen:

      
        <a href="https://davidhellmann.com/blog" class="link  is-active">Blog</a>

Requirements

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

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

Maybe interesting…

UP