webEdition IDs in CSS und JS Dateien einbinden

In CSS und JS Dateien können auch Ersetzungen durch interne IDs vorgenommen werden.

Generelles Vorgehen



Seit webEdition 6.3.9 können IDs von webEdition Dokumenten und Grafiken auch in CSS (less/sass) und Javascript Dateien eingesetzt werden. Wurde früher im CSS folgendes geschrieben:
<code>
html, body {
background: url("http://documentation.webedition.org/wiki/lib/tpl/dokuwiki/images/page-gradient.png") repeat-x #FBFAF9;
color: #333333;
margin: 0px;
padding: 0px;
}
</code>

Kann dies nun so geschrieben werden:
<code:css>
html, body {
background: url("#WE:7766#") repeat-x #FBFAF9;
color: #333333;
margin: 0px;
padding: 0px;
}
</code>

Damit die ID auch wirklich ersetzt wird, muß bei der CSS/JS Datei auf der Eigenschaftsseite noch die Checkbox "Datei von Parser verarbeiten lassen" aktiviert werden.

Wurden nun die Grafiken verschoben, müssen die Pfade nicht mehr händisch angepaßt werden, es muß (aktuell) lediglich eine Rebuild aller statischen Dokumente erfolgen.

Einbinden in SCSS/LESS


Die Einbindung von Dateien in LESS und SCSS funktioniert in gleicher Weise wie auch bei normalen CSS Dateien. Zusätzlich können in den CSS-Präprozessoren import-Anweisungen ebenfalls mit den internen webEdition-ID's angegeben werden. In SCSS sieht das bspw. so aus:
<code:css>
$mainColor:#00005C;
@import '#WE:18823#';
</code>

Neu seit WE 9:

#WE:ID# gibt immer die ID des Dokuments selbst aus.

#WE:Path# gibt den Pfad für das Dokument aus.

 

Beides kann zum Debuggen im Header, oder auch für externe Aufrufe hilfreich sein.

powered by webEdition CMS