CSS thematisch mit pdoResources organisieren

Mit dieser Anleitung möchte ich zeigen, wie ich meine project.css in MODX organisiere. Für mich persönlich hat sich diese Art der Organisation als extrem hilfreich erwiesen.

Templates erstellen

Wir schreiben in unser erstes Template mit dem Namen CSS folgenden Code:

/* dein stylesheet name */

/* ----
** Name: [[*alias]]
** Source: [[~[[*id]]]] 
** Origin: [[++site_url]]
----


** Table of content bzw. TOC
** ----
[[pdoResources?
   &parents=`[[*id]]`
   &limit=`999`
   &tpl=`css-toc_tpl`
   &tplWrapper=`@INLINE [[+output]]`
   &sortby=`{"menuindex":"asc"}`
]]
** ---- */
[[pdoResources?
   &parents=`[[*id]]`
   &limit=`999`
   &tpl=`css_tpl`
   &tplWrapper=`@INLINE [[+output]]`
   &includeContent=`1`
   &sortby=`{"menuindex":"asc"}`
]]

Das zweite Template mit Namen CSS - topic besteht aus folgender TV:

[[*content]]

Chunks erstellen

Wir erstellen zwei Chunks.

css-toc_tpl

** [[+idx]]: [[+alias]]

css_tpl

/* ----
** [[+idx]]: [[+alias]]
** Source: [[~[[+id]]]]
** Last update: [[+editedon:date=`%Y-%m-%d %T`]] by [[+editedby:userinfo=`username`]]
*/

[[+content]]

/* ---- */

Ressourcen anlegen

Wir erstellen nun eine neue Ressource mit dem Namen css und tragen bei Ressourcen-Alias project ein. Wichtig ist, dass du noch den Inhaltstyp auf CSS stellst und das vorher erstellte Template CSS verwendest.

CSS lässt sich nun als Unterressourcen ganz einfach einteilen. Dort dann wieder den Inhaltstyp auf CSS stellen und unser zweites Template, nämlich CSS - topic verwenden. Nun hast du deinen CSS Code auf verschiedene Dateien, nach Themen sortiert, aufgeteilt. Du musst nun im <head> nur noch den Pfad zur project.css angeben.