Irisnetwork

Atomic Design - Kirby CMS

Crono
23.04.2024 22:36
Lesezeit: ~1 min

Twig

Für Atomic Design empfielt sich eine leistungsstarke Template-Engine wie zum Beispiel Twig. Für Kirby steht das Paket wearejust/kirby-twig bereit. Die Installation ist mit composer schnell erledigt:

composer require wearejust/kirby-twig

Nun können direkt Templates im Template-Ordner unter site/templates angelegt werden. Die Namenskonvention ist dabei: Gleicher name wie das Seitentemplate, gefolgt von .twig als Endung. Dann nimmt Kirby automatisch dieses Twig Template als Einstiegspunkt zum Rendern der Seite.

Ordnerstruktur

Nun gilt es ein kleines Problem zu umschiffen: Kirby erwartet die Templates als Einstiegspunkt direkt im Ordner site/templates. Daher lege ich die Atomic Design Ordner-Struktur komplett innerhalb des site/snippets Ordners an und nutze die Twig-Templates unter site/templates lediglich als Einstiegspunkt. Vielleicht finde ich hier noch eine schönere Lösung, aber im Moment habe ich da noch keine Probleme festgestellt.

So sieht mein Twig-Template für Seiten die auf dem Blueprint "Article" basieren wie folgt aus:

{% include "@snippets/04_templates/t-article/t-article.twig" %}