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ß!
- prev article Hexgears X1 — Meine erste mechanische Tastatur
- next article Vortex New 75 (Race 3) — Mechanical Keyboard
Maybe interesting…
-
Polls sind wohl gerade in aller Munde
- P. 2009/04/22
- C. Blogging
-
Vitra Headline – da sitz ich drauf! Von Smow.de
- P. 2011/05/01
- C. Blogging
-
ScriptConf 2017
- P. 2017/01/28
- C. Blogging
-
Best Website Gallery — Relaunch
- P. 2017/02/04
- C. Blogging
-
Apple AirPods Pro
- P. 2019/11/30
- C. Reviews
-
Joining Austria. Joining Salzburg. Joining Red Bull Creative. Hello!
- P. 2015/05/31
- C. Blogging